heroBeginneranimation
Sunset Gradient Hero
Warm coral-to-amber gradient with a serif italic headline.
Claude prompt
Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.
Build a sunset-themed hero with Tailwind: a vertical gradient background going from cream at the top through peach, soft orange, and warm coral at the bottom. A large radial-gradient 'sun' (yellow center to orange edge, slightly blurred) sits half-buried below the horizon at the bottom-center, slowly bobbing up and down via 16s keyframes. A faint horizon hairline separates ground from sky. Centered content uses Playfair Display serif (one word in italic accent color) with a Fraunces serif paragraph below, an italic Playfair eyebrow chip, and a deep walnut rounded-pill CTA. Romantic, warm, deliberately not-tech.
Code
html
<!--
Source: Vibedex
https://vibedex.io
License: MIT
Surfaced via https://vibedex.io/components/vbx-sunset-hero
-->
<section class="hero"><div class="sun"></div><div class="horizon"></div><div class="copy"><span class="chip">— New Season —</span><h1>Build something that feels like a <em>sunday morning</em>.</h1><p>Slow down. Make it warm. Ship the kind of work that feels good to come back to.</p><a class="cta" href="#">Begin →</a></div></section>