Live preview · Free prompt / scroll

Ramotion / Framer parallax story

Layered foreground, midground and background motion with sticky chapters, scale reveals and calm reduced-motion fallback.

Layered parallaxSticky chaptersScroll-linked scaleReduced motion

Get the AI prompt

FAR / NEARDiscover

AN ORIGINAL RUKTER SAMPLE 01

Layers of discovery

Layered foreground, midground and background motion with sticky chapters, scale reveals and calm reduced-motion fallback.

RUKTER / PREVIEW01 — 03

Interactive sampleMove the slider to scrub the scene

Progress45%

This original working sample uses local Rukter media. Presets with a hero renderer mount the actual Rukter renderer. Generated sites vary with your content.

Where it works

Use this pattern when

Every generated page should feel like a modern parallax landing page while staying editable in Rukter.

Sample art direction

FAR / NEAR · Layers of discovery

Runtime

DOM / CSS / 2D

How to use it

1Copy the prompt below into Codex or Claude, then add your brand and media.
2For Rukter, open Use in Rukter and check that the preset ID reaches the generator.
3Review and edit the generated draft in Theme Designer, then publish when ready.

Use with AI

Turn this example into a prompt for Codex or Claude

The prompt includes layout, behavior, runtime, accessibility and editable structure. Replace the sample brand and media with your own.

Use in Rukter

Build an original responsive website experience for [your brand or product], using the Rukter "Ramotion / Framer parallax story" pattern as direction.

Visual example: FAR / NEAR — "Layers of discovery"; compose an editorial hero with strong type, one focal image, and a clear call to action. Replace the example content with my own brand copy and supplied media.

Behavior: Layered foreground, midground and background motion with sticky chapters, scale reveals and calm reduced-motion fallback. Best for: Every generated page should feel like a modern parallax landing page while staying editable in Rukter.

Implementation: Use lightweight CSS, DOM, or Canvas 2D for the visual behavior; do not add WebGL unless the design needs it. Keep the result editable as sections, text, media, colors, and timing. Suggested Rukter sections: cinematic, scrollStage, depth, headline. Motion settings: textReveal: words; parallaxDepth: deep; hoverEffect: lift; entranceRhythm: slow; loopMotion: none.

Make the preview usable on touch and keyboard, give controls visible focus, reserve media space to avoid layout shift, and respect prefers-reduced-motion.

When using Rukter Generate my site, preserve this exact selection: Library item ids: scroll-ramotion-framer-parallax.

Rukter preset ID

scroll-ramotion-framer-parallax

Editable implementation

What this preset defines

Sections: cinematic · scrollStage · depth · headline
Hero renderer: DOM / CSS sample
Cinematic effect: depth-dolly-pin
Motion: textReveal: words · parallaxDepth: deep · hoverEffect: lift · entranceRhythm: slow · loopMotion: none