motionsites.ai, decoded

The site itself is animation-light. It is barely coded: no GSAP, no Three.js (code libraries that animate or draw 3D shapes in a browser). The cinematic feel comes from AI-generated videos playing under a calm layer of buttons and text: 13 short video files, all made with Higgsfield. The "3D" look lives in the videos, not in any 3D code.

• One dark canvas. A near-black background, near-white text, one accent colour, rounded pill buttons.
• Video is decoration; the UI floats above it. Full-bleed video behind everything, a dark veil over it so text stays readable, and a fade at the bottom so the video melts into the page instead of ending in a hard edge.
• Every video crossfades in from a still image the moment it is ready, about 300ms, so nothing ever flashes black.
• Motion hierarchy. On load: only the hero shimmers. On scroll: text and blocks fade up as they enter the screen, using the browser's own on-screen watcher (called IntersectionObserver), staggered about 100ms apart; premium templates add scroll-scrubbed video (full method: the NovaAI prompt). On hover: 300ms colour changes, a small arrow nudge. Ambient: a slow 6-second colour drift on one headline word, a very slow scrolling ticker.
• Type does the branding, no downloaded fonts. A plain system font, heavy uppercase headlines, tiny uppercase labels, grey body text: sovereign and fast, without waiting on a font file.
• One glowing word. A soft colour drift animated on a single headline word, done in pure styling code (a newer browser feature, CSS Houdini, lets a colour gradient move smoothly), about 15 lines.
• Edge-faded ticker. A duplicated list scrolling sideways forever, very slowly, fading to transparent at both edges instead of cutting off sharply.

1. The reveal system. One small on-screen watcher plus two styling rules. No libraries, degrades gracefully. The cheapest "this feels made" upgrade there is.
2. The one-word colour drift. Life without motion sickness, usable in an institutional palette too.
3. The crossfade-then-fade-bottom recipe. Discipline that keeps a moving image from ever fighting the text on top of it.
4. Type as the brand, no font download. Weight, spacing and case carry the identity instead of a webfont call.
5. The edge-faded ticker for partner logos: calm but alive. Skip the scroll-scrubbed video for citizen services, it is heavy on a phone and the wrong register for a government page.