Tell a story in one hero
Watch for ten seconds — the scene below dissolves into its next chapter. Every shipped story renders here from the live STORIES registry.
This is a template, designed for you to alter and make your own.
This page shows you how to give a page a hero that cross-fades through chapters instead of freezing on one frame. Copy it to start a page of your own, change anything, or delete the whole app/(marketing)/recipes folder — nothing else in the template depends on it. Example pages are not indexed by search engines.
GENERIC_STORY — the example, authored in this tree4 chapters · hold 10s · fade 3s
Arrival, the space, the table, the night — a generic arc composed entirely from shipped catalog scenes. The annotated source at app/(marketing)/recipes/story-hero/generic-story.ts is the full method: how chapters are chosen, why the order is the argument, and the timing that keeps it a backdrop. It is yours to copy, reorder, or delete.
The shipped stories, live
STORIES.corporate6 chapters · hold 10s · fade 3s
STORIES.poplar5 chapters · hold 9s · fade 3s
STORIES.wedding6 chapters · hold 10s · fade 3s
The whole recipe
import { HERO_SPECS, VisualTile, type TileStory } from '@/components/visual';
// A story is DATA — chapters (each an ordinary TileSpec) + hold/fade timing.
// Composing one is choosing an ORDER, not writing art. Open with the chapter
// that answers what your visitor is anxious about; let the rest of the evening
// unfold in the order it is experienced.
const MY_STORY: TileStory = {
v: 1,
id: 'my-story',
holdS: 10, // ~10s a chapter + 3s dissolve = a minute per round trip — a backdrop, never a slideshow
fadeS: 3,
chapters: [HERO_SPECS.sunset, HERO_SPECS.tasting /* …up to 8 */],
};
<VisualTile story={MY_STORY} className="h-72 sm:h-96" />A chapter is an ordinary TileSpec — anything in the gallery can be one. Chapters keep their own clocks running between appearances, so no two passes through a story are identical.