Hero
Hero with a candle intro and a house in a snowy forest
A winter-wedding hero: a dark screen and one candle — a click on the wick lights it, warm light spreads and reveals the page. Behind it a house in a snowy forest fills the frame, serif names with a handwritten line, date and place, a “to the wedding” countdown in frosted glass tiles, “RSVP” and “Add to calendar”, a handwritten note; on the right a couple photo in an arched window frame with frost in the corners.
React + Tailwind, shadcn-compatible: press “Copy for AI” and your Cursor or Claude Code agent installs it with the shadcn CLI.
What you can change
- names, script, eyebrow, date (ISO), dateLabel, place, lede, note, countdownCaption, countdownLabels
- primaryLabel/Href, calendarLabel/Title/Location, image, photo, photoCaption, candle, candleLabel, candleHint
- accent and background, tone
Built from
The install command brings these components too. The block only passes them props: their palette and behaviour stay their own.
A link for your AI agent: preview, code and instructions.
Preview
Use it with AI
- 1. Copy the link.
- 2. Write to your agent in your own words and drop the link into the sentence.
- 3. The agent opens the link and installs the component from the registry.
put this on the home page as the hero:
https://vibeui.club/c/hero-027?lang=en&theme=dark
Not sure where to paste it? Step-by-step guide
Show the full instructions
What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.
Loading…
How to use
<Hero027
names="Valeria & Dmitry"
script="after dark"
date="2027-12-18T16:00:00+03:00"
dateLabel="18 December 2027"
place="Forest estate · 40 km from Moscow"
image="/photos/house.webp"
photo="/photos/couple.webp"
photoCaption="first snow, November"
candle
/>A sample call. The agent installs the component itself from the registry via the “Copy for AI” link.
Settings
- Names
names· default: Valeria & Dmitry- Script line
script· default: after dark- Candle intro
candle· default: on- Theme
tone· default: auto- Accent
accent· default: theme colour- Background
background· default: theme colour
Used in scenarios
- Winter wedding by candlelightCandle and hero
More in Hero
- Bakery hero with a live oven timer
- Podcast hero with a player and a live waveform
- Library hero with install command and a live terminal
- Personal hero: typing roles and a cursor spotlight
- App hero with a CSS phone and a breathing circle
- AI meetings hero: a monitor with a call app, after «Leave» the results arrive as notifications
FAQ
- How do I add Hero with a candle intro and a house in a snowy forest with Cursor or Claude Code?
- Press “Copy for AI” on this page and paste it into your agent's chat. The instruction contains the shadcn CLI install command, the dependencies and what to keep, so the agent installs this exact component instead of recreating a lookalike.
- What does Hero with a candle intro and a house in a snowy forest depend on?
- No npm packages beyond React and Tailwind CSS. It also installs catalog components: button-016.
- What can I change in Hero with a candle intro and a house in a snowy forest?
- Adapt: names, script, eyebrow, date (ISO), dateLabel, place, lede, note, countdownCaption, countdownLabels; primaryLabel/Href, calendarLabel/Title/Location, image, photo, photoCaption, candle, candleLabel, candleHint; accent and background, tone. Keep as installed: the button-016 imports from @/components/vibeui/ — do not inline their code into the block or swap in your own; the parts receive props only; the candle at the door: a click on the wick, the flash, warm light and the dissolve into the page; the frosted glass countdown tiles over the photo and lining numerals.
- Is Hero with a candle intro and a house in a snowy forest free?
- Yes. The preview is open without an account; with a free account you can copy up to 20 components a month.
For developers
npx shadcn@latest add https://vibeui.club/r/pro/hero-027.jsonThis command needs a signed link: sign in and open “Component source” below — it issues a working link valid for 30 minutes. All install options
Technical notes
A composite block: imports button-016 from @/components/vibeui/ — the install command brings them along with the block. The block owns the layout and its own text, passes the parts props only and leaves their --vibeui-<name>-* palettes alone. One file, zero npm dependencies, “use client” for the intro, countdown and .ics. The background is an <img> object-fit:cover under a night gradient. Layout from width: a column below 56rem, two columns 1.3fr/.7fr from 56rem. The intro is [data-part=gate] position:fixed over the screen (z-index 60) with a candle button: wax with drips, a saucer, a wick, the flame and a halo; data-lit turns on the flame (flicker keyframes), the backdrop's ::before grows from a point into a warm pool over 2.6 s, the backdrop dissolves after 1.9 s, the hero content rises after 2.4 s (data-intro). Inside a nested frame (window.self !== window.top) the candle is not rendered — via useSyncExternalStore. The countdown is a 1-second setInterval with Cormorant lining numerals. “Add to calendar” builds a text/calendar Blob with a nine-hour VEVENT. The window is a frame with an arched top, corner frost via radial-gradient with mix-blend-mode:screen. Palette --vibeui-hero-027-* is neutral: ink and paper via light-dark(), the site colours come through the accent, ink and background props; dark theme via .dark/[data-theme] or tone. Cormorant Garamond, Marck Script and Manrope come via <link precedence> from Google Fonts with system fallbacks. accent and background override colours, prefers-reduced-motion disables animations.
Tags
- wedding
- winter
- hero
- candle
- intro
- snow
- countdown
- calendar
- ics
- night
- forest
- dark
- composite
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…