Motion Landing Page

A dark, cinematic product launch page built around generated imagery and a seamless ambient loop

Vibely

Creates your own copy. Free to start.

Designed for

Product and hardware launches
AI and creative-tech brands
Studios selling on craft
Any page that has to look expensive

Key highlights

Full-viewport hero with a seamless ambient video loopChrome subject composited over the wordmark with no cut-out passSix generated assets ship inside the template — no stock, no CDNScroll parallax driven straight onto the node, never through stateEditorial type system: Bodoni Moda, Inter Tight, JetBrains MonoScroll reveals that render visible without JavaScriptComplete reduced-motion path — every animation is safe to dropThree-tier pricing with baseline-aligned calls to actionValidated enquiry form on react-hook-form and zod

About this template

Most landing page templates give you a layout and leave the hard part — the art direction — to you. This one ships the art direction. Six pieces of imagery were generated for it and live inside the template as files, so the page looks finished the moment it opens and keeps looking finished after you fork it.

The hero is the piece worth stealing. A chrome orchid sits in front of the wordmark, occluding the letters the way a real object would, with no transparent PNG and no background-removal step anywhere in the build. Every asset is a luminous form photographed on pure black, and the page composites them with mix-blend-mode: screen — the black falls away, the light stays. Swap the subject and the effect still works.

Underneath the atmosphere it is an ordinary, fast page. No 3D library, no animation framework, nothing beyond what the base already ships. The motion is CSS transitions and one requestAnimationFrame scroll handler.

Best use cases

Launching a product

The default arrangement: a hero that holds the screen, a proof marquee, three capability panels, a metrics band and pricing. Rewrite src/lib/site.ts and the whole page follows.

A studio or agency front page

Point the capability panels at three pieces of work, drop the pricing section, and the manifesto page becomes your about page. The type system carries it.

A waitlist or private beta

The enquiry form already validates and the closing section is already written for gated access. Wire the submit handler to your endpoint and it is live.

A brand or campaign page

The strongest use of the composite: put your product where the orchid is. Anything shot on black drops straight in with no masking.

Getting started

Rewrite the copy first

Everything — brand name, navigation, marquee, stats, capabilities, pricing, manifesto — lives in src/lib/site.ts. No component holds a string of its own.

Change the palette in one place

src/styles.css holds the oklch tokens plus three glow colours registered as real utilities: text-glow-cool, bg-glow-warm, text-glow-violet.

Keep new imagery on black

The composite is the whole design. A subject on white or with an alpha channel will render as a grey box — generate replacements against a pure black seamless background.

Swap the hero subject

One import in src/lib/site.ts. The parallax, blend mode and stacking order are on the element, not the asset, so nothing else moves.

Replace the loop or drop it

src/videos/hero-loop.mp4 is a 10s ping-pong so it has no visible cut. Delete the video element and the vignette and hero type still stand on their own.

Point the form somewhere

src/routes/contact.tsx submits to a toast. Replace it with a fetch to your endpoint and handle the rejected case as well as the happy one.

Retune or remove the motion

Reveal thresholds live in src/components/reveal.tsx, parallax multipliers in the hero effect. The prefers-reduced-motion block in styles.css already forces every reveal visible rather than merely un-animated.

Conclusion

This is a template for the case where the page itself is the pitch. It ships the imagery, the type system and the motion already tuned, so the work left to you is your own words and your own subject.

Features & capabilities

Generated art direction

Five stills and one video loop, rendered for this template and shipped inside it. Nothing is licensed stock and nothing is fetched from a CDN at runtime.

Screen-blend compositing

Every asset is a luminous subject on pure black, so mix-blend-mode: screen drops the plate and keeps the light. A cut-out with no alpha channel and no masking pass.

Seamless ambient loop

The hero video runs forward then reversed, so the wrap has no visible cut. 297KB for ten seconds, muted and playsInline so iOS starts it without a tap.

Editorial type system

Bodoni Moda for display, Inter Tight for text, JetBrains Mono for labels — with a brushed-metal gradient fill on the wordmark that re-themes from the tokens.

Parallax that stays smooth

The scroll handler writes transforms straight onto the nodes inside a requestAnimationFrame. Routing scroll position through React state re-renders the page every frame.

Reveals that survive no-JS

Sections render visible and only arm their animation after mount, so the server-rendered HTML is complete for crawlers and for anyone whose bundle never lands.

A real reduced-motion path

Reveals are forced visible rather than merely un-animated — leaving them at their opacity-zero start state would blank the page for anyone with the preference set.