Motion (animate the page)

Motion turns a flat, static page into a high-end, alive experience — Awwwards-grade animation. Not plain fade-ins: scroll parallax, rich reveal cascades, magnetic and 3D-tilt hover, animated headlines, count-up stats, smooth inertia scroll. Genesis layers motion on top of your existing page — your content, copy, layout, theme, and colors stay exactly as they are.

How to trigger it

Just describe it — no special syntax needed. Ask for everything, or name exactly what to animate (or avoid):

• “animate the page” — animate the whole page to its fullest tasteful potential
• “make the hero cinematic and cascade the feature cards on scroll”
• “add subtle motion only — parallax background and soft hover, no typewriter”
• “animate the pricing section but don’t touch the contact form”

The agent understands the request from plain words, in English or Russian.

What it adds

Genesis varies the technique per section so it never feels repetitive:

• Hero — a cinematic entrance: headline springs/blurs in word-by-word over a parallax backdrop, with floating accents.
• Scroll parallax — backgrounds and decorative layers drift at a different speed than the foreground, for real depth.
• Reveal cascades — cards, list items, and gallery tiles stagger in as you scroll (clip wipes, blur-to-sharp, scale+rotate — varied per section).
• Animated text — a typewriter or per-letter reveal on a key headline.
• Count-up stats — numbers tick up from zero when they scroll into view.
• Hover micro-interactions — magnetic buttons, 3D-tilt cards, image zoom, glowing underlines.
• Pinned scroll scenes — a sticky section that scrubs through states as you scroll, where it fits.
• Smooth scroll — buttery inertia scrolling across the whole site.

Under the hood it uses framer-motion (built in) and, when an effect needs it, premium libraries (smooth-scroll, GSAP scroll scenes, text-splitting) — added automatically.

What it never touches

• Your text, copy, sections, theme, and colors — it’s layering motion, not redesigning.
• Your site’s functional modules (forms, order forms, integrations) keep working.
• The visual editor keeps working — element targeting is preserved.

Built-in polish

• No flicker. Reveals fire once and stay (the #1 failure of naive scroll animation is re-triggering on every scroll — Genesis avoids it by design) and animations run on the GPU, so text and borders don’t shimmer.
• Accessibility. Visitors with reduce motion turned on get an instant, static page — non-essential motion is skipped automatically.
• Performance. Tasteful timing and staggering instead of firing dozens of heavy animations at once.

Tip

Be directional if you have taste in mind: “cinematic and bold” vs “subtle and professional”, or name the sections to animate and the ones to leave alone. A plain “animate the page” goes for maximum effect.

Note

Motion is page-scoped — it animates the page you’re on (say “the whole site” to extend smooth scroll and reveals across pages). After it runs, refresh the preview if an effect doesn’t appear immediately.