61
Blurred-backdrop insert
An AI product clip or screenshot centred over a blurred, darkened copy of your own footage
Add the "Blurred-backdrop insert" video component (Clip, light) from everestchris.com to this project.
1. Download https://ai-component-library-dun.vercel.app/projects/blurred-backdrop-insert.zip?v=64cef8f03df9 and unzip it into components/blurred-backdrop-insert/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/blurred-backdrop-insert && npx hyperframes@0.8.162 render . --variables '{"variant":"0","theme":"light"}' -o blurred-backdrop-insert.mp4
3. Give me the path of the MP4. The text, names and timings live in the CONFIG block at the top of the script in index.html; change nothing there unless I ask.Code
One file. The project download adds the fonts, skins and motion kit it runs on.
Open full file1<!doctype html>2<html lang="en" data-composition-variables='[3 {"id":"variant","type":"enum","label":"Variant","default":"0","options":[{"value":"0","label":"Clip: a chatgpt.com screen recording in Chrome"},{"value":"1","label":"Screenshot: a Claude desktop window"},{"value":"2","label":"Vertical video: a Grok iOS screen recording"}]},4 {"id":"theme","type":"enum","label":"Theme","default":"light","options":[{"value":"light","label":"Light"},{"value":"dark","label":"Dark"}]}5]'>6 <head>7 <meta charset="UTF-8" />8 <meta name="viewport" content="width=1920, height=1080" />9 <link rel="stylesheet" href="assets/fonts/fonts.css" />10 <link rel="stylesheet" href="assets/skins/chatgpt/skin.css" />11 <link rel="stylesheet" href="assets/skins/claude/skin.css" />12 <link rel="stylesheet" href="assets/skins/grok/skin.css" />13 <link rel="stylesheet" href="assets/skins/device/skin.css" />14 <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>15 <script src="assets/kit/motion/motion.js"></script>16 <script src="assets/skins/chatgpt/icons.js"></script>17 <script src="assets/skins/claude/icons.js"></script>18 <script src="assets/skins/grok/icons.js"></script>19 <script src="assets/skins/device/icons.js"></script>20 <style>21 html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #0e0e0f; }22 #root {23 position: relative; width: 100%; height: 100%; overflow: hidden; background: #0e0e0f;24 font-family: "Inter", sans-serif;25 /* stage tokens (DESIGN.md); the product tag reads these */26 --ink: #0a0a0a; --ink-2: #5c5c5c; --chip: rgba(255,255,255,.84); --chip-edge: rgba(0,0,0,.06);27 }28 #root.is-dark { --ink: #fafafa; --ink-2: #a1a1a1; --chip: rgba(26,26,28,.80); --chip-edge: rgba(255,255,255,.09); }2930 /* your own footage: one framework-owned, muted A-roll per variant (non-timed wrappers) */31 .fw { position: absolute; inset: 0; display: none; }32 .fw.is-on { display: block; }33 .fw video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }3435 #loopReturn { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none; }36 #stage { position: absolute; inset: 0; }37 #block { position: absolute; left: 0; top: 0; opacity: 0; }3839 /* the hero: the inserted clip / screenshot / vertical video */40 #insert { position: relative; border-radius: var(--r); box-shadow: var(--lift); }41 #shell { position: relative; border-radius: var(--r); overflow: hidden; }42 #edge { position: absolute; inset: 0; border-radius: var(--r); pointer-events: none; box-shadow: inset 0 0 0 1px var(--edge); }43 #root { --lift: 0 1px 2px rgba(0,0,0,.14), 0 4px 10px -2px rgba(0,0,0,.16), 0 44px 100px -28px rgba(0,0,0,.62); --edge: rgba(0,0,0,.08); }44 #root.is-dark { --lift: 0 0 0 1px rgba(255,255,255,.04), 0 3px 10px -2px rgba(0,0,0,.45), 0 44px 100px -28px rgba(0,0,0,.90); --edge: rgba(255,255,255,.10); }4546 /* product tag under the insert (beside it for the vertical clip): a small frosted chip, so it reads on any footage */47 #caption { display: flex; margin-top: 18px; height: 42px; }48 #block.is-side #caption { position: absolute; right: calc(100% + 28px); top: 18px; margin: 0; }