`: a live **stage**, a title + description, and the **prompt** that recreates it. The prompt is the product. ```html

07background

Aurora Blobs

Soft blurred color clouds drift and breathe behind the content.

``` ```css .card{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.13); background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(16,16,28,.62) 22%,rgba(9,9,17,.8) 100%); backdrop-filter:blur(22px) saturate(1.35)} /* iOS frosted glass: light top → dark bottom */ .stage{position:relative;height:188px;display:grid;place-items:center;overflow:hidden;background:transparent} ``` Copy only happens on the **copy button** — a plain tile click drives the *preview* (next section). One line of JS: ```js btn.addEventListener('click', function(){ navigator.clipboard.writeText(btn.querySelector('.prompt-text').textContent.trim()); }); ``` --- ## 6. The signature move: the title becomes the preview The hero title is **editable** (`contenteditable`). Type your own word; it stays. Then clicking any tile re-renders *the title itself* in that effect — the page becomes your sandbox: - **Text effects** → your typed word takes on the animation (scaled up by **font-size**, not `transform`, so it stays crisp). - **Backgrounds** → become a full-page layer over the video (`mix-blend-mode:screen` drops the dark parts so only the glow shows). - **3D / interactive / buttons** → render at native size (so pointer math works) or scale up with a parallax tilt. ```html

MOTION

``` ```js var word = 'MOTION'; title.addEventListener('input', function(){ word = (title.innerText||'').replace(/[ \t]+/g,' ').trim(); }); // clicking a tile routes by category: card.addEventListener('click', function(e){ if (e.target.closest('.prompt')) return; // copy button never previews var cat = card.dataset.cat; if (cat === 'text') applyTextEffect(card, word); else if (cat === 'background') applyFullPageLayer(card); else applyBigPreview(card); // native size or parallax }); ``` **Crispness trick:** scaling text with `transform:scale()` rasterizes and bolds it. Scale by **`font-size`** instead and it renders natively sharp: ```js var fs = parseFloat(getComputedStyle(el).fontSize); el.style.fontSize = Math.round(fs * scaleFactor) + 'px'; // crisp, not blurred ``` --- ## 7. The effect cookbook (the techniques worth stealing) These are the reusable building blocks. Each is a few lines. **Glow over video — screen blend.** Put any bright effect over busy footage and only the light survives: ```css .over-video{mix-blend-mode:screen} /* black → invisible, bright → glows */ ``` **Aurora / drifting blobs.** ```css .aurora .b{position:absolute;border-radius:50%;filter:blur(34px);mix-blend-mode:screen} .aurora .b1{width:210px;height:210px;background:radial-gradient(circle,#66f0ff,transparent 70%);animation:drift 9s var(--ease) infinite alternate} @keyframes drift{to{transform:translate(40px,-30px) scale(1.3)}} ``` **Per-letter stagger** (any length, any word) — set the delay inline so it isn't capped by hardcoded `nth-child` rules: ```js [...word].forEach(function(ch,i){ var s=document.createElement('span'); s.textContent=ch; s.style.animationDelay=(i*0.08)+'s'; // continuous wave across the whole phrase row.appendChild(s); }); ``` **Chromatic glitch** — two offset clones via pseudo-elements (keep it one line; `attr()` can't render returns): ```css .glitch{position:relative} .glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0} .glitch::before{color:#ff7ae0;clip-path:inset(0 0 55% 0);animation:gA 2.6s steps(2) infinite} .glitch::after {color:#66f0ff;clip-path:inset(55% 0 0 0);animation:gB 2.2s steps(2) infinite} ``` **Canvas particles, sized safely** — measure the real box (with a parent fallback) so the buffer never collapses to 1px and stretches into a solid block: ```js function fit(cv){ var r=cv.getBoundingClientRect(), p=cv.parentNode, DPR=Math.min(devicePixelRatio||1,2); var w=r.width||cv.clientWidth||(p&&p.clientWidth)||340; var h=r.height||cv.clientHeight||(p&&p.clientHeight)||188; cv.width=Math.max(2,Math.round(w*DPR)); cv.height=Math.max(2,Math.round(h*DPR)); return cv.getContext('2d'); } ``` **Magnetic / parallax button** — stays put, banks toward the cursor in 3D (smoother than translating it around): ```js zone.addEventListener('pointermove', function(e){ var r=zone.getBoundingClientRect(); var x=(e.clientX-r.left)/r.width-0.5, y=(e.clientY-r.top)/r.height-0.5; btn.style.transform='perspective(820px) rotateY('+(x*28)+'deg) rotateX('+(-y*28)+'deg)'; }); zone.addEventListener('pointerleave', function(){ btn.style.transform=''; }); ``` **Spotlight / flashlight** — feed the cursor into a CSS variable, paint with a radial gradient: ```js el.addEventListener('pointermove', e=>{var r=el.getBoundingClientRect(); el.style.setProperty('--mx', (e.clientX-r.left)+'px'); el.style.setProperty('--my',(e.clientY-r.top)+'px');}); ``` ```css .spot::before{background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(102,240,255,.22),transparent 70%)} ``` --- ## 8. Performance & polish (the details that sell it) - **Lazy-init every demo** with `IntersectionObserver` so off-screen animations cost nothing; stop them when they scroll away. ```js var io=new IntersectionObserver(es=>es.forEach(e=>{ e.isIntersecting ? start(e.target) : stop(e.target); }),{rootMargin:'140px',threshold:.1}); document.querySelectorAll('[data-fx]').forEach(el=>io.observe(el)); ``` - **Return a cleanup function** from each animation (`return ()=>cancelAnimationFrame(raf)`) so previews don't leak. - **Respect `prefers-reduced-motion`**: hide the video, calm the loops. - **A dark "tray"** behind the card grid (`rgba(4,4,10,.8)`, laid over any full-screen animation) keeps the cards readable on busy backgrounds. - **A "present" mode** that hides all chrome and fills the screen with the live preview over the video — perfect for screenshots and screen recordings. - **Cross-frame sync:** the typed word is mirrored between libraries with `postMessage`, so it's one continuous page. --- ## 9. Build your own — paste this into your AI > I want to build a cinematic, single-page "kit" website in plain HTML/CSS/JS (no framework, no build step). Use this blueprint as the reference. My kit is about **\_\_\_\_\_\_** and each tile should be a live demo plus a copy-paste prompt that recreates it. > > Start by generating: (1) the fixed-layout shell with a top switch, (2) one library page with the design tokens, the fixed hero + scrollable grid, and (3) three example demo cards wired to preview in the editable title. Keep everything in one HTML file per page, all CSS in one `