Cursor
Cursor prompt for an animated hero background
A Cursor prompt for retrofitting an animated backdrop into a hero that already exists in your codebase. It makes the agent read the hero first, keeps the diff to one new file plus a few layering lines, and reuses your repo's own motion-preference utilities where they exist. Style selects the technique; motion from the customizer scales intensity.
Last updated
Prompt
Add an animated background layer behind the existing hero in this repo for {{product}}. First locate the hero: search for the component rendering the landing page's top section — likely named Hero, Banner, or similar under src/components — and read it before editing anything.
Scope of change, kept minimal and reviewable:
- New file: src/components/fx/HeroBackdrop.tsx, or whichever folder matches this repo's conventions for presentational components.
- In the hero component: add relative positioning and overflow-hidden to the root only if absent, insert <HeroBackdrop /> as the first child, and raise the existing content's stacking context only if the layer would cover it. Do not reorder, rename, or restyle any existing child, and do not touch global styles or shared layout files.
Technique selection by visual direction: blurred drifting gradient fields for soft directions, a lightweight canvas particle layer for dark or technical directions, slow rotating geometric strokes for editorial or brutalist directions. Implement it in whatever styling system the repo already uses.
Hard requirements:
- Transform and opacity animation only; a single rAF loop at most, cancelled on unmount.
- prefers-reduced-motion renders a static composition — check for an existing motion-preference hook or utility in the repo before writing a new one.
- pointer-events none on the layer; every existing hero control keeps working, including the primary button labelled "{{cta}}".
- A quiet margin of about 64px around the headline block so copy aimed at {{audience}} never sits on a busy area; scrim it if contrast dips below 4.5:1.
Visual direction:
{{style}}
Palette: {{palette}}
Typography: {{type}}
Motion: {{motion}}
Map motion to intensity: element count, drift distance, and speed move together.
Below 768px, halve the element count and slow everything down.
Run the dev server and verify: (1) git diff shows the new file plus a few lines in the hero component and nothing else, (2) the hero renders identically with the layer removed — no layout shift either way, (3) reduced-motion emulation freezes it, (4) all hero links and buttons still click.Customize it
Runs in your browser. Nothing you type here is sent anywhere.
Your customized prompt
Add an animated background layer behind the existing hero in this repo for a project management SaaS. First locate the hero: search for the component rendering the landing page's top section — likely named Hero, Banner, or similar under src/components — and read it before editing anything. Scope of change, kept minimal and reviewable: - New file: src/components/fx/HeroBackdrop.tsx, or whichever folder matches this repo's conventions for presentational components. - In the hero component: add relative positioning and overflow-hidden to the root only if absent, insert <HeroBackdrop /> as the first child, and raise the existing content's stacking context only if the layer would cover it. Do not reorder, rename, or restyle any existing child, and do not touch global styles or shared layout files. Technique selection by visual direction: blurred drifting gradient fields for soft directions, a lightweight canvas particle layer for dark or technical directions, slow rotating geometric strokes for editorial or brutalist directions. Implement it in whatever styling system the repo already uses. Hard requirements: - Transform and opacity animation only; a single rAF loop at most, cancelled on unmount. - prefers-reduced-motion renders a static composition — check for an existing motion-preference hook or utility in the repo before writing a new one. - pointer-events none on the layer; every existing hero control keeps working, including the primary button labelled "start a free trial". - A quiet margin of about 64px around the headline block so copy aimed at engineering managers at startups never sits on a busy area; scrim it if contrast dips below 4.5:1. Visual direction: Minimal dark style. Near-black canvas (#0A0A0B) with one elevated surface tone (#141416) for cards — never more than two surface steps. Hairline borders (1px, white at 8% opacity) instead of shadows; if a shadow is unavoidable use 0 1px 2px rgba(0,0,0,0.4) and nothing softer. Text in exactly three steps: white at 92% for headings, 60% for body, 40% for captions. Generous negative space — section padding at least 120px on desktop, 64px on mobile. The accent color appears only on interactive elements and one hero highlight, nowhere else. Palette: a strict neutral ramp (white, #F5F5F5, #E5E5E5, #737373, #171717) carries the entire interface; pick one accent and use it only for primary CTAs, active states, and a single hero highlight. If the accent appears more than five times per viewport it stops being an accent. Keep semantic colors (success, error) desaturated so the accent stays in charge. Typography: one geometric sans (a Futura/Poppins-class face) at three weights maximum (400/500/700). Scale: 64-88px hero, 32px section heads, 18px lede, 16px body, 13px caps labels with 0.08em tracking. Tight headline leading (1.05-1.1), relaxed body (1.6). Let the geometry carry the personality — no italics; weight and size do all hierarchy. Motion: none. Zero scroll animations, zero entrance effects — the page is fully composed the instant it paints. Spend the motion budget on input feedback instead: 120-150ms ease-out color and transform transitions on hover and press states only. Hold this constraint absolutely; it is a statement, not an omission. Map motion to intensity: element count, drift distance, and speed move together. Below 768px, halve the element count and slow everything down. Run the dev server and verify: (1) git diff shows the new file plus a few lines in the hero component and nothing else, (2) the hero renders identically with the layer removed — no layout shift either way, (3) reduced-motion emulation freezes it, (4) all hero links and buttons still click.
Same task in other tools
Questions about this prompt
How does Cursor know which component is my hero?
The prompt opens with a locate step — searching for the top landing-page section before editing. If your hero lives somewhere unusual, replace that sentence with the actual path; giving the file directly saves a round trip and removes any chance of it patching the wrong component.
What if my repo already animates the hero some other way?
Say so in a preceding line and ask Cursor to either replace the old effect inside this diff or compose beneath it. Two independent background layers fight over contrast and frame budget, so pick one — reviewing the diff before applying is where you catch an accidental double layer.
Does the effect need Tailwind or an animation library?
No — the prompt tells the agent to implement in whatever styling system the repo uses, and all three techniques work with plain CSS or a small canvas. If you already ship framer-motion or GSAP, Cursor may reasonably use it; the transform-only and cleanup rules apply either way.
Part of the Cursor landing-page cluster — start from the main Cursor landing page prompt.