code-anything.com
Log inStart free
Animated

Odyssey

Odyssey is an experimental, film-first template for travel stories, brand narratives and campaign launches that want to feel like a scored short film. Full-bleed "video scenes" — dawn, dusk and night moods built from blue-to-sunset gradients — cross-fade and parallax past the visitor chapter by chapter, separated by sweeping SVG wipes. A slim scroll-progress meridian tracks the journey while an inline SVG route line draws itself across three waypoints. Every scene can be generated on the fly through a "Generate video" control wired to fal.ai via the phi-cloud gateway. No photographs anywhere — every frame is CSS gradients, scanlines, grain and inline SVG, so it stays razor-sharp at any size.

A scored short film you scroll through — full-bleed generated scenes that cross-fade and parallax from dawn to a summit under cold stars, chapter by chapter.

scroll-odyssey.code-anything.app
00°00'00"Prologue

Every scroll isa new horizon.

An immersive scrollytelling microsite where full-bleed generated video scenes cross-fade and parallax past you, chapter by chapter — dawn, dusk, then a summit under cold stars.

Scroll to begin
Depth on scroll

Layers move at their own speed, so the world has distance.

01
N 27.9881°Dawn

The valley wakes in amber

First light spills over the ridgeline. The camera drifts forward as mist burns off the floor — a scene generated frame-by-frame, cross-fading in as you scroll into the chapter.

02
E 86.9250°Dusk

The coast turns violet

The sun folds into the sea and the sky bruises purple-blue. Depth layers slide at different speeds, so the horizon feels miles behind the foreground surf.

03
ALT 8848mNight

The summit under cold stars

Deep blue swallows the frame and the route line completes its draw. The final scene holds still, inviting you to generate your own from a single line of prompt.

ROUTE 01–03Meridian

One line threads the whole journey.

⌘ + GGenerate

Generate your own scene.

Describe a place and a mood. We render a full-bleed clip and drop it straight into the story — regenerate until it feels like the frame in your head.

aerial dawn over a misted valley…Generate video

Powered by fal.ai · phi-cloud

Design rules

The system, applied to any site

  • Lead with full-bleed "video scenes": simulate cinematic footage with layered moving gradients (a drifting radial-gradient sun plus a slow background-position pan) and always lay a subtle scanline + film-grain overlay on top so it reads as a clip, never a flat block.
  • Anchor the palette in a deep-night canvas (#070A12) and reserve the blue→warm-sunset gradient (horizon blue #3AA0FF to sunset #FF8A5B) for the scene moods — dawn (amber), dusk (violet), night (cold blue) — while keeping all chrome and UI dark.
  • Structure the page as numbered chapters, each its own full-bleed scene with a distinct mood, and separate them with sweeping diagonal/curved SVG "wipe" transitions so scrolling feels like scenes changing on a cut.
  • Build depth with parallax: stack 2–3 layers (far ridge, mid hills, near foreground) that drift at different speeds, and cross-fade adjacent scenes with opacity so the world feels like it has real distance.
  • Carry one signature through-line — a slim scroll-progress meridian bar in the nav and an inline SVG horizon/route line that draws itself via stroke-dashoffset across waypoints — plus monospaced coordinate/chapter plates on every eyebrow.
  • Never use photography; compose every frame from CSS gradients, blurred glows, scanlines, grain and inline SVG, and always honor prefers-reduced-motion by disabling the loops.

Ships with

Nav with wordmark + slim scroll-progress meridian barFull-bleed cinematic hero "video scene" with scroll-to-begin cueParallax band with 2–3 drifting depth layersChaptered scrollytelling scenes (dawn / dusk / night) with SVG wipesSelf-drawing SVG horizon / route line"Generate video" CTA (fal.ai · phi-cloud) + footer

Design tokens

Palette

bg
surface
text
muted
accent
accent2
border

Headings

Clash Display

Body

Inter

Radius

18px

Explore palettes

More from the library

AuroraMarketing
Warm ArtisanMarketing
Sharp FadeBooking
CockpitDashboard

Make it yours in minutes.

Start from this template and describe your tweaks — content, sections, colours. The backend and deploy are handled.