Recipe

This header is the recipe

A live scene, full-bleed, with readable copy — from one component and one kind. Scroll down for the code.

This is a template, designed for you to alter and make your own.

This page shows you how to give any page a full-bleed animated hero with readable copy. 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.

The whole recipe

import { SceneHero } from '@/components/visual';

<SceneHero
  kind="cinema"
  eyebrow="Your eyebrow"
  title="Your headline over a living scene"
  blurb="SceneHero owns the full viewport width, keeps the copy readable over any
frame of the animation, and falls back to plain copy if the kind is unknown."
/>

kind picks a scene from HERO_SPECS (compositions built for a wide band — copy in the middle, weight on both sides) with CARD_SPECS as the fallback. Browse every kind in the gallery.
An unknown kind renders the copy with no art rather than crashing — a missing scene is a cosmetic loss, not an outage.
The copy colors are fixed light values, not theme tokens, because the scene is always dark art — that choice is the bug fix the component was born from.

Recipe

This header is the recipe

A live scene, full-bleed, with readable copy — from one component and one kind. Scroll down for the code.

This is a template, designed for you to alter and make your own.

The whole recipe

import { SceneHero } from '@/components/visual';

<SceneHero
  kind="cinema"
  eyebrow="Your eyebrow"
  title="Your headline over a living scene"
  blurb="SceneHero owns the full viewport width, keeps the copy readable over any
frame of the animation, and falls back to plain copy if the kind is unknown."
/>

kind picks a scene from HERO_SPECS (compositions built for a wide band — copy in the middle, weight on both sides) with CARD_SPECS as the fallback. Browse every kind in the gallery.
An unknown kind renders the copy with no art rather than crashing — a missing scene is a cosmetic loss, not an outage.
The copy colors are fixed light values, not theme tokens, because the scene is always dark art — that choice is the bug fix the component was born from.