# Reference: motionsites.ai, decoded (31-07-2026)

**Source file.** Frank's view: [reference-motionsites-analysis.html](reference-motionsites-analysis.html)

← Motion home: [index.html](index.html)

**What it is.** [motionsites.ai](https://motionsites.ai/) sells copy-paste prompts (500+) that make AI builders (Lovable, Bolt, Cursor, Claude) produce cinematic "motion websites". Their definition: *a website designed to move*, animation, video, transitions, plus "good typography, spacing, structure, and restraint." Catalog routes: websites, apps, sections, backgrounds, gradients, templates, design-md, academy (their [YouTube tutorials](https://www.youtube.com/@motionsites)). Pricing: $149/yr or $239 lifetime (Go), $249/yr or $359 lifetime (Power). The [NovaAI prompt](reference-novaai-prompt.md) we hold is one of their sold templates.

**The big insight.** The site itself is animation-LIGHT: React + Tailwind, no GSAP, no Three.js, framer-motion barely used. The cinematic feel comes from **AI-generated videos playing under a calm UI**: 13 CloudFront mp4s, all `hf_*` files, i.e. made with [Higgsfield](https://higgsfield.ai/). The "3D" look is in the videos, not in 3D code.

## Their design grammar (extracted from the bundle)

- **One dark canvas.** Near-black background (#0a0a0a to #171717), 96% white text, ONE accent (electric blue), radius 1rem, pills for chrome.
- **Video is the decoration layer; UI floats above.** Full-bleed video, `pointer-events-none aria-hidden`, dark scrim `bg-black/30`, and a bottom gradient fade (h-40) that melts the video into the page background. Content wrapper `relative z-10`.
- **Every video:** `autoplay muted playsinline loop preload="metadata"` + a poster image + a 300ms poster→video opacity crossfade gated on `onLoadedData`. Nothing ever flashes black. HLS streams via hls.js.
- **Motion hierarchy.** On load: only the hero shimmer. On scroll: IntersectionObserver reveals (threshold 0.15, `translate-y-8 opacity-0` → visible, 700ms ease-out, ~100ms stagger) and, in premium templates, scroll-scrubbed video (lerp 0.12 + canvas frame cache, full method in [reference-novaai-prompt.md](reference-novaai-prompt.md)). On hover: 300ms color transitions, chevron nudge. Ambient: 6s gradient drift, 240s marquee.
- **Type does the branding without webfonts.** System sans stack, `font-black uppercase tracking-[-0.03em]` headlines, tiny mono uppercase eyebrow labels (10–11px, tracking 0.15em), 67% grey body. Fast and sovereign (no Google Fonts call).
- **Animated gradient on ONE headline word** via CSS Houdini `@property` (registered `--gradient-x/y` percentages animated in keyframes, radial gradient clipped to text, plus a blurred duplicate for glow and a noise overlay). Pure CSS, ~15 lines.
- **Edge-masked infinite marquee.** Duplicated list, `translateX(-50%)`, very slow linear loop, `mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent)`.

## The five ideas worth copying into government-service pages

1. **The reveal system**: one small IntersectionObserver + two CSS classes. Zero libraries, degrades gracefully. The cheapest "this feels made" upgrade.
2. **Houdini gradient on one word**: life without motion sickness, in an institutional palette.
3. **Poster→video crossfade discipline** + the scrim-and-bottom-fade recipe so media never fights text.
4. **Type-as-brand with zero webfonts**: weight/tracking/case contrast instead of font downloads.
5. **Edge-masked marquee for partner logos**: calm but alive. (Skip the scroll-scrubbed canvas for citizen services: heavy, battery-hostile, wrong register.)

Distilled into doctrine: [motion-design.md](motion-design.md).