{"version":2,"made":"2026-11-08","about":"The asset library of Limited Edition Jonathan: our own parts; open-source Remotion pieces whose license a file or the author's README states; and packs of video and 3D assets from other open-source projects, each entry with its kind, its job, its license and how to use it. Media addresses are relative to the site's media base. An entry or a pack marked look_only may be learned from and linked to, not copied. A pack entry's source is <pack url>/blob/<pack commit>/<entry path>. \"takes\" says how a piece is re-skinned: props, tokens, or edit the file.","ours":[{"id":"lej-wash","name":"Wash","job":"ground","line":"A background that is never one flat color and never still. Any picture becomes a moving two-tone backdrop with film grain; your titles and numbers sit on it.","file":"parts/Wash.tsx","video":"assets/remotion-library/wash.mp4","poster":"assets/remotion-library/wash.jpg","w":1080,"h":1920,"seconds":4,"use":"import { Wash } from \"./Wash\";\n\n// works inside any composition, at any frame rate (built for 1080 x 1920)\n// cover.jpg is a file in your public/ folder. A full URL works too.\n<Wash image=\"cover.jpg\" words=\"Small agent calls only.\" />\n\n// or put your own scene on it:\n// <Wash image=\"cover.jpg\" tone=\"paper\"><YourTitle /></Wash>","needs":"remotion and react.","takes":{"how":"props","what":["colors","text","pictures"],"line":"Props: image, tone (terra, night, paper), words, eyebrow, sub, plus motion values (focus, zoom, push, drift, grain, scrim) and children for your own scene. Brand colors (11, the LEJ block) and fonts (3, the FONT block) are at the top of Wash.tsx; the three tones are built from them.","read":true}},{"id":"lej-source-pile","name":"Source pile","job":"sources","line":"Pages land as a pile, one every half second, the first on screen inside 0.2 s. An opener for anything with sources.","file":"parts/SourcePile.tsx","video":"assets/remotion-library/source-pile.mp4","poster":"assets/remotion-library/source-pile.jpg","w":1080,"h":1920,"seconds":4,"use":"import { SourcePile } from \"./SourcePile\";\n\n// works inside any composition, at any frame rate (built for 1080 x 1920)\n// page-1.jpg and page-2.jpg are files in your public/ folder\n<SourcePile\n  words=\"Where this comes from\"\n  pages={[\n    { image: \"page-1.jpg\", label: \"The announcement\" },\n    { image: \"page-2.jpg\", label: \"The benchmark table\" },\n  ]}\n/>","needs":"remotion, react, and Wash.tsx beside it.","takes":{"how":"props","what":["colors","text","pictures"],"line":"Props: pages[] (the page pictures), words, eyebrow, tone (paper, terra, night), ground (a picture behind), first, every, count. Colors and fonts come from the LEJ and FONT blocks at the top of Wash.tsx.","read":true}},{"id":"lej-terminal","name":"Terminal","job":"code","line":"A terminal that types. Commands go in letter by letter, output arrives line by line, the window scrolls when it is full.","file":"parts/Terminal.tsx","video":"assets/remotion-library/terminal.mp4","poster":"assets/remotion-library/terminal.jpg","w":1080,"h":1920,"seconds":8,"use":"import { Terminal } from \"./Terminal\";\n\n// works inside any composition, at any frame rate (built for 1080 x 1920)\n<Terminal\n  title=\"~/agent\"\n  caption=\"One switch sets it.\"\n  lines={[\n    { kind: \"cmd\", text: \"export COST_TIER=low\" },\n    { kind: \"ok\", text: \"cost_tier set to low\" },\n  ]}\n/>","needs":"remotion, react, and Wash.tsx beside it.","takes":{"how":"props","what":["colors","text","pictures"],"line":"Props: lines[] (commands and output), title, prompt, caption, tone, ground (a picture behind), cps, size. Colors and fonts come from the LEJ and FONT blocks at the top of Wash.tsx; five terminal text colors are one INK object at the top of Terminal.tsx.","read":true}}],"picks":[{"id":"r0978","line":"A serif title types itself onto a cream page. A calm opener.","kit":"ncoulthurst/video-engine-remotion"},{"id":"r0980","line":"Two sides compared bar by bar. A head-to-head that draws itself.","kit":"ncoulthurst/video-engine-remotion"},{"id":"r0983","line":"A line chart that draws itself across a season.","kit":"ncoulthurst/video-engine-remotion"},{"id":"r0171","line":"A terminal types a command and shows what came back. Made for a README, good anywhere.","kit":"ofershap/remotion-readme-kit"},{"id":"r0034","line":"A slow push on a still picture. 54 lines, one file.","kit":"reactvideoeditor/remotion-templates"},{"id":"r0053","line":"A still that drifts sideways with depth. One file.","kit":"reactvideoeditor/remotion-templates"},{"id":"r0064","line":"One picture pushes the next off screen. One file.","kit":"reactvideoeditor/remotion-templates"},{"id":"r0033","line":"A circle opens onto the next picture. One file.","kit":"reactvideoeditor/remotion-templates"},{"id":"r0031","line":"One picture wipes into another behind a handle: before and after.","kit":"reactvideoeditor/remotion-templates"},{"id":"r0075","line":"Words light up one by one. One file.","kit":"reactvideoeditor/remotion-templates"},{"id":"r0073","line":"A number that counts up. One file.","kit":"reactvideoeditor/remotion-templates"},{"id":"r0047","line":"A name bar that slides in. One file.","kit":"reactvideoeditor/remotion-templates"},{"id":"r0021","line":"A thanks-for-watching card with buttons. One file.","kit":"reactvideoeditor/remotion-templates"},{"id":"r0001","line":"Points arrive one by one. One file.","kit":"reactvideoeditor/remotion-templates"},{"id":"r0543","line":"Before and after, side by side, from a starter that renders wide, tall and square.","kit":"kojjob/motion-starter"},{"id":"r0177","line":"Captions that light each word as it is spoken. A library with four styles.","kit":"neutral-Stage/remotion-captioneer"},{"id":"r0187","line":"A page shown inside a laptop on a desk. Built on Remotion 3: borrow the layout and rewrite it for 4.","kit":"Just-Moh-it/Mockoops"},{"id":"r0831","line":"One word slams in inside the first fifth of a second.","kit":"bsewell/kinetic-titles"},{"id":"r0708","line":"What a tool actually does, in three steps. A clean product explainer.","kit":"twerpygeek/ExtractMint"},{"id":"r0458","line":"A soft gradient that keeps moving. Something to put behind a title.","kit":"clawnify/open-video"}],"kits":[{"name":"ncoulthurst/video-engine-remotion","url":"https://github.com/ncoulthurst/video-engine-remotion","licence":{"name":"MIT","basis":"licence file"},"line":"A documentary kit in paper, serif type and one accent color: chapter words, ranked rows, charts that draw themselves, framed clips. Its own rule: no still cards, ever.","hand_written":true,"shelf":"news","jobs":["number","scene","title","code"],"needs":{"remotion":"4.0.435","packages":["d3","framer-motion","lottie-react","remotion"]},"pieces":[{"id":"r0978","name":"Hero Intro","job":"title","video":"assets/remotion-catalog/978-ncoulthurst__video-engine-remotion-HeroIntro.mp4","poster":"assets/remotion-library/poster-r0978.jpg","w":1920,"h":1080,"seconds":8.04,"use":"git clone https://github.com/ncoulthurst/video-engine-remotion\ncd video-engine-remotion\nnpm install\nnpx remotion render src/index.ts HeroIntro out.mp4","takes":{"how":"props","what":["colors","text","pictures"],"line":"Props (zod schema): subtitle, bgColor, sideImage, sideImageX, sideImageY, sideImageScale. The big title is the constant CHANNEL_NAME at the top of HeroIntro.tsx. Fonts (Inter, Playfair Display) and the paper palette come from src/shared.tsx.","read":true}},{"id":"r0979","name":"Hero Outro","job":"end card","video":"assets/remotion-catalog/979-ncoulthurst__video-engine-remotion-HeroOutro.mp4","poster":"assets/remotion-catalog/979-ncoulthurst__video-engine-remotion-HeroOutro.jpg","w":1920,"h":1080,"seconds":8.04,"use":"git clone https://github.com/ncoulthurst/video-engine-remotion\ncd video-engine-remotion\nnpm install\nnpx remotion render src/index.ts HeroOutro out.mp4","takes":{"how":"props","what":["colors","text","pictures"],"line":"Props (zod schema): leadIn, subscribeAsk, videoLeftTitle, videoRightTitle, videoLeftSrc, videoRightSrc, videoLeftImage, videoRightImage, bgColor, accentColor. The channel name is the constant CHANNEL_NAME at the top of HeroOutro.tsx. Fonts come from src/shared.tsx.","read":true}},{"id":"r0980","name":"Hero Stat Bars","job":"number","video":"assets/remotion-catalog/980-ncoulthurst__video-engine-remotion-HeroStatBars.mp4","poster":"assets/remotion-library/poster-r0980.jpg","w":1920,"h":1080,"seconds":9.05,"use":"git clone https://github.com/ncoulthurst/video-engine-remotion\ncd video-engine-remotion\nnpm install\nnpx remotion render src/index.ts HeroStatBars out.mp4","takes":{"how":"props","what":["colors","text","pictures","numbers"],"line":"Props (zod schema): title, subtitle, sideImage, teamA {name, color}, teamB {name, color}, stats[] {label, valueA, valueB, maxValue, suffix}, bgColor. Fonts and the muted grays come from src/shared.tsx (COLORS, about 20 values).","read":true}},{"id":"r0981","name":"Hero Form Run","job":"scene","video":"assets/remotion-catalog/981-ncoulthurst__video-engine-remotion-HeroFormRun.mp4","poster":"assets/remotion-catalog/981-ncoulthurst__video-engine-remotion-HeroFormRun.jpg","w":1920,"h":1080,"seconds":9.05,"use":"git clone https://github.com/ncoulthurst/video-engine-remotion\ncd video-engine-remotion\nnpm install\nnpx remotion render src/index.ts HeroFormRun out.mp4","takes":{"how":"props","what":["colors","text","pictures","numbers"],"line":"Props (zod schema): teamName, teamColor, label, sideImage, results, bgColor, darkMode. Fonts come from src/shared.tsx.","read":false}},{"id":"r0982","name":"Hero Tactical","job":"scene","video":"assets/remotion-catalog/982-ncoulthurst__video-engine-remotion-HeroTactical.mp4","poster":"assets/remotion-catalog/982-ncoulthurst__video-engine-remotion-HeroTactical.jpg","w":1920,"h":1080,"seconds":14.06,"use":"git clone https://github.com/ncoulthurst/video-engine-remotion\ncd video-engine-remotion\nnpm install\nnpx remotion render src/index.ts HeroTactical out.mp4","takes":{"how":"props","what":["colors","text","numbers"],"line":"Props (zod schema): title, description, players, oppositionPlayers, arrows, teamColor, oppositionColor, accentColor, textColor, bgColor. Fonts come from src/shared.tsx.","read":false}},{"id":"r0983","name":"Hero League Graph","job":"number","video":"assets/remotion-catalog/983-ncoulthurst__video-engine-remotion-HeroLeagueGraph.mp4","poster":"assets/remotion-library/poster-r0983.jpg","w":1920,"h":1080,"seconds":10.05,"use":"git clone https://github.com/ncoulthurst/video-engine-remotion\ncd video-engine-remotion\nnpm install\nnpx remotion render src/index.ts HeroLeagueGraph out.mp4","takes":{"how":"props","what":["colors","text","pictures","numbers"],"line":"Props (zod schema): season, title, competition, source, teamA and teamB {name, color, data[], badgeSlug}, maxPosition, bgColor, accentColor, entityImage. Fonts and grays come from src/shared.tsx.","read":true}},{"id":"r0986","name":"Hero Clip Compare","job":"code","video":"assets/remotion-catalog/986-ncoulthurst__video-engine-remotion-HeroClipCompare.mp4","poster":"assets/remotion-catalog/986-ncoulthurst__video-engine-remotion-HeroClipCompare.jpg","w":1920,"h":1080,"seconds":7.06,"use":"git clone https://github.com/ncoulthurst/video-engine-remotion\ncd video-engine-remotion\nnpm install\nnpx remotion render src/index.ts HeroClipCompare out.mp4","takes":{"how":"props","what":["colors","text","pictures"],"line":"Props (zod schema): labelLeft, labelRight, clipLeft, clipRight, title, bgColor. Fonts come from src/shared.tsx.","read":false}},{"id":"r0987","name":"Hero Clip Single","job":"code","video":"assets/remotion-catalog/987-ncoulthurst__video-engine-remotion-HeroClipSingle.mp4","poster":"assets/remotion-catalog/987-ncoulthurst__video-engine-remotion-HeroClipSingle.jpg","w":1920,"h":1080,"seconds":9.05,"use":"git clone https://github.com/ncoulthurst/video-engine-remotion\ncd video-engine-remotion\nnpm install\nnpx remotion render src/index.ts HeroClipSingle out.mp4","takes":{"how":"props","what":["colors","text","pictures"],"line":"Props (zod schema): label, clip, title, bgColor, trimIn, trimOut, soundOn. Fonts come from src/shared.tsx.","read":false}},{"id":"r0988","name":"Attacking Radar","job":"number","video":"assets/remotion-catalog/988-ncoulthurst__video-engine-remotion-AttackingRadar.mp4","poster":"assets/remotion-catalog/988-ncoulthurst__video-engine-remotion-AttackingRadar.jpg","w":1920,"h":1080,"seconds":18.05,"use":"git clone https://github.com/ncoulthurst/video-engine-remotion\ncd video-engine-remotion\nnpm install\nnpx remotion render src/index.ts AttackingRadar out.mp4","takes":{"how":"props","what":["colors","text","pictures","numbers"],"line":"Props (zod schema): entityName, competition, season, matchType, nineties, accentColor, bgColor, sideImage, lightMode, metrics[] {label, value, percentile, unit}. Font comes from src/shared.tsx.","read":true}}]},{"name":"Just-Moh-it/Mockoops","url":"https://github.com/Just-Moh-it/Mockoops","licence":{"name":"MIT","basis":"licence file"},"line":"Put a page inside a laptop on a desk, or in a tilted window over a moving backdrop. Built on Remotion 3, so borrow the layout and rewrite it for 4.","hand_written":true,"shelf":"news","jobs":["frame","scene"],"needs":{"remotion":"^3.0.22","packages":["eslint-config-next","framer-motion","next","next-pwa","next-themes","react-lottie-player","remotion"]},"pieces":[{"id":"r0175","name":"Starred","job":"frame","video":"assets/remotion-catalog/175-Just-Moh-it__Mockoops-candidate-mockoops-starred.mp4","poster":"assets/remotion-catalog/175-Just-Moh-it__Mockoops-candidate-mockoops-starred.jpg","w":1080,"h":1080,"seconds":3.05,"use":"# see the source for how to run it\nhttps://github.com/Just-Moh-it/Mockoops"},{"id":"r0187","name":"Laptop","job":"frame","video":"assets/remotion-catalog/187-Just-Moh-it__Mockoops-laptop.mp4","poster":"assets/remotion-library/poster-r0187.jpg","w":1516,"h":800,"seconds":10.05,"use":"git clone https://github.com/Just-Moh-it/Mockoops\ncd Mockoops\nnpm install\nnpx remotion render src/animations/index.js laptop out.mp4","takes":{"how":"props","what":["pictures"],"line":"Props: video, audio, bgVideo. It is a device frame; what it shows is the video you pass.","read":true}},{"id":"r0188","name":"Star emoji","job":"scene","video":"assets/remotion-catalog/188-Just-Moh-it__Mockoops-star-emoji.mp4","poster":"assets/remotion-catalog/188-Just-Moh-it__Mockoops-star-emoji.jpg","w":1080,"h":1080,"seconds":10.05,"use":"git clone https://github.com/Just-Moh-it/Mockoops\ncd Mockoops\nnpm install\nnpx remotion render src/animations/stars/index.js star-emoji out.mp4","takes":{"how":"edit the file","what":["colors"],"line":"No inputs. The emoji is an SVG drawn in StarEmoji.js with about 15 fill colors written in it.","read":true}}]},{"name":"kojjob/motion-starter","url":"https://github.com/kojjob/motion-starter","licence":{"name":"MIT","basis":"licence file"},"line":"A starter that renders every piece wide, tall and square from one theme file: comparison, stat reveal, title card, recap.","hand_written":true,"shelf":"news","jobs":["chart","number","compare","title"],"needs":{"remotion":"^4.0.0","packages":["remotion","vitest","zod"]},"pieces":[{"id":"r0541","name":"Recap horizontal","job":"chart","video":"assets/remotion-catalog/541-kojjob__motion-starter-Recap-horizontal.mp4","poster":"assets/remotion-catalog/541-kojjob__motion-starter-Recap-horizontal.jpg","w":1920,"h":1080,"seconds":21.46,"use":"git clone https://github.com/kojjob/motion-starter\ncd motion-starter\nnpm install\nnpx remotion render src/index.ts Recap-horizontal out.mp4","takes":{"how":"props","what":["colors","type","text","numbers"],"line":"Words and items are props (zod schema RecapDataSchema: subtitle, title, items[] {label, headline, detail, stat}). Colors (9), fonts (3), brand name, tagline and call-to-action all come from one file, branding.json, read by src/theme.ts; no hex in the piece.","read":true}},{"id":"r0542","name":"Stat Reveal horizontal","job":"number","video":"assets/remotion-catalog/542-kojjob__motion-starter-StatReveal-horizontal.mp4","poster":"assets/remotion-catalog/542-kojjob__motion-starter-StatReveal-horizontal.jpg","w":1920,"h":1080,"seconds":12.05,"use":"git clone https://github.com/kojjob/motion-starter\ncd motion-starter\nnpm install\nnpx remotion render src/index.ts StatReveal-horizontal out.mp4","takes":{"how":"props","what":["colors","type","text","numbers"],"line":"Words and the number are props (zod schema StatRevealDataSchema: hook, stat {value, before, after, prefix, suffix, decimals}, context). Colors (9), fonts (3), brand name and call-to-action come from branding.json via src/theme.ts; no hex in the piece.","read":true}},{"id":"r0543","name":"Comparison horizontal","job":"compare","video":"assets/remotion-catalog/543-kojjob__motion-starter-Comparison-horizontal.mp4","poster":"assets/remotion-library/poster-r0543.jpg","w":1920,"h":1080,"seconds":15.06,"use":"git clone https://github.com/kojjob/motion-starter\ncd motion-starter\nnpm install\nnpx remotion render src/index.ts Comparison-horizontal out.mp4","takes":{"how":"props","what":["colors","type","text"],"line":"Words are props (zod schema ComparisonDataSchema: title, two sides {label, description}, conclusion). Colors (9), fonts (3), brand name and call-to-action come from branding.json via src/theme.ts.","read":true}},{"id":"r0544","name":"Title Card horizontal","job":"title","video":"assets/remotion-catalog/544-kojjob__motion-starter-TitleCard-horizontal.mp4","poster":"assets/remotion-catalog/544-kojjob__motion-starter-TitleCard-horizontal.jpg","w":1920,"h":1080,"seconds":8.04,"use":"git clone https://github.com/kojjob/motion-starter\ncd motion-starter\nnpm install\nnpx remotion render src/index.ts TitleCard-horizontal out.mp4","takes":{"how":"props","what":["colors","type","text"],"line":"Words are props (zod schema TitleCardDataSchema: eyebrow, title, attribution). Colors (9) and fonts (3) come from branding.json via src/theme.ts; no hex in the piece.","read":true}}]},{"name":"reactvideoeditor/remotion-templates","url":"https://github.com/reactvideoeditor/remotion-templates","licence":{"name":"MIT","basis":"README"},"line":"One-file templates: transitions, charts, titles, lower thirds, backgrounds. Each needs only Remotion. Copy one file and go.","hand_written":true,"shelf":"crew","jobs":["title","ground","number","transition"],"needs":{"remotion":"4.0.462","packages":[]},"pieces":[{"id":"r0001","name":"Animated list","job":"title","video":"assets/remotion-catalog/001-https-github-com-reactvideoeditor-remotion-templates-rve-animated-list.mp4","poster":"assets/remotion-library/poster-r0001.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/animated-list.tsx","line":"Points arriving one by one.","takes":{"how":"edit the file","what":["colors","text"],"line":"No inputs: 3 hex colors written in the JSX; labels are a list at the top of the component (items).","read":true}},{"id":"r0002","name":"Animated text","job":"title","video":"assets/remotion-catalog/002-https-github-com-reactvideoeditor-remotion-templates-rve-animated-text.mp4","poster":"assets/remotion-catalog/002-https-github-com-reactvideoeditor-remotion-templates-rve-animated-text.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/animated-text.tsx","line":"A title that writes on.","takes":{"how":"edit the file","what":["text"],"line":"No inputs: the words are one constant at the top of the component (\"Hello Remotion\").","read":true}},{"id":"r0003","name":"Area chart","job":"number","video":"assets/remotion-catalog/003-https-github-com-reactvideoeditor-remotion-templates-rve-area-chart.mp4","poster":"assets/remotion-catalog/003-https-github-com-reactvideoeditor-remotion-templates-rve-area-chart.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/area-chart.tsx","line":"An area that fills.","takes":{"how":"edit the file","what":["colors","type","text","numbers"],"line":"No inputs: 3 hex colors written in the JSX; the words are typed into the JSX (\"Performance Metrics\"); labels and values are a list at the top of the component (data); font set inline (Inter).","read":true}},{"id":"r0004","name":"Blinds transition","job":"transition","video":"assets/remotion-catalog/004-https-github-com-reactvideoeditor-remotion-templates-rve-blinds-transition.mp4","poster":"assets/remotion-catalog/004-https-github-com-reactvideoeditor-remotion-templates-rve-blinds-transition.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/blinds-transition.tsx","line":"Blinds between pictures.","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No inputs: 9 hex colors written in the JSX; the words are typed into the JSX (\"Scene B\", \"Behind the blinds\", \"Scene A\"); font set inline (Inter). Both scenes are placeholders written in the file; your own scenes go in their place.","read":true}},{"id":"r0005","name":"Bokeh circles","job":"ground","video":"assets/remotion-catalog/005-https-github-com-reactvideoeditor-remotion-templates-rve-bokeh-circles.mp4","poster":"assets/remotion-catalog/005-https-github-com-reactvideoeditor-remotion-templates-rve-bokeh-circles.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/bokeh-circles.tsx","line":"Soft drifting lights.","takes":{"how":"edit the file","what":["colors"],"line":"No inputs: 1 hex color written in the JSX.","read":true}},{"id":"r0006","name":"Bounce text","job":"title","video":"assets/remotion-catalog/006-https-github-com-reactvideoeditor-remotion-templates-rve-bounce-text.mp4","poster":"assets/remotion-catalog/006-https-github-com-reactvideoeditor-remotion-templates-rve-bounce-text.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/bounce-text.tsx","line":"A title that bounces.","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No inputs: 2 hex colors written in the JSX; the words are typed into the JSX (\"Start Building\", \"Theres never been a better time\"); font set inline (Inter).","read":true}},{"id":"r0007","name":"Bubble pop text","job":"title","video":"assets/remotion-catalog/007-https-github-com-reactvideoeditor-remotion-templates-rve-bubble-pop-text.mp4","poster":"assets/remotion-catalog/007-https-github-com-reactvideoeditor-remotion-templates-rve-bubble-pop-text.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/bubble-pop-text.tsx","line":"Letters in bubbles.","takes":{"how":"edit the file","what":["colors","text"],"line":"No inputs: 2 hex colors written in the JSX; the words are one constant at the top of the component (\"HELLO\").","read":true}},{"id":"r0008","name":"Camera shake","job":"ground","video":"assets/remotion-catalog/008-https-github-com-reactvideoeditor-remotion-templates-rve-camera-shake.mp4","poster":"assets/remotion-catalog/008-https-github-com-reactvideoeditor-remotion-templates-rve-camera-shake.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/camera-shake.tsx","line":"A jolt on impact.","takes":{"how":"edit the file","what":["colors","text"],"line":"No inputs: 6 hex colors written in the JSX; the words are typed into the JSX (\"IMPACT\", \"Camera shake with decaying amplitude\").","read":true}},{"id":"r0009","name":"Card flip","job":"scene","video":"assets/remotion-catalog/009-https-github-com-reactvideoeditor-remotion-templates-rve-card-flip.mp4","poster":"assets/remotion-catalog/009-https-github-com-reactvideoeditor-remotion-templates-rve-card-flip.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/card-flip.tsx","line":"A card that turns over.","takes":{"how":"edit the file","what":["colors","text"],"line":"No inputs: 2 hex colors written in the JSX; the words are typed into the JSX (\"Remotion 👋\", \"Back\").","read":true}},{"id":"r0010","name":"Chapter title","job":"title","video":"assets/remotion-catalog/010-https-github-com-reactvideoeditor-remotion-templates-rve-chapter-title.mp4","poster":"assets/remotion-catalog/010-https-github-com-reactvideoeditor-remotion-templates-rve-chapter-title.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/chapter-title.tsx","line":"A numbered chapter card.","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No inputs: 4 hex colors written in the JSX; the words are typed into the JSX (\"Chapter\", \"The Beginning\"); font set inline (Inter).","read":true}},{"id":"r0011","name":"Chart animation","job":"number","video":"assets/remotion-catalog/011-https-github-com-reactvideoeditor-remotion-templates-rve-chart-animation.mp4","poster":"assets/remotion-catalog/011-https-github-com-reactvideoeditor-remotion-templates-rve-chart-animation.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/chart-animation.tsx","line":"Bars grow in.","takes":{"how":"edit the file","what":["colors","type","text","numbers"],"line":"No inputs: 12 hex colors written in the JSX; the words are typed into the JSX (\"Monthly Performance\", \"Data visualization for 2023\"); labels and values are a list at the top of the component (data, colors); font set inline (Inter).","read":true}},{"id":"r0012","name":"Cinematic title intro","job":"title","video":"assets/remotion-catalog/012-https-github-com-reactvideoeditor-remotion-templates-rve-cinematic-title-intro.mp4","poster":"assets/remotion-catalog/012-https-github-com-reactvideoeditor-remotion-templates-rve-cinematic-title-intro.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/cinematic-title-intro.tsx","line":"A film-style title.","takes":{"how":"edit the file","what":["colors","text"],"line":"No inputs: 4 hex colors written in the JSX; the words are typed into the JSX (\"Your Story Begins\", \"A Cinematic Experience\").","read":true}},{"id":"r0013","name":"Circular progress","job":"number","video":"assets/remotion-catalog/013-https-github-com-reactvideoeditor-remotion-templates-rve-circular-progress.mp4","poster":"assets/remotion-catalog/013-https-github-com-reactvideoeditor-remotion-templates-rve-circular-progress.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/circular-progress.tsx","line":"A ring counter.","takes":{"how":"edit the file","what":["colors","numbers"],"line":"No inputs: 2 hex colors written in the JSX; the figures are written in the component.","read":true}},{"id":"r0014","name":"Clock wipe","job":"transition","video":"assets/remotion-catalog/014-https-github-com-reactvideoeditor-remotion-templates-rve-clock-wipe.mp4","poster":"assets/remotion-catalog/014-https-github-com-reactvideoeditor-remotion-templates-rve-clock-wipe.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/clock-wipe.tsx","line":"A clock-hand wipe.","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No inputs: 9 hex colors written in the JSX; the words are typed into the JSX (\"Scene B\", \"Revealed by clock wipe\", \"Scene A\"); font set inline (Inter). Both scenes are placeholders written in the file; your own scenes go in their place.","read":true}},{"id":"r0015","name":"Comparison chart","job":"number","video":"assets/remotion-catalog/015-https-github-com-reactvideoeditor-remotion-templates-rve-comparison-chart.mp4","poster":"assets/remotion-catalog/015-https-github-com-reactvideoeditor-remotion-templates-rve-comparison-chart.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/comparison-chart.tsx","line":"Two bars, before and after.","takes":{"how":"edit the file","what":["colors","type","text","numbers"],"line":"No inputs: 4 hex colors written in the JSX; the words are typed into the JSX (\"Performance Comparison\", \"Before\", \"After\"); the figures are written in the component; font set inline (Inter).","read":true}},{"id":"r0016","name":"Countdown intro","job":"title","video":"assets/remotion-catalog/016-https-github-com-reactvideoeditor-remotion-templates-rve-countdown-intro.mp4","poster":"assets/remotion-catalog/016-https-github-com-reactvideoeditor-remotion-templates-rve-countdown-intro.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/countdown-intro.tsx","line":"A 3-2-1 opener.","takes":{"how":"edit the file","what":["colors","type","text","numbers"],"line":"No inputs: 3 hex colors written in the JSX; the words are typed into the JSX (\"GO!\"); font set inline (Inter).","read":true}},{"id":"r0017","name":"Countdown timer","job":"scene","video":"assets/remotion-catalog/017-https-github-com-reactvideoeditor-remotion-templates-rve-countdown-timer.mp4","poster":"assets/remotion-catalog/017-https-github-com-reactvideoeditor-remotion-templates-rve-countdown-timer.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/countdown-timer.tsx","line":"A running timer.","takes":{"how":"edit the file","what":["colors","type","text","numbers"],"line":"No inputs: 3 hex colors written in the JSX; labels and values are a list at the top of the component (numbers); font set inline (Inter).","read":true}},{"id":"r0019","name":"Cross dissolve","job":"transition","video":"assets/remotion-catalog/019-https-github-com-reactvideoeditor-remotion-templates-rve-cross-dissolve.mp4","poster":"assets/remotion-catalog/019-https-github-com-reactvideoeditor-remotion-templates-rve-cross-dissolve.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/cross-dissolve.tsx","line":"A soft change between pictures.","takes":{"how":"edit the file","what":["colors","text"],"line":"No inputs: 7 hex colors written in the JSX; the words are typed into the JSX (\"Scene A\", \"Dissolving away...\", \"Scene B\"). Both scenes are placeholders written in the file; your own scenes go in their place.","read":true}},{"id":"r0020","name":"Donut chart","job":"number","video":"assets/remotion-catalog/020-https-github-com-reactvideoeditor-remotion-templates-rve-donut-chart.mp4","poster":"assets/remotion-catalog/020-https-github-com-reactvideoeditor-remotion-templates-rve-donut-chart.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/donut-chart.tsx","line":"A ring that fills.","takes":{"how":"edit the file","what":["colors","type","text","numbers"],"line":"No inputs: 6 hex colors written in the JSX; the words are typed into the JSX (\"Completion Rate\"); labels and values are a list at the top of the component (segments); font set inline (Inter).","read":true}},{"id":"r0021","name":"End card","job":"end card","video":"assets/remotion-catalog/021-https-github-com-reactvideoeditor-remotion-templates-rve-end-card.mp4","poster":"assets/remotion-library/poster-r0021.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/end-card.tsx","line":"A thanks-for-watching card with buttons.","takes":{"how":"edit the file","what":["colors","text"],"line":"No inputs: 6 hex colors written in the JSX; the words are typed into the JSX (\"Thanks for Watching\", \"Subscribe for More\", \"STUDIO CREATIVE\"). Social buttons are four colored circles from a list at the top.","read":true}},{"id":"r0022","name":"Fade through black","job":"transition","video":"assets/remotion-catalog/022-https-github-com-reactvideoeditor-remotion-templates-rve-fade-through-black.mp4","poster":"assets/remotion-catalog/022-https-github-com-reactvideoeditor-remotion-templates-rve-fade-through-black.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/fade-through-black.tsx","line":"A dip to black.","takes":{"how":"edit the file","what":["colors","text"],"line":"No inputs: 8 hex colors written in the JSX; the words are typed into the JSX (\"Scene 1\", \"Fading out...\", \"Scene 2\"). Both scenes are placeholders written in the file; your own scenes go in their place.","read":true}},{"id":"r0023","name":"Film burn","job":"ground","video":"assets/remotion-catalog/023-https-github-com-reactvideoeditor-remotion-templates-rve-film-burn.mp4","poster":"assets/remotion-catalog/023-https-github-com-reactvideoeditor-remotion-templates-rve-film-burn.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/film-burn.tsx","line":"A warm light leak over a picture.","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No inputs: 2 hex colors written in the JSX; the words are typed into the JSX (\"Film Burn Effect\", \"Light leak overlay\"); font set inline (Inter).","read":true}},{"id":"r0024","name":"Floating bubble text","job":"title","video":"assets/remotion-catalog/024-https-github-com-reactvideoeditor-remotion-templates-rve-floating-bubble-text.mp4","poster":"assets/remotion-catalog/024-https-github-com-reactvideoeditor-remotion-templates-rve-floating-bubble-text.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/floating-bubble-text.tsx","line":"A floating label.","takes":{"how":"edit the file","what":["colors","text"],"line":"No inputs: 2 hex colors written in the JSX; the words are typed into the JSX (\"Floating\").","read":true}},{"id":"r0025","name":"Gallery grid","job":"layout","video":"assets/remotion-catalog/025-https-github-com-reactvideoeditor-remotion-templates-rve-gallery-grid.mp4","poster":"assets/remotion-catalog/025-https-github-com-reactvideoeditor-remotion-templates-rve-gallery-grid.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/gallery-grid.tsx","line":"Pictures fill a grid.","takes":{"how":"edit the file","what":["colors"],"line":"No inputs: 7 hex colors written in the JSX. The pictures are gradient blocks standing in for images: there is no image slot.","read":true}},{"id":"r0026","name":"Geometric patterns","job":"number","video":"assets/remotion-catalog/026-https-github-com-reactvideoeditor-remotion-templates-rve-geometric-patterns.mp4","poster":"assets/remotion-catalog/026-https-github-com-reactvideoeditor-remotion-templates-rve-geometric-patterns.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/geometric-patterns.tsx","line":"Slow line patterns as a backdrop.","takes":{"how":"edit the file","what":["colors"],"line":"No inputs: 2 hex colors written in the JSX.","read":true}},{"id":"r0027","name":"Glitch text","job":"title","video":"assets/remotion-catalog/027-https-github-com-reactvideoeditor-remotion-templates-rve-glitch-text.mp4","poster":"assets/remotion-catalog/027-https-github-com-reactvideoeditor-remotion-templates-rve-glitch-text.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/glitch-text.tsx","line":"A glitch title.","takes":{"how":"edit the file","what":["type","text"],"line":"No inputs: the words are typed into the JSX (\"GLITCH\"); font set inline (monospace).","read":true}},{"id":"r0028","name":"Gradient shift","job":"ground","video":"assets/remotion-catalog/028-https-github-com-reactvideoeditor-remotion-templates-rve-gradient-shift.mp4","poster":"assets/remotion-catalog/028-https-github-com-reactvideoeditor-remotion-templates-rve-gradient-shift.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/gradient-shift.tsx","line":"A slow moving two-color backdrop.","takes":{"how":"edit the file","what":["colors"],"line":"No inputs: 3 hex colors written in the JSX; the colors are a short list at the top of the component.","read":true}},{"id":"r0029","name":"Grid pulse","job":"ground","video":"assets/remotion-catalog/029-https-github-com-reactvideoeditor-remotion-templates-rve-grid-pulse.mp4","poster":"assets/remotion-catalog/029-https-github-com-reactvideoeditor-remotion-templates-rve-grid-pulse.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/grid-pulse.tsx","line":"A dotted grid that breathes.","takes":{"how":"edit the file","what":["colors"],"line":"No inputs: 2 hex colors written in the JSX.","read":true}},{"id":"r0030","name":"Image carousel","job":"layout","video":"assets/remotion-catalog/030-https-github-com-reactvideoeditor-remotion-templates-rve-image-carousel.mp4","poster":"assets/remotion-catalog/030-https-github-com-reactvideoeditor-remotion-templates-rve-image-carousel.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/image-carousel.tsx","line":"Pictures slide past.","takes":{"how":"edit the file","what":["colors","type"],"line":"No inputs: 7 hex colors written in the JSX; font set inline (Inter). The pictures are gradient blocks standing in for images: there is no image slot.","read":true}},{"id":"r0031","name":"Image comparison slider","job":"compare","video":"assets/remotion-catalog/031-https-github-com-reactvideoeditor-remotion-templates-rve-image-comparison-slider.mp4","poster":"assets/remotion-library/poster-r0031.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/image-comparison-slider.tsx","line":"One picture wipes into another: a versus beat.","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No inputs: 9 hex colors written in the JSX; the words are typed into the JSX (\"After\", \"Before\"); font set inline (Inter). The pictures are gradient blocks standing in for images: there is no image slot.","read":true}},{"id":"r0032","name":"Image zoom reveal","job":"layout","video":"assets/remotion-catalog/032-https-github-com-reactvideoeditor-remotion-templates-rve-image-zoom-reveal.mp4","poster":"assets/remotion-catalog/032-https-github-com-reactvideoeditor-remotion-templates-rve-image-zoom-reveal.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/image-zoom-reveal.tsx","line":"A picture grows out of a card.","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No inputs: 5 hex colors written in the JSX; the words are typed into the JSX (\"Featured Image\"); font set inline (Inter). The pictures are gradient blocks standing in for images: there is no image slot.","read":true}},{"id":"r0033","name":"Iris transition","job":"transition","video":"assets/remotion-catalog/033-https-github-com-reactvideoeditor-remotion-templates-rve-iris-transition.mp4","poster":"assets/remotion-library/poster-r0033.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/iris-transition.tsx","line":"A circle opens onto the next picture.","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No inputs: 10 hex colors written in the JSX; the words are typed into the JSX (\"Scene B\", \"Iris opening...\", \"Scene A\"); font set inline (Inter). Both scenes are placeholders written in the file; your own scenes go in their place.","read":true}},{"id":"r0034","name":"Ken Burns","job":"move on a still","video":"assets/remotion-catalog/034-https-github-com-reactvideoeditor-remotion-templates-rve-ken-burns.mp4","poster":"assets/remotion-library/poster-r0034.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/ken-burns.tsx","line":"A slow push on a still.","takes":{"how":"props","what":["pictures"],"line":"Props: imageUrl, duration, scale, translateX, translateY. Nothing else to re-skin: it is a move on one picture.","read":true}},{"id":"r0035","name":"Letterbox reveal","job":"move","video":"assets/remotion-catalog/035-https-github-com-reactvideoeditor-remotion-templates-rve-letterbox-reveal.mp4","poster":"assets/remotion-catalog/035-https-github-com-reactvideoeditor-remotion-templates-rve-letterbox-reveal.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/letterbox-reveal.tsx","line":"Bars open onto a picture.","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No inputs: 3 hex colors written in the JSX; the words are typed into the JSX (\"CINEMATIC\", \"A letterbox reveal\"); font set inline (Inter).","read":true}},{"id":"r0036","name":"Line chart","job":"number","video":"assets/remotion-catalog/036-https-github-com-reactvideoeditor-remotion-templates-rve-line-chart.mp4","poster":"assets/remotion-catalog/036-https-github-com-reactvideoeditor-remotion-templates-rve-line-chart.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/line-chart.tsx","line":"A line that draws.","takes":{"how":"edit the file","what":["colors","type","text","numbers"],"line":"No inputs: 4 hex colors written in the JSX; the words are typed into the JSX (\"Revenue Growth\"); labels and values are a list at the top of the component (data); font set inline (Inter).","read":true}},{"id":"r0037","name":"Liquid wave","job":"ground","video":"assets/remotion-catalog/037-https-github-com-reactvideoeditor-remotion-templates-rve-liquid-wave.mp4","poster":"assets/remotion-catalog/037-https-github-com-reactvideoeditor-remotion-templates-rve-liquid-wave.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/liquid-wave.tsx","line":"A moving wave backdrop.","takes":{"how":"edit the file","what":["colors"],"line":"No inputs: 3 hex colors written in the JSX.","read":true}},{"id":"r0038","name":"Logo blur reveal","job":"logo","video":"assets/remotion-library/r0038-lej.mp4","poster":"assets/remotion-library/r0038-lej-poster.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/logo-blur-reveal.tsx","line":"A logo out of blur.","takes":{"how":"edit the file","what":["colors","type","logo","text"],"line":"No inputs: 3 hex colors written in the JSX; the words are typed into the JSX (\"LOGO\", \"Company Name\"); font set inline (Inter). The logo is a placeholder (the word LOGO in a gradient square) drawn in the JSX: there is no image slot.","read":true}},{"id":"r0039","name":"Logo bounce drop","job":"logo","video":"assets/remotion-library/r0039-lej.mp4","poster":"assets/remotion-library/r0039-lej-poster.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/logo-bounce-drop.tsx","line":"A logo that drops in.","takes":{"how":"edit the file","what":["colors","type","logo","text"],"line":"No inputs: 3 hex colors written in the JSX; the words are typed into the JSX (\"LOGO\", \"Company Name\"); font set inline (Inter). The logo is a placeholder (the word LOGO in a gradient square) drawn in the JSX: there is no image slot.","read":true}},{"id":"r0040","name":"Logo fade reveal","job":"logo","video":"assets/remotion-library/r0040-lej.mp4","poster":"assets/remotion-library/r0040-lej-poster.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/logo-fade-reveal.tsx","line":"A logo that fades in.","takes":{"how":"edit the file","what":["colors","type","logo","text"],"line":"No inputs: 4 hex colors written in the JSX; the words are typed into the JSX (\"LOGO\", \"Company Name\", \"Your tagline here\"); font set inline (Inter). The logo is a placeholder (the word LOGO in a gradient square) drawn in the JSX: there is no image slot.","read":true}},{"id":"r0041","name":"Logo glitch reveal","job":"logo","video":"assets/remotion-library/r0041-lej.mp4","poster":"assets/remotion-library/r0041-lej-poster.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/logo-glitch-reveal.tsx","line":"A logo that glitches in.","takes":{"how":"edit the file","what":["colors","type","logo","text"],"line":"No inputs: 4 hex colors written in the JSX; the words are typed into the JSX (\"LOGO\", \"Company Name\", \"Your tagline here\"); font set inline (Inter). The logo is a placeholder (the word LOGO in a gradient square) drawn in the JSX: there is no image slot.","read":true}},{"id":"r0042","name":"Logo scale rotate","job":"logo","video":"assets/remotion-library/r0042-lej.mp4","poster":"assets/remotion-library/r0042-lej-poster.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/logo-scale-rotate.tsx","line":"A logo that turns in.","takes":{"how":"edit the file","what":["colors","type","logo","text"],"line":"No inputs: 3 hex colors written in the JSX; the words are typed into the JSX (\"LOGO\", \"Company Name\"); font set inline (Inter). The logo is a placeholder (the word LOGO in a gradient square) drawn in the JSX: there is no image slot.","read":true}},{"id":"r0043","name":"Logo spin reveal","job":"logo","video":"assets/remotion-library/r0043-lej.mp4","poster":"assets/remotion-library/r0043-lej-poster.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/logo-spin-reveal.tsx","line":"A logo that spins in.","takes":{"how":"edit the file","what":["colors","type","logo","text"],"line":"No inputs: 4 hex colors written in the JSX; the words are typed into the JSX (\"LOGO\", \"Company Name\", \"Your tagline here\"); font set inline (Inter). The logo is a placeholder (the word LOGO in a gradient square) drawn in the JSX: there is no image slot.","read":true}},{"id":"r0044","name":"Logo split reveal","job":"logo","video":"assets/remotion-library/r0044-lej.mp4","poster":"assets/remotion-library/r0044-lej-poster.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/logo-split-reveal.tsx","line":"A logo that splits in.","takes":{"how":"edit the file","what":["colors","type","logo","text"],"line":"No inputs: 4 hex colors written in the JSX; the words are typed into the JSX (\"LO\", \"GO\", \"Company Name\"); font set inline (Inter). The logo is a placeholder (the word LOGO in a gradient square) drawn in the JSX: there is no image slot.","read":true}},{"id":"r0046","name":"Logo typewriter","job":"title","video":"assets/remotion-catalog/046-https-github-com-reactvideoeditor-remotion-templates-rve-logo-typewriter.mp4","poster":"assets/remotion-catalog/046-https-github-com-reactvideoeditor-remotion-templates-rve-logo-typewriter.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/logo-typewriter.tsx","line":"A logo that types.","takes":{"how":"edit the file","what":["colors","type","logo","text"],"line":"No inputs: 4 hex colors written in the JSX; the words are one constant at the top of the component (\"ACME STUDIO\"); font set inline (Inter). The logo is a gradient square beside the typed name, drawn in the JSX: there is no image slot.","read":true}},{"id":"r0047","name":"Lower third","job":"lower third","video":"assets/remotion-library/r0047-lej.mp4","poster":"assets/remotion-library/r0047-lej-poster.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/lower-third.tsx","line":"A name bar.","takes":{"how":"edit the file","what":["colors","text"],"line":"No inputs: 4 hex colors written in the JSX; the words are typed into the JSX (\"John Smith\", \"Senior Producer\").","read":true}},{"id":"r0048","name":"Masonry gallery","job":"layout","video":"assets/remotion-catalog/048-https-github-com-reactvideoeditor-remotion-templates-rve-masonry-gallery.mp4","poster":"assets/remotion-catalog/048-https-github-com-reactvideoeditor-remotion-templates-rve-masonry-gallery.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/masonry-gallery.tsx","line":"Pictures tile in.","takes":{"how":"edit the file","what":["colors"],"line":"No inputs: 7 hex colors written in the JSX. The pictures are gradient blocks standing in for images: there is no image slot.","read":true}},{"id":"r0049","name":"Matrix rain","job":"ground","video":"assets/remotion-catalog/049-https-github-com-reactvideoeditor-remotion-templates-rve-matrix-rain.mp4","poster":"assets/remotion-catalog/049-https-github-com-reactvideoeditor-remotion-templates-rve-matrix-rain.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/matrix-rain.tsx","line":"Falling code.","takes":{"how":"edit the file","what":["colors","type"],"line":"No inputs: 2 hex colors written in the JSX; font set inline (monospace).","read":true}},{"id":"r0050","name":"Morph transition","job":"transition","video":"assets/remotion-catalog/050-https-github-com-reactvideoeditor-remotion-templates-rve-morph-transition.mp4","poster":"assets/remotion-catalog/050-https-github-com-reactvideoeditor-remotion-templates-rve-morph-transition.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/morph-transition.tsx","line":"One shape becomes the next.","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No inputs: 7 hex colors written in the JSX; the words are typed into the JSX (\"Scene A\", \"Morphing away...\", \"Scene B\"); font set inline (Inter). Both scenes are placeholders written in the file; your own scenes go in their place.","read":true}},{"id":"r0051","name":"Noise grain","job":"ground","video":"assets/remotion-catalog/051-https-github-com-reactvideoeditor-remotion-templates-rve-noise-grain.mp4","poster":"assets/remotion-catalog/051-https-github-com-reactvideoeditor-remotion-templates-rve-noise-grain.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/noise-grain.tsx","line":"Film grain over any frame.","takes":{"how":"edit the file","what":["colors","text"],"line":"No inputs: 4 hex colors written in the JSX; the words are typed into the JSX (\"Film Grain Overlay\", \"Subtle noise texture effect\").","read":true}},{"id":"r0052","name":"Notification pop","job":"callout","video":"assets/remotion-catalog/052-https-github-com-reactvideoeditor-remotion-templates-rve-notification-pop.mp4","poster":"assets/remotion-catalog/052-https-github-com-reactvideoeditor-remotion-templates-rve-notification-pop.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/notification-pop.tsx","line":"Phone-style alerts popping in.","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No inputs: 7 hex colors written in the JSX; the words are typed into the JSX (\"Notifications\"); labels are a list at the top of the component (notifications); font set inline (Inter).","read":true}},{"id":"r0053","name":"Parallax pan","job":"move on a still","video":"assets/remotion-catalog/053-https-github-com-reactvideoeditor-remotion-templates-rve-parallax-pan.mp4","poster":"assets/remotion-library/poster-r0053.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/parallax-pan.tsx","line":"A still that drifts sideways with depth.","takes":{"how":"props","what":["pictures"],"line":"Props: imageUrl, duration, direction (left-right, right-left, top-bottom, bottom-top), scale. Nothing else to re-skin: it is a move on one picture.","read":true}},{"id":"r0054","name":"Particle explosion","job":"ground","video":"assets/remotion-catalog/054-https-github-com-reactvideoeditor-remotion-templates-rve-particle-explosion.mp4","poster":"assets/remotion-catalog/054-https-github-com-reactvideoeditor-remotion-templates-rve-particle-explosion.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/particle-explosion.tsx","line":"A burst of dots.","takes":{"how":"edit the file","what":["colors","text"],"line":"No inputs: colors written in the JSX as rgba values; the words are one constant at the top of the component (\"BOOM!\").","read":true}},{"id":"r0055","name":"Photo stack","job":"layout","video":"assets/remotion-catalog/055-https-github-com-reactvideoeditor-remotion-templates-rve-photo-stack.mp4","poster":"assets/remotion-catalog/055-https-github-com-reactvideoeditor-remotion-templates-rve-photo-stack.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/photo-stack.tsx","line":"Pictures drop onto a pile.","takes":{"how":"edit the file","what":["colors"],"line":"No inputs: 7 hex colors written in the JSX. The pictures are gradient blocks standing in for images: there is no image slot.","read":true}},{"id":"r0056","name":"Picture in picture","job":"layout","video":"assets/remotion-catalog/056-https-github-com-reactvideoeditor-remotion-templates-rve-picture-in-picture.mp4","poster":"assets/remotion-catalog/056-https-github-com-reactvideoeditor-remotion-templates-rve-picture-in-picture.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/picture-in-picture.tsx","line":"A small window over the main picture.","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No inputs: 5 hex colors written in the JSX; the words are typed into the JSX (\"Main Content\", \"Speaker\"); font set inline (Inter). The pictures are gradient blocks standing in for images: there is no image slot.","read":true}},{"id":"r0057","name":"Pie chart","job":"number","video":"assets/remotion-catalog/057-https-github-com-reactvideoeditor-remotion-templates-rve-pie-chart.mp4","poster":"assets/remotion-catalog/057-https-github-com-reactvideoeditor-remotion-templates-rve-pie-chart.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/pie-chart.tsx","line":"A pie that fills.","takes":{"how":"edit the file","what":["colors","type","text","numbers"],"line":"No inputs: 7 hex colors written in the JSX; the words are typed into the JSX (\"Market Share\"); labels and values are a list at the top of the component (segments); font set inline (Inter).","read":true}},{"id":"r0058","name":"Pixel transition","job":"transition","video":"assets/remotion-catalog/058-https-github-com-reactvideoeditor-remotion-templates-rve-pixel-transition.mp4","poster":"assets/remotion-catalog/058-https-github-com-reactvideoeditor-remotion-templates-rve-pixel-transition.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/pixel-transition.tsx","line":"A pixel scatter between pictures.","takes":{"how":"edit the file","what":["colors"],"line":"No inputs: 1 hex color written in the JSX.","read":true}},{"id":"r0059","name":"Polaroid frame","job":"layout","video":"assets/remotion-catalog/059-https-github-com-reactvideoeditor-remotion-templates-rve-polaroid-frame.mp4","poster":"assets/remotion-catalog/059-https-github-com-reactvideoeditor-remotion-templates-rve-polaroid-frame.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/polaroid-frame.tsx","line":"A picture in a tilted frame.","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No inputs: 4 hex colors written in the JSX; the words are typed into the JSX (\"Summer 2024\"); font set inline (Georgia). The pictures are gradient blocks standing in for images: there is no image slot.","read":true}},{"id":"r0060","name":"Popping text","job":"title","video":"assets/remotion-catalog/060-https-github-com-reactvideoeditor-remotion-templates-rve-popping-text.mp4","poster":"assets/remotion-catalog/060-https-github-com-reactvideoeditor-remotion-templates-rve-popping-text.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/popping-text.tsx","line":"A title that pops.","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No inputs: 4 hex colors written in the JSX; the words are one constant at the top of the component (\"BINGO!\"); the colors are a short list at the top of the component; font set inline (Impact).","read":true}},{"id":"r0061","name":"Progress bars","job":"number","video":"assets/remotion-catalog/061-https-github-com-reactvideoeditor-remotion-templates-rve-progress-bars.mp4","poster":"assets/remotion-catalog/061-https-github-com-reactvideoeditor-remotion-templates-rve-progress-bars.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/progress-bars.tsx","line":"Bars that fill.","takes":{"how":"edit the file","what":["colors","type","text","numbers"],"line":"No inputs: 7 hex colors written in the JSX; the words are typed into the JSX (\"Skills Overview\"); labels and values are a list at the top of the component (skills); font set inline (Inter).","read":true}},{"id":"r0062","name":"Progress steps","job":"number","video":"assets/remotion-catalog/062-https-github-com-reactvideoeditor-remotion-templates-rve-progress-steps.mp4","poster":"assets/remotion-catalog/062-https-github-com-reactvideoeditor-remotion-templates-rve-progress-steps.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/progress-steps.tsx","line":"Steps on a line.","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No inputs: 9 hex colors written in the JSX; the words are typed into the JSX (\"Project Timeline\"); labels are a list at the top of the component (steps); font set inline (Inter).","read":true}},{"id":"r0063","name":"Pulsing text","job":"title","video":"assets/remotion-catalog/063-https-github-com-reactvideoeditor-remotion-templates-rve-pulsing-text.mp4","poster":"assets/remotion-catalog/063-https-github-com-reactvideoeditor-remotion-templates-rve-pulsing-text.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/pulsing-text.tsx","line":"A title that pulses.","takes":{"how":"edit the file","what":["colors","text"],"line":"No inputs: colors written in the JSX as rgba values; the words are one constant at the top of the component (\"Pulse\").","read":true}},{"id":"r0064","name":"Push transition","job":"transition","video":"assets/remotion-catalog/064-https-github-com-reactvideoeditor-remotion-templates-rve-push-transition.mp4","poster":"assets/remotion-library/poster-r0064.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/push-transition.tsx","line":"One picture pushes the next off.","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No inputs: 9 hex colors written in the JSX; the words are typed into the JSX (\"Scene A\", \"Being pushed out...\", \"Scene B\"); font set inline (Inter). Both scenes are placeholders written in the file; your own scenes go in their place.","read":true}},{"id":"r0065","name":"Quote card","job":"quote","video":"assets/remotion-catalog/065-https-github-com-reactvideoeditor-remotion-templates-rve-quote-card.mp4","poster":"assets/remotion-catalog/065-https-github-com-reactvideoeditor-remotion-templates-rve-quote-card.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/quote-card.tsx","line":"A quotation with a name.","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No inputs: 3 hex colors written in the JSX; the words are typed into the JSX (\"Design is not just what it looks like. Design is how it works.\"); font set inline (Georgia, Inter).","read":true}},{"id":"r0066","name":"Rotating carousel","job":"layout","video":"assets/remotion-catalog/066-https-github-com-reactvideoeditor-remotion-templates-rve-rotating-carousel.mp4","poster":"assets/remotion-catalog/066-https-github-com-reactvideoeditor-remotion-templates-rve-rotating-carousel.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/rotating-carousel.tsx","line":"Cards turn on a wheel.","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No inputs: 5 hex colors written in the JSX; the words are typed into the JSX (\"Our Features\"); labels are a list at the top of the component (cards); font set inline (Inter).","read":true}},{"id":"r0067","name":"Slide text","job":"title","video":"assets/remotion-catalog/067-https-github-com-reactvideoeditor-remotion-templates-rve-slide-text.mp4","poster":"assets/remotion-catalog/067-https-github-com-reactvideoeditor-remotion-templates-rve-slide-text.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/slide-text.tsx","line":"A title that slides.","takes":{"how":"edit the file","what":["text"],"line":"No inputs: the words are typed into the JSX (\"Sliding Text!\").","read":true}},{"id":"r0068","name":"Slide wipe","job":"transition","video":"assets/remotion-catalog/068-https-github-com-reactvideoeditor-remotion-templates-rve-slide-wipe.mp4","poster":"assets/remotion-catalog/068-https-github-com-reactvideoeditor-remotion-templates-rve-slide-wipe.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/slide-wipe.tsx","line":"A hard wipe between pictures.","takes":{"how":"edit the file","what":["colors","text"],"line":"No inputs: 7 hex colors written in the JSX; the words are typed into the JSX (\"New Scene\", \"Revealed underneath\", \"Old Scene\"). Both scenes are placeholders written in the file; your own scenes go in their place.","read":true}},{"id":"r0069","name":"Sound wave","job":"ground","video":"assets/remotion-catalog/069-https-github-com-reactvideoeditor-remotion-templates-rve-sound-wave.mp4","poster":"assets/remotion-catalog/069-https-github-com-reactvideoeditor-remotion-templates-rve-sound-wave.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/sound-wave.tsx","line":"Voice bars.","takes":{"how":"edit the file","what":["colors"],"line":"No inputs: colors written in the JSX as rgba values.","read":true}},{"id":"r0070","name":"Split screen","job":"layout","video":"assets/remotion-catalog/070-https-github-com-reactvideoeditor-remotion-templates-rve-split-screen.mp4","poster":"assets/remotion-catalog/070-https-github-com-reactvideoeditor-remotion-templates-rve-split-screen.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/split-screen.tsx","line":"Two pictures side by side.","takes":{"how":"edit the file","what":["colors","text"],"line":"No inputs: 7 hex colors written in the JSX; the words are typed into the JSX (\"Panel A\", \"Left side content slides in from the left edge\", \"Panel B\").","read":true}},{"id":"r0071","name":"Spotlight reveal","job":"ground","video":"assets/remotion-catalog/071-https-github-com-reactvideoeditor-remotion-templates-rve-spotlight-reveal.mp4","poster":"assets/remotion-catalog/071-https-github-com-reactvideoeditor-remotion-templates-rve-spotlight-reveal.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/spotlight-reveal.tsx","line":"A spotlight opens onto a title.","takes":{"how":"edit the file","what":["colors","text"],"line":"No inputs: 6 hex colors written in the JSX; the words are typed into the JSX (\"REVEALED\", \"Spotlight reveal transition\").","read":true}},{"id":"r0073","name":"Stat counter","job":"number","video":"assets/remotion-catalog/073-https-github-com-reactvideoeditor-remotion-templates-rve-stat-counter.mp4","poster":"assets/remotion-library/poster-r0073.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/stat-counter.tsx","line":"A number counts up.","takes":{"how":"edit the file","what":["colors","type","text","numbers"],"line":"No inputs: 3 hex colors written in the JSX; the words are typed into the JSX (\"Total Users\", \"↑ 12.5%\", \"This Month\"); the figures are written in the component; font set inline (Inter).","read":true}},{"id":"r0075","name":"Text highlight","job":"title","video":"assets/remotion-catalog/075-https-github-com-reactvideoeditor-remotion-templates-rve-text-highlight.mp4","poster":"assets/remotion-library/poster-r0075.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/text-highlight.tsx","line":"Words light up one by one.","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No inputs: 4 hex colors written in the JSX; labels are a list at the top of the component (words); font set inline (Inter).","read":true}},{"id":"r0076","name":"Title split","job":"title","video":"assets/remotion-catalog/076-https-github-com-reactvideoeditor-remotion-templates-rve-title-split.mp4","poster":"assets/remotion-catalog/076-https-github-com-reactvideoeditor-remotion-templates-rve-title-split.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/title-split.tsx","line":"A title that splits open.","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No inputs: 1 hex color written in the JSX; the words are typed into the JSX (\"CREATIVE\", \"STUDIO\"); font set inline (Inter).","read":true}},{"id":"r0077","name":"Typewriter subtitle","job":"caption","video":"assets/remotion-catalog/077-https-github-com-reactvideoeditor-remotion-templates-rve-typewriter-subtitle.mp4","poster":"assets/remotion-catalog/077-https-github-com-reactvideoeditor-remotion-templates-rve-typewriter-subtitle.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/typewriter-subtitle.tsx","line":"A caption that types.","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No inputs: 1 hex color written in the JSX; the words are one constant at the top of the component (\"I like typing...\"); font set inline (Courier New).","read":true}},{"id":"r0078","name":"Vignette pulse","job":"ground","video":"assets/remotion-catalog/078-https-github-com-reactvideoeditor-remotion-templates-rve-vignette-pulse.mp4","poster":"assets/remotion-catalog/078-https-github-com-reactvideoeditor-remotion-templates-rve-vignette-pulse.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/vignette-pulse.tsx","line":"A breathing dark edge.","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No inputs: 2 hex colors written in the JSX; the words are typed into the JSX (\"Your Content Here\", \"Vignette pulses around the edges\"); font set inline (Inter).","read":true}},{"id":"r0079","name":"Whip pan","job":"transition","video":"assets/remotion-catalog/079-https-github-com-reactvideoeditor-remotion-templates-rve-whip-pan.mp4","poster":"assets/remotion-catalog/079-https-github-com-reactvideoeditor-remotion-templates-rve-whip-pan.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/whip-pan.tsx","line":"A fast blurred pan between pictures.","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No inputs: 9 hex colors written in the JSX; the words are typed into the JSX (\"Scene A\", \"Blue content\", \"Scene B\"); font set inline (Inter). Both scenes are placeholders written in the file; your own scenes go in their place.","read":true}},{"id":"r0080","name":"Zoom pulse","job":"move on a still","video":"assets/remotion-catalog/080-https-github-com-reactvideoeditor-remotion-templates-rve-zoom-pulse.mp4","poster":"assets/remotion-catalog/080-https-github-com-reactvideoeditor-remotion-templates-rve-zoom-pulse.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/zoom-pulse.tsx","line":"A push with a beat in it.","takes":{"how":"props","what":["pictures"],"line":"Props: imageUrl, duration, minScale, maxScale. Nothing else to re-skin: it is a move on one picture.","read":true}},{"id":"r0081","name":"Zoom through","job":"transition","video":"assets/remotion-catalog/081-https-github-com-reactvideoeditor-remotion-templates-rve-zoom-through.mp4","poster":"assets/remotion-catalog/081-https-github-com-reactvideoeditor-remotion-templates-rve-zoom-through.jpg","w":1280,"h":720,"seconds":3.05,"use":"# one file, needs only remotion\ncurl -O https://raw.githubusercontent.com/reactvideoeditor/remotion-templates/main/templates/zoom-through.tsx","line":"A zoom through one picture into the next.","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No inputs: 5 hex colors written in the JSX; the words are typed into the JSX (\"Zooming In...\", \"Arriving...\"); font set inline (Inter). Both scenes are placeholders written in the file; your own scenes go in their place.","read":true}}]},{"name":"ahgsql/remotion-subtitles","url":"https://github.com/ahgsql/remotion-subtitles","licence":{"name":"MIT","basis":"licence file"},"line":"Seventeen caption styles in one library, from plain to neon.","hand_written":true,"shelf":"crew","jobs":["caption"],"needs":{"remotion":"^4.0.374","packages":["remotion"]},"pieces":[{"id":"r0101","name":"Caption","job":"caption","video":"assets/remotion-catalog/101-ahgsql__remotion-subtitles-lib-subtitles-Caption.mp4","poster":"assets/remotion-catalog/101-ahgsql__remotion-subtitles-lib-subtitles-Caption.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-subtitle\n# then import the part you want; the README at https://github.com/ahgsql/remotion-subtitles lists them","takes":{"how":"props","what":["colors","type","text"],"line":"Props: text, style. Each caption sets its own font, size and color as defaults in the file; a style object passed in overrides them (fontFamily, color, fontSize).","read":true}},{"id":"r0102","name":"Bounce Caption","job":"caption","video":"assets/remotion-catalog/102-ahgsql__remotion-subtitles-lib-subtitles-BounceCaption.mp4","poster":"assets/remotion-catalog/102-ahgsql__remotion-subtitles-lib-subtitles-BounceCaption.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-subtitle\n# then import the part you want; the README at https://github.com/ahgsql/remotion-subtitles lists them","takes":{"how":"props","what":["colors","type","text"],"line":"Props: text, style. Each caption sets its own font, size and color as defaults in the file; a style object passed in overrides them (fontFamily, color, fontSize).","read":true}},{"id":"r0103","name":"Colorful Caption","job":"caption","video":"assets/remotion-catalog/103-ahgsql__remotion-subtitles-lib-subtitles-ColorfulCaption.mp4","poster":"assets/remotion-catalog/103-ahgsql__remotion-subtitles-lib-subtitles-ColorfulCaption.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-subtitle\n# then import the part you want; the README at https://github.com/ahgsql/remotion-subtitles lists them","takes":{"how":"props","what":["colors","type","text"],"line":"Props: text, style. Each caption sets its own font, size and color as defaults in the file; a style object passed in overrides them (fontFamily, color, fontSize).","read":true}},{"id":"r0104","name":"Explosive Caption","job":"caption","video":"assets/remotion-catalog/104-ahgsql__remotion-subtitles-lib-subtitles-ExplosiveCaption.mp4","poster":"assets/remotion-catalog/104-ahgsql__remotion-subtitles-lib-subtitles-ExplosiveCaption.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-subtitle\n# then import the part you want; the README at https://github.com/ahgsql/remotion-subtitles lists them","takes":{"how":"props","what":["colors","type","text"],"line":"Props: text, style. Each caption sets its own font, size and color as defaults in the file; a style object passed in overrides them (fontFamily, color, fontSize).","read":true}},{"id":"r0105","name":"Fade Caption","job":"caption","video":"assets/remotion-catalog/105-ahgsql__remotion-subtitles-lib-subtitles-FadeCaption.mp4","poster":"assets/remotion-catalog/105-ahgsql__remotion-subtitles-lib-subtitles-FadeCaption.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-subtitle\n# then import the part you want; the README at https://github.com/ahgsql/remotion-subtitles lists them","takes":{"how":"props","what":["colors","type","text"],"line":"Props: text, style. Each caption sets its own font, size and color as defaults in the file; a style object passed in overrides them (fontFamily, color, fontSize).","read":true}},{"id":"r0106","name":"Fire Caption","job":"caption","video":"assets/remotion-catalog/106-ahgsql__remotion-subtitles-lib-subtitles-FireCaption.mp4","poster":"assets/remotion-catalog/106-ahgsql__remotion-subtitles-lib-subtitles-FireCaption.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-subtitle\n# then import the part you want; the README at https://github.com/ahgsql/remotion-subtitles lists them","takes":{"how":"props","what":["colors","type","text"],"line":"Props: text, style. Each caption sets its own font, size and color as defaults in the file; a style object passed in overrides them (fontFamily, color, fontSize).","read":true}},{"id":"r0107","name":"Glitch Caption","job":"caption","video":"assets/remotion-catalog/107-ahgsql__remotion-subtitles-lib-subtitles-GlitchCaption.mp4","poster":"assets/remotion-catalog/107-ahgsql__remotion-subtitles-lib-subtitles-GlitchCaption.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-subtitle\n# then import the part you want; the README at https://github.com/ahgsql/remotion-subtitles lists them","takes":{"how":"props","what":["colors","type","text"],"line":"Props: text, style. Each caption sets its own font, size and color as defaults in the file; a style object passed in overrides them (fontFamily, color, fontSize).","read":true}},{"id":"r0108","name":"Glowing Caption","job":"caption","video":"assets/remotion-catalog/108-ahgsql__remotion-subtitles-lib-subtitles-GlowingCaption.mp4","poster":"assets/remotion-catalog/108-ahgsql__remotion-subtitles-lib-subtitles-GlowingCaption.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-subtitle\n# then import the part you want; the README at https://github.com/ahgsql/remotion-subtitles lists them","takes":{"how":"props","what":["colors","type","text"],"line":"Props: text, style. Each caption sets its own font, size and color as defaults in the file; a style object passed in overrides them (fontFamily, color, fontSize).","read":true}},{"id":"r0109","name":"Lightning Caption","job":"caption","video":"assets/remotion-catalog/109-ahgsql__remotion-subtitles-lib-subtitles-LightningCaption.mp4","poster":"assets/remotion-catalog/109-ahgsql__remotion-subtitles-lib-subtitles-LightningCaption.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-subtitle\n# then import the part you want; the README at https://github.com/ahgsql/remotion-subtitles lists them","takes":{"how":"props","what":["colors","type","text"],"line":"Props: text, style. Each caption sets its own font, size and color as defaults in the file; a style object passed in overrides them (fontFamily, color, fontSize).","read":true}},{"id":"r0110","name":"Neon Caption","job":"caption","video":"assets/remotion-catalog/110-ahgsql__remotion-subtitles-lib-subtitles-NeonCaption.mp4","poster":"assets/remotion-catalog/110-ahgsql__remotion-subtitles-lib-subtitles-NeonCaption.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-subtitle\n# then import the part you want; the README at https://github.com/ahgsql/remotion-subtitles lists them","takes":{"how":"props","what":["colors","type","text"],"line":"Props: text, style. Each caption sets its own font, size and color as defaults in the file; a style object passed in overrides them (fontFamily, color, fontSize).","read":true}},{"id":"r0111","name":"Rotating Caption","job":"caption","video":"assets/remotion-catalog/111-ahgsql__remotion-subtitles-lib-subtitles-RotatingCaption.mp4","poster":"assets/remotion-catalog/111-ahgsql__remotion-subtitles-lib-subtitles-RotatingCaption.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-subtitle\n# then import the part you want; the README at https://github.com/ahgsql/remotion-subtitles lists them","takes":{"how":"props","what":["colors","type","text"],"line":"Props: text, style. Each caption sets its own font, size and color as defaults in the file; a style object passed in overrides them (fontFamily, color, fontSize).","read":true}},{"id":"r0112","name":"Shake Caption","job":"caption","video":"assets/remotion-catalog/112-ahgsql__remotion-subtitles-lib-subtitles-ShakeCaption.mp4","poster":"assets/remotion-catalog/112-ahgsql__remotion-subtitles-lib-subtitles-ShakeCaption.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-subtitle\n# then import the part you want; the README at https://github.com/ahgsql/remotion-subtitles lists them","takes":{"how":"props","what":["colors","type","text"],"line":"Props: text, style. Each caption sets its own font, size and color as defaults in the file; a style object passed in overrides them (fontFamily, color, fontSize).","read":true}},{"id":"r0113","name":"Three Dish Caption","job":"caption","video":"assets/remotion-catalog/113-ahgsql__remotion-subtitles-lib-subtitles-ThreeDishCaption.mp4","poster":"assets/remotion-catalog/113-ahgsql__remotion-subtitles-lib-subtitles-ThreeDishCaption.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-subtitle\n# then import the part you want; the README at https://github.com/ahgsql/remotion-subtitles lists them","takes":{"how":"props","what":["colors","type","text"],"line":"Props: text, style. Each caption sets its own font, size and color as defaults in the file; a style object passed in overrides them (fontFamily, color, fontSize).","read":true}},{"id":"r0114","name":"Tilt Shift Caption","job":"caption","video":"assets/remotion-catalog/114-ahgsql__remotion-subtitles-lib-subtitles-TiltShiftCaption.mp4","poster":"assets/remotion-catalog/114-ahgsql__remotion-subtitles-lib-subtitles-TiltShiftCaption.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-subtitle\n# then import the part you want; the README at https://github.com/ahgsql/remotion-subtitles lists them","takes":{"how":"props","what":["colors","type","text"],"line":"Props: text, style. Each caption sets its own font, size and color as defaults in the file; a style object passed in overrides them (fontFamily, color, fontSize).","read":true}},{"id":"r0115","name":"Typewriter Caption","job":"caption","video":"assets/remotion-catalog/115-ahgsql__remotion-subtitles-lib-subtitles-TypewriterCaption.mp4","poster":"assets/remotion-catalog/115-ahgsql__remotion-subtitles-lib-subtitles-TypewriterCaption.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-subtitle\n# then import the part you want; the README at https://github.com/ahgsql/remotion-subtitles lists them","takes":{"how":"props","what":["colors","type","text"],"line":"Props: text, style. Each caption sets its own font, size and color as defaults in the file; a style object passed in overrides them (fontFamily, color, fontSize).","read":true}},{"id":"r0116","name":"Waving Caption","job":"caption","video":"assets/remotion-catalog/116-ahgsql__remotion-subtitles-lib-subtitles-WavingCaption.mp4","poster":"assets/remotion-catalog/116-ahgsql__remotion-subtitles-lib-subtitles-WavingCaption.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-subtitle\n# then import the part you want; the README at https://github.com/ahgsql/remotion-subtitles lists them","takes":{"how":"props","what":["colors","type","text"],"line":"Props: text, style. Each caption sets its own font, size and color as defaults in the file; a style object passed in overrides them (fontFamily, color, fontSize).","read":true}},{"id":"r0117","name":"Zoom Caption","job":"caption","video":"assets/remotion-catalog/117-ahgsql__remotion-subtitles-lib-subtitles-ZoomCaption.mp4","poster":"assets/remotion-catalog/117-ahgsql__remotion-subtitles-lib-subtitles-ZoomCaption.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-subtitle\n# then import the part you want; the README at https://github.com/ahgsql/remotion-subtitles lists them","takes":{"how":"props","what":["colors","type","text"],"line":"Props: text, style. Each caption sets its own font, size and color as defaults in the file; a style object passed in overrides them (fontFamily, color, fontSize).","read":true}}]},{"name":"bsewell/kinetic-titles","url":"https://github.com/bsewell/kinetic-titles","licence":{"name":"MIT","basis":"README"},"line":"One-word titles and names that slam, zoom, split apart and rain in.","hand_written":true,"shelf":"crew","jobs":["title","ground"],"needs":{"remotion":"4.0.434","packages":["remotion"]},"pieces":[{"id":"r0821","name":"Tumble Lock Helvetica","job":"title","video":"assets/remotion-catalog/821-bsewell__kinetic-titles-TumbleLock-Helvetica.mp4","poster":"assets/remotion-catalog/821-bsewell__kinetic-titles-TumbleLock-Helvetica.jpg","w":1920,"h":1080,"seconds":10.05,"use":"git clone https://github.com/bsewell/kinetic-titles\ncd kinetic-titles\nnpm install\nnpx remotion render src/index.ts TumbleLock-Helvetica out.mp4","takes":{"how":"props","what":["type"],"line":"Prop: fontFamily (the two entries are the same piece with a different font). The words are the PHASES list at the top of TumbleLock.tsx and the colors are written in the file.","read":true}},{"id":"r0822","name":"Tumble Lock Inter","job":"title","video":"assets/remotion-catalog/822-bsewell__kinetic-titles-TumbleLock-Inter.mp4","poster":"assets/remotion-catalog/822-bsewell__kinetic-titles-TumbleLock-Inter.jpg","w":1920,"h":1080,"seconds":10.05,"use":"git clone https://github.com/bsewell/kinetic-titles\ncd kinetic-titles\nnpm install\nnpx remotion render src/index.ts TumbleLock-Inter out.mp4","takes":{"how":"props","what":["type"],"line":"Prop: fontFamily (the two entries are the same piece with a different font). The words are the PHASES list at the top of TumbleLock.tsx and the colors are written in the file.","read":true}},{"id":"r0823","name":"Matrix Strand","job":"ground","video":"assets/remotion-catalog/823-bsewell__kinetic-titles-MatrixStrand.mp4","poster":"assets/remotion-catalog/823-bsewell__kinetic-titles-MatrixStrand.jpg","w":1920,"h":1080,"seconds":9.05,"use":"git clone https://github.com/bsewell/kinetic-titles\ncd kinetic-titles\nnpm install\nnpx remotion render src/index.ts MatrixStrand out.mp4","takes":{"how":"props","what":["text"],"line":"Props: word, maskWord, passes[] {chars, gap, replace}, centerX, targetRowFrac, colSpacing and timing values. One component (MatrixStrand) with six sets of words. Colors and font are written in the file.","read":true}},{"id":"r0824","name":"Matrix Matthew","job":"ground","video":"assets/remotion-catalog/824-bsewell__kinetic-titles-MatrixMatthew.mp4","poster":"assets/remotion-catalog/824-bsewell__kinetic-titles-MatrixMatthew.jpg","w":1920,"h":1080,"seconds":13.38,"use":"git clone https://github.com/bsewell/kinetic-titles\ncd kinetic-titles\nnpm install\nnpx remotion render src/index.ts MatrixMatthew out.mp4","takes":{"how":"props","what":["text"],"line":"Props: word, maskWord, passes[] {chars, gap, replace}, centerX, targetRowFrac, colSpacing and timing values. One component (MatrixStrand) with six sets of words. Colors and font are written in the file.","read":true}},{"id":"r0825","name":"Matrix Jose","job":"ground","video":"assets/remotion-catalog/825-bsewell__kinetic-titles-MatrixJose.mp4","poster":"assets/remotion-catalog/825-bsewell__kinetic-titles-MatrixJose.jpg","w":1920,"h":1080,"seconds":10.05,"use":"git clone https://github.com/bsewell/kinetic-titles\ncd kinetic-titles\nnpm install\nnpx remotion render src/index.ts MatrixJose out.mp4","takes":{"how":"props","what":["text"],"line":"Props: word, maskWord, passes[] {chars, gap, replace}, centerX, targetRowFrac, colSpacing and timing values. One component (MatrixStrand) with six sets of words. Colors and font are written in the file.","read":true}},{"id":"r0826","name":"Matrix Strand Bill","job":"ground","video":"assets/remotion-catalog/826-bsewell__kinetic-titles-MatrixStrand-Bill.mp4","poster":"assets/remotion-catalog/826-bsewell__kinetic-titles-MatrixStrand-Bill.jpg","w":1920,"h":1080,"seconds":13.38,"use":"git clone https://github.com/bsewell/kinetic-titles\ncd kinetic-titles\nnpm install\nnpx remotion render src/index.ts MatrixStrand-Bill out.mp4","takes":{"how":"props","what":["text"],"line":"Props: word, maskWord, passes[] {chars, gap, replace}, centerX, targetRowFrac, colSpacing and timing values. One component (MatrixStrand) with six sets of words. Colors and font are written in the file.","read":true}},{"id":"r0827","name":"Matrix Ken","job":"ground","video":"assets/remotion-catalog/827-bsewell__kinetic-titles-MatrixKen.mp4","poster":"assets/remotion-catalog/827-bsewell__kinetic-titles-MatrixKen.jpg","w":1920,"h":1080,"seconds":15.06,"use":"git clone https://github.com/bsewell/kinetic-titles\ncd kinetic-titles\nnpm install\nnpx remotion render src/index.ts MatrixKen out.mp4","takes":{"how":"props","what":["text"],"line":"Props: word, maskWord, passes[] {chars, gap, replace}, centerX, targetRowFrac, colSpacing and timing values. One component (MatrixStrand) with six sets of words. Colors and font are written in the file.","read":true}},{"id":"r0828","name":"Matrix Ed","job":"ground","video":"assets/remotion-catalog/828-bsewell__kinetic-titles-MatrixEd.mp4","poster":"assets/remotion-catalog/828-bsewell__kinetic-titles-MatrixEd.jpg","w":1920,"h":1080,"seconds":10.05,"use":"git clone https://github.com/bsewell/kinetic-titles\ncd kinetic-titles\nnpm install\nnpx remotion render src/index.ts MatrixEd out.mp4","takes":{"how":"props","what":["text"],"line":"Props: word, maskWord, passes[] {chars, gap, replace}, centerX, targetRowFrac, colSpacing and timing values. One component (MatrixStrand) with six sets of words. Colors and font are written in the file.","read":true}},{"id":"r0829","name":"Matrix Rain","job":"ground","video":"assets/remotion-catalog/829-bsewell__kinetic-titles-MatrixRain.mp4","poster":"assets/remotion-catalog/829-bsewell__kinetic-titles-MatrixRain.jpg","w":1920,"h":1080,"seconds":8.04,"use":"git clone https://github.com/bsewell/kinetic-titles\ncd kinetic-titles\nnpm install\nnpx remotion render src/index.ts MatrixRain out.mp4","takes":{"how":"edit the file","what":["colors"],"line":"No inputs. About 30 color values written in MatrixRain.tsx.","read":false}},{"id":"r0830","name":"Ski HUD","job":"title","video":"assets/remotion-catalog/830-bsewell__kinetic-titles-SkiHUD.mp4","poster":"assets/remotion-catalog/830-bsewell__kinetic-titles-SkiHUD.jpg","w":1920,"h":1080,"seconds":10.05,"use":"git clone https://github.com/bsewell/kinetic-titles\ncd kinetic-titles\nnpm install\nnpx remotion render src/index.ts SkiHUD out.mp4","takes":{"how":"edit the file","what":["colors","type","text","numbers"],"line":"No inputs. Four color constants and one font constant at the top of SkiHUD.tsx (CYAN, GREEN, ORANGE, WHITE, MONO), then the speed and altitude numbers as arrays; labels are in the JSX.","read":true}},{"id":"r0831","name":"Kinetic Slam","job":"title","video":"assets/remotion-catalog/831-bsewell__kinetic-titles-KineticSlam.mp4","poster":"assets/remotion-library/poster-r0831.jpg","w":1920,"h":1080,"seconds":3.05,"use":"git clone https://github.com/bsewell/kinetic-titles\ncd kinetic-titles\nnpm install\nnpx remotion render src/index.ts KineticSlam out.mp4","takes":{"how":"props","what":["text"],"line":"Prop: text. Colors and font (Arial Black) are written in the file.","read":true}},{"id":"r0832","name":"Kinetic Split","job":"title","video":"assets/remotion-catalog/832-bsewell__kinetic-titles-KineticSplit.mp4","poster":"assets/remotion-catalog/832-bsewell__kinetic-titles-KineticSplit.jpg","w":1920,"h":1080,"seconds":3.05,"use":"git clone https://github.com/bsewell/kinetic-titles\ncd kinetic-titles\nnpm install\nnpx remotion render src/index.ts KineticSplit out.mp4","takes":{"how":"props","what":["text"],"line":"Prop: text. Colors and font are written in the file.","read":false}},{"id":"r1125","name":"Kinetic Wave","job":"title","video":"assets/remotion-catalog/1125-bsewell__kinetic-titles-KineticWave.mp4","poster":"assets/remotion-catalog/1125-bsewell__kinetic-titles-KineticWave.jpg","w":1920,"h":1080,"seconds":4.05,"use":"git clone https://github.com/bsewell/kinetic-titles\ncd kinetic-titles\nnpm install\nnpx remotion render src/index.ts KineticWave out.mp4","takes":{"how":"props","what":["text"],"line":"Prop: text. Colors and font are written in the file.","read":false}},{"id":"r1126","name":"Kinetic Zoom","job":"title","video":"assets/remotion-catalog/1126-bsewell__kinetic-titles-KineticZoom.mp4","poster":"assets/remotion-catalog/1126-bsewell__kinetic-titles-KineticZoom.jpg","w":1920,"h":1080,"seconds":3.05,"use":"git clone https://github.com/bsewell/kinetic-titles\ncd kinetic-titles\nnpm install\nnpx remotion render src/index.ts KineticZoom out.mp4","takes":{"how":"props","what":["text"],"line":"Prop: words. Colors and font are written in the file.","read":false}},{"id":"r1127","name":"Kinetic Showcase","job":"title","video":"assets/remotion-catalog/1127-bsewell__kinetic-titles-KineticShowcase.mp4","poster":"assets/remotion-catalog/1127-bsewell__kinetic-titles-KineticShowcase.jpg","w":1920,"h":1080,"seconds":10.05,"use":"git clone https://github.com/bsewell/kinetic-titles\ncd kinetic-titles\nnpm install\nnpx remotion render src/index.ts KineticShowcase out.mp4","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No inputs. Words, colors and fonts are scattered through the JSX of KineticShowcase.tsx.","read":true}}]},{"name":"Monet-AI-Editor/Monet","url":"https://github.com/Monet-AI-Editor/Monet","licence":{"name":"MIT","basis":"licence file"},"line":"The video parts of an editor app: lower third, title card, animated captions, kinetic text.","hand_written":true,"shelf":"crew","jobs":["scene","title","caption"],"needs":{"remotion":"^4.0.457","packages":["@ai-sdk/anthropic","@ai-sdk/openai","@vitejs/plugin-react","electron-vite","openai","remotion","tailwindcss","vite"]},"pieces":[{"id":"r0189","name":"Brand Ad","job":"scene","video":"assets/remotion-catalog/189-Monet-AI-Editor__Monet-BrandAd.mp4","poster":"assets/remotion-catalog/189-Monet-AI-Editor__Monet-BrandAd.jpg","w":1920,"h":1080,"seconds":8.04,"use":"git clone https://github.com/Monet-AI-Editor/Monet\ncd Monet\nnpm install\nnpx remotion render remotion/src/index.ts BrandAd out.mp4","takes":{"how":"props","what":["colors","logo","text"],"line":"Props (zod schema): logoSrc (a file in public/), tagline, cta, backgroundColor, accentColor, textColor. The font is written in the file (system-ui); the button text color is one inline hex.","read":true}},{"id":"r0190","name":"Paper Canvas","job":"scene","video":"assets/remotion-catalog/190-Monet-AI-Editor__Monet-PaperCanvas.mp4","poster":"assets/remotion-catalog/190-Monet-AI-Editor__Monet-PaperCanvas.jpg","w":1920,"h":1080,"seconds":10.05,"use":"git clone https://github.com/Monet-AI-Editor/Monet\ncd Monet\nnpm install\nnpx remotion render remotion/src/index.ts PaperCanvas out.mp4","takes":{"how":"props","what":["colors"],"line":"Props (zod schema): script, backgroundColor.","read":false}},{"id":"r0191","name":"Physics Scene","job":"scene","video":"assets/remotion-catalog/191-Monet-AI-Editor__Monet-PhysicsScene.mp4","poster":"assets/remotion-catalog/191-Monet-AI-Editor__Monet-PhysicsScene.jpg","w":1920,"h":1080,"seconds":10.05,"use":"git clone https://github.com/Monet-AI-Editor/Monet\ncd Monet\nnpm install\nnpx remotion render remotion/src/index.ts PhysicsScene out.mp4","takes":{"how":"props","what":["colors"],"line":"Props (zod schema): setupScript, backgroundColor, wireframes, showVelocity.","read":false}},{"id":"r0192","name":"Title Card","job":"title","video":"assets/remotion-catalog/192-Monet-AI-Editor__Monet-TitleCard.mp4","poster":"assets/remotion-catalog/192-Monet-AI-Editor__Monet-TitleCard.jpg","w":1920,"h":1080,"seconds":5.06,"use":"git clone https://github.com/Monet-AI-Editor/Monet\ncd Monet\nnpm install\nnpx remotion render remotion/src/index.ts TitleCard out.mp4","takes":{"how":"props","what":["colors","text"],"line":"Props (zod schema): title, subtitle, backgroundColor, textColor, accentColor. The font is written in the file (system-ui, two places).","read":true}},{"id":"r0195","name":"Animated Captions","job":"caption","video":"assets/remotion-catalog/195-Monet-AI-Editor__Monet-AnimatedCaptions.mp4","poster":"assets/remotion-catalog/195-Monet-AI-Editor__Monet-AnimatedCaptions.jpg","w":1920,"h":1080,"seconds":10.05,"use":"git clone https://github.com/Monet-AI-Editor/Monet\ncd Monet\nnpm install\nnpx remotion render remotion/src/index.ts AnimatedCaptions out.mp4","takes":{"how":"props","what":["colors","text"],"line":"Props (zod schema): words[] {word, startFrame, endFrame}, textColor, highlightColor, fontSize, position. The font is written in the file (system-ui).","read":true}},{"id":"r0196","name":"Kinetic Text","job":"title","video":"assets/remotion-catalog/196-Monet-AI-Editor__Monet-KineticText.mp4","poster":"assets/remotion-catalog/196-Monet-AI-Editor__Monet-KineticText.jpg","w":1920,"h":1080,"seconds":6.06,"use":"git clone https://github.com/Monet-AI-Editor/Monet\ncd Monet\nnpm install\nnpx remotion render remotion/src/index.ts KineticText out.mp4","takes":{"how":"props","what":["colors","text"],"line":"Props (zod schema): text, backgroundColor, textColor, accentColor, fontSize, staggerFrames, animationStyle (rise, fall, scale, blur). The font is written in the file (system-ui).","read":true}},{"id":"r0197","name":"Html In Canvas Glitch","job":"scene","video":"assets/remotion-catalog/197-Monet-AI-Editor__Monet-HtmlInCanvasGlitch.mp4","poster":"assets/remotion-catalog/197-Monet-AI-Editor__Monet-HtmlInCanvasGlitch.jpg","w":1920,"h":1080,"seconds":6.06,"use":"git clone https://github.com/Monet-AI-Editor/Monet\ncd Monet\nnpm install\nnpx remotion render remotion/src/index.ts HtmlInCanvasGlitch out.mp4","takes":{"how":"props","what":["colors","text"],"line":"Props (zod schema): title, subtitle, backgroundColor, textColor, accentColor, glitchIntensity.","read":false}}]},{"name":"OpenAnalystInc/10x-Brolls","url":"https://github.com/OpenAnalystInc/10x-Brolls","licence":{"name":"MIT","basis":"README"},"line":"B-roll inserts ready to drop between shots: logo reveal, YouTube intro, text slide, highlight reel.","hand_written":true,"shelf":"crew","jobs":["title","scene","logo"],"needs":{"remotion":"^4.0.414","packages":["remotion","zod"]},"pieces":[{"id":"r0601","name":"Branded intro","job":"title","video":"assets/remotion-catalog/601-OpenAnalystInc__10x-Brolls-branded-intro.mp4","poster":"assets/remotion-catalog/601-OpenAnalystInc__10x-Brolls-branded-intro.jpg","w":1920,"h":1080,"seconds":3,"use":"git clone https://github.com/OpenAnalystInc/10x-Brolls\ncd 10x-Brolls\nnpm install\nnpx remotion render src/index.ts branded-intro out.mp4","takes":{"how":"props","what":["colors","type","logo","text"],"line":"Props (zod schema): title, subtitle, primaryColor, secondaryColor, backgroundColor, textColor, fontFamily, logoUrl, animationStyle. One component (BrandedIntro) registered at four sizes.","read":true}},{"id":"r0602","name":"Logo reveal","job":"logo","video":"assets/remotion-library/r0602-lej.mp4","poster":"assets/remotion-library/r0602-lej-poster.jpg","w":1920,"h":1080,"seconds":3,"use":"git clone https://github.com/OpenAnalystInc/10x-Brolls\ncd 10x-Brolls\nnpm install\nnpx remotion render src/index.ts logo-reveal out.mp4","takes":{"how":"props","what":["colors","logo","text"],"line":"Props (zod schema): logoUrl, backgroundColor, accentColor, animationDuration, showTagline, tagline, taglineColor.","read":true}},{"id":"r0603","name":"Text slide","job":"title","video":"assets/remotion-catalog/603-OpenAnalystInc__10x-Brolls-text-slide.mp4","poster":"assets/remotion-catalog/603-OpenAnalystInc__10x-Brolls-text-slide.jpg","w":1920,"h":1080,"seconds":5,"use":"git clone https://github.com/OpenAnalystInc/10x-Brolls\ncd 10x-Brolls\nnpm install\nnpx remotion render src/index.ts text-slide out.mp4","takes":{"how":"props","what":["colors","type","text"],"line":"Props (zod schema): title, content, backgroundColor, textColor, accentColor, fontFamily, titleSize, contentSize, alignment.","read":true}},{"id":"r0604","name":"Seo analytics promo","job":"scene","video":"assets/remotion-catalog/604-OpenAnalystInc__10x-Brolls-seo-analytics-promo.mp4","poster":"assets/remotion-catalog/604-OpenAnalystInc__10x-Brolls-seo-analytics-promo.jpg","w":1920,"h":1080,"seconds":21,"use":"git clone https://github.com/OpenAnalystInc/10x-Brolls\ncd 10x-Brolls\nnpm install\nnpx remotion render src/index.ts seo-analytics-promo out.mp4","takes":{"how":"props","what":["colors","text"],"line":"Props (zod schema, color pickers): about 15 text fields (hookWord1, hookFull, cardHeader, cardBody, query1, stat1Title, insight, outroLine1 and more), primaryColor, accentColor, backgroundColor, textColor, gradientStart, gradientEnd. Some shades are still written in the file.","read":true}},{"id":"r0605","name":"Kinetic highlight reel","job":"title","video":"assets/remotion-catalog/605-OpenAnalystInc__10x-Brolls-kinetic-highlight-reel.mp4","poster":"assets/remotion-catalog/605-OpenAnalystInc__10x-Brolls-kinetic-highlight-reel.jpg","w":1920,"h":1080,"seconds":30,"use":"git clone https://github.com/OpenAnalystInc/10x-Brolls\ncd 10x-Brolls\nnpm install\nnpx remotion render src/index.ts kinetic-highlight-reel out.mp4","takes":{"how":"props","what":["colors","text"],"line":"Props (zod schema, color pickers): the words of each scene (scene1Text, scene1Highlight, scene3Brand, scene5Number and more), primaryColor, secondaryColor, backgroundColor, textColor, accentColor. The font (Inter) is loaded in the file.","read":true}},{"id":"r0606","name":"Youtube intro","job":"title","video":"assets/remotion-catalog/606-OpenAnalystInc__10x-Brolls-youtube-intro.mp4","poster":"assets/remotion-catalog/606-OpenAnalystInc__10x-Brolls-youtube-intro.jpg","w":1920,"h":1080,"seconds":3,"use":"git clone https://github.com/OpenAnalystInc/10x-Brolls\ncd 10x-Brolls\nnpm install\nnpx remotion render src/index.ts youtube-intro out.mp4","takes":{"how":"props","what":["colors","type","logo","text"],"line":"Props (zod schema): title, subtitle, primaryColor, secondaryColor, backgroundColor, textColor, fontFamily, logoUrl, animationStyle. One component (BrandedIntro) registered at four sizes.","read":true}},{"id":"r0607","name":"Instagram square","job":"scene","video":"assets/remotion-catalog/607-OpenAnalystInc__10x-Brolls-instagram-square.mp4","poster":"assets/remotion-catalog/607-OpenAnalystInc__10x-Brolls-instagram-square.jpg","w":1080,"h":1080,"seconds":3,"use":"git clone https://github.com/OpenAnalystInc/10x-Brolls\ncd 10x-Brolls\nnpm install\nnpx remotion render src/index.ts instagram-square out.mp4","takes":{"how":"props","what":["colors","type","logo","text"],"line":"Props (zod schema): title, subtitle, primaryColor, secondaryColor, backgroundColor, textColor, fontFamily, logoUrl, animationStyle. One component (BrandedIntro) registered at four sizes.","read":true}},{"id":"r0608","name":"Twitter video","job":"scene","video":"assets/remotion-catalog/608-OpenAnalystInc__10x-Brolls-twitter-video.mp4","poster":"assets/remotion-catalog/608-OpenAnalystInc__10x-Brolls-twitter-video.jpg","w":1280,"h":720,"seconds":3,"use":"git clone https://github.com/OpenAnalystInc/10x-Brolls\ncd 10x-Brolls\nnpm install\nnpx remotion render src/index.ts twitter-video out.mp4","takes":{"how":"props","what":["colors","type","logo","text"],"line":"Props (zod schema): title, subtitle, primaryColor, secondaryColor, backgroundColor, textColor, fontFamily, logoUrl, animationStyle. One component (BrandedIntro) registered at four sizes.","read":true}}]},{"name":"neutral-Stage/remotion-captioneer","url":"https://github.com/neutral-Stage/remotion-captioneer","licence":{"name":"MIT","basis":"licence file"},"line":"Captions that light each word as it is spoken. Four styles, as a library.","hand_written":true,"shelf":"crew","jobs":["caption"],"needs":{"remotion":"4.0.438","packages":["remotion"]},"pieces":[{"id":"r0177","name":"Word highlight","job":"caption","video":"assets/remotion-catalog/177-neutral-Stage__remotion-captioneer-candidate-captioneer-word-highlight.mp4","poster":"assets/remotion-library/poster-r0177.jpg","w":1920,"h":1080,"seconds":3.05,"use":"npm install remotion-captioneer\n# then import the part you want; the README at https://github.com/neutral-Stage/remotion-captioneer lists them","takes":{"how":"props","what":["colors","type","text"],"line":"Import AnimatedCaptions. Props: captions (word timings), style (word-highlight, karaoke, typewriter and 11 more), fontFamily, fontSize, fontColor, highlightColor, position. The demo composition fixes its colors in CaptionShowcase.tsx and its words in Root.tsx.","read":true}},{"id":"r0178","name":"Karaoke","job":"caption","video":"assets/remotion-catalog/178-neutral-Stage__remotion-captioneer-candidate-captioneer-karaoke.mp4","poster":"assets/remotion-catalog/178-neutral-Stage__remotion-captioneer-candidate-captioneer-karaoke.jpg","w":1920,"h":1080,"seconds":3.05,"use":"npm install remotion-captioneer\n# then import the part you want; the README at https://github.com/neutral-Stage/remotion-captioneer lists them","takes":{"how":"props","what":["colors","type","text"],"line":"Import AnimatedCaptions. Props: captions (word timings), style (word-highlight, karaoke, typewriter and 11 more), fontFamily, fontSize, fontColor, highlightColor, position. The demo composition fixes its colors in CaptionShowcase.tsx and its words in Root.tsx.","read":true}},{"id":"r0179","name":"Typewriter","job":"caption","video":"assets/remotion-catalog/179-neutral-Stage__remotion-captioneer-candidate-captioneer-typewriter.mp4","poster":"assets/remotion-catalog/179-neutral-Stage__remotion-captioneer-candidate-captioneer-typewriter.jpg","w":1920,"h":1080,"seconds":3.05,"use":"npm install remotion-captioneer\n# then import the part you want; the README at https://github.com/neutral-Stage/remotion-captioneer lists them","takes":{"how":"props","what":["colors","type","text"],"line":"Import AnimatedCaptions. Props: captions (word timings), style (word-highlight, karaoke, typewriter and 11 more), fontFamily, fontSize, fontColor, highlightColor, position. The demo composition fixes its colors in CaptionShowcase.tsx and its words in Root.tsx.","read":true}}]},{"name":"tsensei/WTF-Does-This-Company-Actually-Do","url":"https://github.com/tsensei/WTF-Does-This-Company-Actually-Do","licence":{"name":"MIT","basis":"README"},"line":"A funny explainer: a terminal reads a company's website and says what the company actually does.","hand_written":true,"shelf":"crew","jobs":["scene"],"needs":{"remotion":"^4.0.438","packages":["@anthropic-ai/sdk","@tailwindcss/postcss","eslint-config-next","next","remotion","tailwind-merge","tailwindcss","zod"]},"pieces":[{"id":"r0698","name":"Main Video","job":"scene","video":"assets/remotion-catalog/698-tsensei__WTF-Does-This-Company-Actually-Do__product-video-MainVideo.mp4","poster":"assets/remotion-catalog/698-tsensei__WTF-Does-This-Company-Actually-Do__product-video-MainVideo.jpg","w":1920,"h":1080,"seconds":66.05,"use":"git clone https://github.com/tsensei/WTF-Does-This-Company-Actually-Do\ncd WTF-Does-This-Company-Actually-Do/product-video\nnpm install\nnpx remotion render src/index.ts MainVideo out.mp4","takes":{"how":"edit the file","what":["text"],"line":"No inputs. The script is a data file (src/data/roast-data); the piece strings together six scene files, and the colors are in those (not opened).","read":true}}]},{"name":"lacymorrow/marketing-videos","url":"https://github.com/lacymorrow/marketing-videos","licence":{"name":"MIT","basis":"README"},"line":"A full set of product-launch scenes: 3D cubes, a flow field, features, social proof, an app demo.","hand_written":true,"shelf":"product","jobs":["scene","transition"],"needs":{"remotion":"^4.0.432","packages":["@react-three/fiber","@tailwindcss/postcss","remotion","tailwindcss","three"]},"pieces":[{"id":"r0558","name":"Lacy Shell Hero","job":"scene","video":"assets/remotion-catalog/558-lacymorrow__marketing-videos-LacyShell-Hero.mp4","poster":"assets/remotion-catalog/558-lacymorrow__marketing-videos-LacyShell-Hero.jpg","w":1920,"h":1080,"seconds":16.04,"use":"git clone https://github.com/lacymorrow/marketing-videos\ncd marketing-videos\nnpm install\nnpx remotion render src/index.ts LacyShell-Hero out.mp4","takes":{"how":"props","what":["colors"],"line":"Props: accentColor, accentColor2, backgroundColor. The words on screen are written in LacyHero.tsx; fonts come from src/lib/brand.ts (typography), shared by every template.","read":true}},{"id":"r0559","name":"Lacy Shell 3D Cubes","job":"scene","video":"assets/remotion-catalog/559-lacymorrow__marketing-videos-LacyShell-3D-Cubes.mp4","poster":"assets/remotion-catalog/559-lacymorrow__marketing-videos-LacyShell-3D-Cubes.jpg","w":1920,"h":1080,"seconds":12.05,"use":"git clone https://github.com/lacymorrow/marketing-videos\ncd marketing-videos\nnpm install\nnpx remotion render src/index.ts LacyShell-3D-Cubes out.mp4","takes":{"how":"props","what":["colors"],"line":"Props: accentColor, accentColor2, backgroundColor, scene. Words are written in the file; fonts come from src/lib/brand.ts.","read":false}},{"id":"r0560","name":"Lacy Shell 3D Sphere","job":"scene","video":"assets/remotion-catalog/560-lacymorrow__marketing-videos-LacyShell-3D-Sphere.mp4","poster":"assets/remotion-catalog/560-lacymorrow__marketing-videos-LacyShell-3D-Sphere.jpg","w":1920,"h":1080,"seconds":12.05,"use":"git clone https://github.com/lacymorrow/marketing-videos\ncd marketing-videos\nnpm install\nnpx remotion render src/index.ts LacyShell-3D-Sphere out.mp4","takes":{"how":"props","what":["colors"],"line":"Props: accentColor, accentColor2, backgroundColor, scene. Words are written in the file; fonts come from src/lib/brand.ts.","read":false}},{"id":"r0561","name":"Lacy Shell Flow Field","job":"scene","video":"assets/remotion-catalog/561-lacymorrow__marketing-videos-LacyShell-FlowField.mp4","poster":"assets/remotion-catalog/561-lacymorrow__marketing-videos-LacyShell-FlowField.jpg","w":1920,"h":1080,"seconds":16.04,"use":"git clone https://github.com/lacymorrow/marketing-videos\ncd marketing-videos\nnpm install\nnpx remotion render src/index.ts LacyShell-FlowField out.mp4","takes":{"how":"props","what":["colors"],"line":"Props: accentColor, accentColor2, backgroundColor. Words are written in the file; fonts come from src/lib/brand.ts.","read":false}},{"id":"r0562","name":"Lacy Shell Svg Morph","job":"transition","video":"assets/remotion-catalog/562-lacymorrow__marketing-videos-LacyShell-SvgMorph.mp4","poster":"assets/remotion-catalog/562-lacymorrow__marketing-videos-LacyShell-SvgMorph.jpg","w":1920,"h":1080,"seconds":14.06,"use":"git clone https://github.com/lacymorrow/marketing-videos\ncd marketing-videos\nnpm install\nnpx remotion render src/index.ts LacyShell-SvgMorph out.mp4","takes":{"how":"props","what":["colors"],"line":"Props: accentColor, accentColor2, backgroundColor. Words are written in LacySvgMorph.tsx; fonts come from src/lib/brand.ts.","read":true}},{"id":"r0563","name":"Lacy Shell Launch","job":"scene","video":"assets/remotion-catalog/563-lacymorrow__marketing-videos-LacyShell-Launch.mp4","poster":"assets/remotion-catalog/563-lacymorrow__marketing-videos-LacyShell-Launch.jpg","w":1920,"h":1080,"seconds":10.05,"use":"git clone https://github.com/lacymorrow/marketing-videos\ncd marketing-videos\nnpm install\nnpx remotion render src/index.ts LacyShell-Launch out.mp4","takes":{"how":"props","what":["colors","logo","text"],"line":"Props: productName, tagline, features[], ctaText, brandColor, accentColor, logoUrl, websiteUrl. Fonts come from src/lib/brand.ts (typography), shared by every template.","read":true}},{"id":"r0564","name":"Lacy Shell Features","job":"scene","video":"assets/remotion-catalog/564-lacymorrow__marketing-videos-LacyShell-Features.mp4","poster":"assets/remotion-catalog/564-lacymorrow__marketing-videos-LacyShell-Features.jpg","w":1920,"h":1080,"seconds":14.06,"use":"git clone https://github.com/lacymorrow/marketing-videos\ncd marketing-videos\nnpm install\nnpx remotion render src/index.ts LacyShell-Features out.mp4","takes":{"how":"props","what":["colors","text"],"line":"Props: productName, features, brandColor, accentColor. Fonts come from src/lib/brand.ts.","read":false}},{"id":"r0565","name":"Lacy Shell Social","job":"scene","video":"assets/remotion-catalog/565-lacymorrow__marketing-videos-LacyShell-Social.mp4","poster":"assets/remotion-catalog/565-lacymorrow__marketing-videos-LacyShell-Social.jpg","w":1920,"h":1080,"seconds":9.05,"use":"git clone https://github.com/lacymorrow/marketing-videos\ncd marketing-videos\nnpm install\nnpx remotion render src/index.ts LacyShell-Social out.mp4","takes":{"how":"props","what":["colors","text","numbers"],"line":"Props: productName, stats, testimonial, brandColor. Fonts come from src/lib/brand.ts.","read":false}},{"id":"r0566","name":"Lacy Shell Demo","job":"scene","video":"assets/remotion-catalog/566-lacymorrow__marketing-videos-LacyShell-Demo.mp4","poster":"assets/remotion-catalog/566-lacymorrow__marketing-videos-LacyShell-Demo.jpg","w":1920,"h":1080,"seconds":10.05,"use":"git clone https://github.com/lacymorrow/marketing-videos\ncd marketing-videos\nnpm install\nnpx remotion render src/index.ts LacyShell-Demo out.mp4","takes":{"how":"props","what":["colors","text","pictures"],"line":"Props: productName, tagline, screenshotUrl, steps, brandColor, accentColor. Fonts come from src/lib/brand.ts.","read":false}},{"id":"r0567","name":"Product Launch","job":"scene","video":"assets/remotion-catalog/567-lacymorrow__marketing-videos-ProductLaunch.mp4","poster":"assets/remotion-catalog/567-lacymorrow__marketing-videos-ProductLaunch.jpg","w":1920,"h":1080,"seconds":10.05,"use":"git clone https://github.com/lacymorrow/marketing-videos\ncd marketing-videos\nnpm install\nnpx remotion render src/index.ts ProductLaunch out.mp4","takes":{"how":"props","what":["colors","logo","text"],"line":"Props: productName, tagline, features[], ctaText, brandColor, accentColor, logoUrl, websiteUrl. Fonts come from src/lib/brand.ts (typography), shared by every template.","read":true}},{"id":"r0568","name":"Feature Showcase","job":"scene","video":"assets/remotion-catalog/568-lacymorrow__marketing-videos-FeatureShowcase.mp4","poster":"assets/remotion-catalog/568-lacymorrow__marketing-videos-FeatureShowcase.jpg","w":1920,"h":1080,"seconds":12.05,"use":"git clone https://github.com/lacymorrow/marketing-videos\ncd marketing-videos\nnpm install\nnpx remotion render src/index.ts FeatureShowcase out.mp4","takes":{"how":"props","what":["colors","text"],"line":"Props: productName, features, brandColor, accentColor. Fonts come from src/lib/brand.ts.","read":false}},{"id":"r0569","name":"Social Proof","job":"scene","video":"assets/remotion-catalog/569-lacymorrow__marketing-videos-SocialProof.mp4","poster":"assets/remotion-catalog/569-lacymorrow__marketing-videos-SocialProof.jpg","w":1920,"h":1080,"seconds":9.05,"use":"git clone https://github.com/lacymorrow/marketing-videos\ncd marketing-videos\nnpm install\nnpx remotion render src/index.ts SocialProof out.mp4","takes":{"how":"props","what":["colors","text","numbers"],"line":"Props: productName, stats, testimonial, brandColor. Fonts come from src/lib/brand.ts.","read":false}},{"id":"r0570","name":"App Demo","job":"scene","video":"assets/remotion-catalog/570-lacymorrow__marketing-videos-AppDemo.mp4","poster":"assets/remotion-catalog/570-lacymorrow__marketing-videos-AppDemo.jpg","w":1920,"h":1080,"seconds":10.05,"use":"git clone https://github.com/lacymorrow/marketing-videos\ncd marketing-videos\nnpm install\nnpx remotion render src/index.ts AppDemo out.mp4","takes":{"how":"props","what":["colors","text","pictures"],"line":"Props: productName, tagline, screenshotUrl, steps, brandColor, accentColor. Fonts come from src/lib/brand.ts.","read":false}}]},{"name":"zz41354899/SwiftClip","url":"https://github.com/zz41354899/SwiftClip","licence":{"name":"MIT","basis":"licence file"},"line":"A small product promo pack: brand reveal, metric tiles, code reveal, lower third, tutorial intro.","hand_written":true,"shelf":"product","jobs":["scene","number","chart","lower third"],"needs":{"remotion":"^4.0.455","packages":["@axe-core/playwright","@playwright/test","eslint-config-next","framer-motion","next","remotion","tailwind-merge","tailwindcss"]},"pieces":[{"id":"r0615","name":"Product Launch","job":"scene","video":"assets/remotion-catalog/615-zz41354899_SwiftClip-ProductLaunch.mp4","poster":"assets/remotion-catalog/615-zz41354899_SwiftClip-ProductLaunch.jpg","w":1920,"h":1080,"seconds":5.06,"use":"# see the source for how to run it\nhttps://github.com/zz41354899/SwiftClip","takes":{"how":"props","what":["text"],"line":"Props: headline (or title), subheadline (or subtitle). Colors and font are written in ProductLaunch.tsx.","read":true}},{"id":"r0617","name":"Saa SPromo","job":"scene","video":"assets/remotion-catalog/617-zz41354899_SwiftClip-SaaSPromo.mp4","poster":"assets/remotion-catalog/617-zz41354899_SwiftClip-SaaSPromo.jpg","w":1920,"h":1080,"seconds":5.06,"use":"# see the source for how to run it\nhttps://github.com/zz41354899/SwiftClip","takes":{"how":"props","what":["text"],"line":"Props: headline, featureItems[] (or features). About 12 color values and the font are written in SaaSPromo.tsx.","read":true}},{"id":"r0618","name":"Social Story","job":"scene","video":"assets/remotion-catalog/618-zz41354899_SwiftClip-SocialStory.mp4","poster":"assets/remotion-catalog/618-zz41354899_SwiftClip-SocialStory.jpg","w":1080,"h":1920,"seconds":5.06,"use":"# see the source for how to run it\nhttps://github.com/zz41354899/SwiftClip","takes":{"how":"props","what":["text"],"line":"Props: headline, subheadline (or subline), brandHandle (or handle). Colors and font are written in SocialStory.tsx.","read":true}},{"id":"r0619","name":"Data Viz","job":"chart","video":"assets/remotion-catalog/619-zz41354899_SwiftClip-DataViz.mp4","poster":"assets/remotion-catalog/619-zz41354899_SwiftClip-DataViz.jpg","w":1920,"h":1080,"seconds":5.06,"use":"# see the source for how to run it\nhttps://github.com/zz41354899/SwiftClip","takes":{"how":"edit the file","what":["colors","type","text","numbers"],"line":"No inputs. The title, the 75% figure, ten color values and the system font are written in the JSX of DataViz.tsx (39 lines).","read":true}},{"id":"r0620","name":"Lower Third","job":"lower third","video":"assets/remotion-library/r0620-lej.mp4","poster":"assets/remotion-library/r0620-lej-poster.jpg","w":1920,"h":1080,"seconds":5.06,"use":"# see the source for how to run it\nhttps://github.com/zz41354899/SwiftClip","takes":{"how":"props","what":["text"],"line":"Props: headline (or name), subheadline (or title). The five colors and the system font are written in LowerThird.tsx (32 lines). Registered with no default props, so it falls back to a sample name.","read":true}},{"id":"r0621","name":"Brand Reveal","job":"scene","video":"assets/remotion-catalog/621-zz41354899_SwiftClip-BrandReveal.mp4","poster":"assets/remotion-catalog/621-zz41354899_SwiftClip-BrandReveal.jpg","w":1920,"h":1080,"seconds":5.06,"use":"# see the source for how to run it\nhttps://github.com/zz41354899/SwiftClip","takes":{"how":"props","what":["colors","text"],"line":"Props: brandName (or title), tagline (or subtitle), accentColor (or color). The mark is a fixed icon from an icon package, not an image slot; other colors and the system font are written in the file.","read":true}},{"id":"r0622","name":"Metric Dashboard","job":"number","video":"assets/remotion-catalog/622-zz41354899_SwiftClip-MetricDashboard.mp4","poster":"assets/remotion-catalog/622-zz41354899_SwiftClip-MetricDashboard.jpg","w":1920,"h":1080,"seconds":5.06,"use":"# see the source for how to run it\nhttps://github.com/zz41354899/SwiftClip","takes":{"how":"edit the file","what":["colors","type","text","numbers"],"line":"No inputs. Figures, labels and colors are written in MetricDashboard.tsx (26 lines).","read":true}},{"id":"r0623","name":"Bar Chart","job":"number","video":"assets/remotion-catalog/623-zz41354899_SwiftClip-BarChart.mp4","poster":"assets/remotion-catalog/623-zz41354899_SwiftClip-BarChart.jpg","w":1920,"h":1080,"seconds":5.06,"use":"# see the source for how to run it\nhttps://github.com/zz41354899/SwiftClip","takes":{"how":"edit the file","what":["colors","type","text","numbers"],"line":"No inputs. The title, bar values, ten color values and the system font are written in BarChart.tsx (65 lines).","read":true}},{"id":"r0624","name":"Code Reveal","job":"code","video":"assets/remotion-catalog/624-zz41354899_SwiftClip-CodeReveal.mp4","poster":"assets/remotion-catalog/624-zz41354899_SwiftClip-CodeReveal.jpg","w":1920,"h":1080,"seconds":5.06,"use":"# see the source for how to run it\nhttps://github.com/zz41354899/SwiftClip","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No inputs. Words and colors (15 and 26 values) are written in the file.","read":false}},{"id":"r0625","name":"Ai Animation","job":"scene","video":"assets/remotion-catalog/625-zz41354899_SwiftClip-AiAnimation.mp4","poster":"assets/remotion-catalog/625-zz41354899_SwiftClip-AiAnimation.jpg","w":1920,"h":1080,"seconds":5.06,"use":"# see the source for how to run it\nhttps://github.com/zz41354899/SwiftClip","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No inputs. Words and colors (15 and 26 values) are written in the file.","read":false}}]},{"name":"Hainrixz/editor-pro-max","url":"https://github.com/Hainrixz/editor-pro-max","licence":{"name":"MIT","basis":"licence file"},"line":"A general template pack: showcase, before and after, testimonial, announcement, presentation.","hand_written":true,"shelf":"product","jobs":["scene","caption","quote","compare"],"needs":{"remotion":"4.0.440","packages":["fluent-ffmpeg","remotion","zod"]},"pieces":[{"id":"r0181","name":"Showcase","job":"scene","video":"assets/remotion-catalog/181-Hainrixz__editor-pro-max-Showcase.mp4","poster":"assets/remotion-catalog/181-Hainrixz__editor-pro-max-Showcase.jpg","w":1920,"h":1080,"seconds":10.05,"use":"git clone https://github.com/Hainrixz/editor-pro-max\ncd editor-pro-max\nnpm install\nnpx remotion render src/index.ts Showcase out.mp4","takes":{"how":"tokens","what":["colors","type"],"line":"No inputs. Colors come from BRAND in src/presets/brand.ts (5 colors, plus name, handle and watermark text) and fonts from src/presets/fonts.ts; one extra shade and the words are written in Showcase.tsx.","read":true}},{"id":"r0182","name":"Tik Tok","job":"caption","video":"assets/remotion-catalog/182-Hainrixz__editor-pro-max-TikTok.mp4","poster":"assets/remotion-catalog/182-Hainrixz__editor-pro-max-TikTok.jpg","w":1080,"h":1920,"seconds":9.05,"use":"git clone https://github.com/Hainrixz/editor-pro-max\ncd editor-pro-max\nnpm install\nnpx remotion render src/index.ts TikTok out.mp4","takes":{"how":"props","what":["colors","text"],"line":"Props: hook, body, cta, backgroundColors[], accentColor, textColor. Defaults, the watermark handle and fonts come from src/presets/brand.ts and src/presets/fonts.ts.","read":true}},{"id":"r0183","name":"Presentation","job":"scene","video":"assets/remotion-catalog/183-Hainrixz__editor-pro-max-Presentation.mp4","poster":"assets/remotion-catalog/183-Hainrixz__editor-pro-max-Presentation.jpg","w":1920,"h":1080,"seconds":15.06,"use":"git clone https://github.com/Hainrixz/editor-pro-max\ncd editor-pro-max\nnpm install\nnpx remotion render src/index.ts Presentation out.mp4","takes":{"how":"props","what":["colors","text"],"line":"Props: slides, framesPerSlide, backgroundColors, accentColor, titleColor, bodyColor. Defaults and fonts come from src/presets/brand.ts and fonts.ts.","read":false}},{"id":"r0184","name":"Testimonial","job":"quote","video":"assets/remotion-catalog/184-Hainrixz__editor-pro-max-Testimonial.mp4","poster":"assets/remotion-catalog/184-Hainrixz__editor-pro-max-Testimonial.jpg","w":1920,"h":1080,"seconds":6.06,"use":"git clone https://github.com/Hainrixz/editor-pro-max\ncd editor-pro-max\nnpm install\nnpx remotion render src/index.ts Testimonial out.mp4","takes":{"how":"props","what":["colors","text","pictures"],"line":"Props: quote, author, role, avatarSrc, backgroundColors[], accentColor. Defaults, the watermark handle and fonts come from src/presets/brand.ts and src/presets/fonts.ts.","read":true}},{"id":"r0185","name":"Announcement","job":"scene","video":"assets/remotion-catalog/185-Hainrixz__editor-pro-max-Announcement.mp4","poster":"assets/remotion-catalog/185-Hainrixz__editor-pro-max-Announcement.jpg","w":1920,"h":1080,"seconds":10.05,"use":"git clone https://github.com/Hainrixz/editor-pro-max\ncd editor-pro-max\nnpm install\nnpx remotion render src/index.ts Announcement out.mp4","takes":{"how":"props","what":["colors","text"],"line":"Props: preTitle, title, subtitle, cta, ctaSubtext, backgroundColors, accentColor. Defaults and fonts come from src/presets/brand.ts and fonts.ts.","read":false}},{"id":"r0186","name":"Before After","job":"compare","video":"assets/remotion-catalog/186-Hainrixz__editor-pro-max-BeforeAfter.mp4","poster":"assets/remotion-catalog/186-Hainrixz__editor-pro-max-BeforeAfter.jpg","w":1920,"h":1080,"seconds":6.06,"use":"git clone https://github.com/Hainrixz/editor-pro-max\ncd editor-pro-max\nnpm install\nnpx remotion render src/index.ts BeforeAfter out.mp4","takes":{"how":"edit the file","what":["colors","text"],"line":"The demo composition takes no inputs: two labels and five colors are written in BeforeAfterDemo.tsx (20 lines). It wraps the kit's BeforeAfter template, which does take props.","read":true}}]},{"name":"bennyblanco4/domain-generator-next-opensource","url":"https://github.com/bennyblanco4/domain-generator-next-opensource","licence":{"name":"MIT","basis":"licence file"},"line":"A product page shown inside a laptop, plus launch and announcement scenes.","hand_written":true,"shelf":"product","jobs":["scene"],"needs":{"remotion":"^4.0.407","packages":["@tailwindcss/postcss","eslint-config-next","framer-motion","next","next-auth","next-themes","recharts","remotion"]},"pieces":[{"id":"r0444","name":"Example","job":"scene","video":"assets/remotion-catalog/444-bennyblanco4__domain-generator-next-opensource-Example.mp4","poster":"assets/remotion-catalog/444-bennyblanco4__domain-generator-next-opensource-Example.jpg","w":1920,"h":1080,"seconds":5.06,"use":"git clone https://github.com/bennyblanco4/domain-generator-next-opensource\ncd domain-generator-next-opensource\nnpm install\nnpx remotion render src/remotion/index.ts Example out.mp4","takes":{"how":"edit the file","what":["colors","text"],"line":"No inputs. Two lines of text and three colors written in Example.tsx.","read":true}},{"id":"r0445","name":"Marketing Video","job":"scene","video":"assets/remotion-catalog/445-bennyblanco4__domain-generator-next-opensource-MarketingVideo.mp4","poster":"assets/remotion-catalog/445-bennyblanco4__domain-generator-next-opensource-MarketingVideo.jpg","w":1920,"h":1080,"seconds":20.05,"use":"git clone https://github.com/bennyblanco4/domain-generator-next-opensource\ncd domain-generator-next-opensource\nnpm install\nnpx remotion render src/remotion/index.ts MarketingVideo out.mp4","takes":{"how":"edit the file","what":["colors","text"],"line":"No inputs. A 30-line file that strings together three scene components; the words and colors are inside those components.","read":true}},{"id":"r0446","name":"Modern Marketing Video","job":"scene","video":"assets/remotion-catalog/446-bennyblanco4__domain-generator-next-opensource-ModernMarketingVideo.mp4","poster":"assets/remotion-catalog/446-bennyblanco4__domain-generator-next-opensource-ModernMarketingVideo.jpg","w":1920,"h":1080,"seconds":15.06,"use":"git clone https://github.com/bennyblanco4/domain-generator-next-opensource\ncd domain-generator-next-opensource\nnpm install\nnpx remotion render src/remotion/index.ts ModernMarketingVideo out.mp4","takes":{"how":"edit the file","what":["colors","text"],"line":"No inputs. A 30-line file that strings together three scene components; the words and colors are inside those components.","read":true}},{"id":"r0447","name":"Domize Announcement","job":"scene","video":"assets/remotion-catalog/447-bennyblanco4__domain-generator-next-opensource-DomizeAnnouncement.mp4","poster":"assets/remotion-catalog/447-bennyblanco4__domain-generator-next-opensource-DomizeAnnouncement.jpg","w":1080,"h":700,"seconds":7.06,"use":"git clone https://github.com/bennyblanco4/domain-generator-next-opensource\ncd domain-generator-next-opensource\nnpm install\nnpx remotion render src/remotion/index.ts DomizeAnnouncement out.mp4","takes":{"how":"edit the file","what":["colors","text"],"line":"No inputs. Background gradients are written in DomizeAnnouncement.tsx; the words and the browser mock-up live in components it imports.","read":true}},{"id":"r0448","name":"Domize UIShowcase","job":"scene","video":"assets/remotion-catalog/448-bennyblanco4__domain-generator-next-opensource-DomizeUIShowcase.mp4","poster":"assets/remotion-catalog/448-bennyblanco4__domain-generator-next-opensource-DomizeUIShowcase.jpg","w":1920,"h":1080,"seconds":10.05,"use":"git clone https://github.com/bennyblanco4/domain-generator-next-opensource\ncd domain-generator-next-opensource\nnpm install\nnpx remotion render src/remotion/index.ts DomizeUIShowcase out.mp4","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No inputs. Words, 34 to 50 color values and fonts are written in the file.","read":false}},{"id":"r0449","name":"Landing Page Motion","job":"scene","video":"assets/remotion-catalog/449-bennyblanco4__domain-generator-next-opensource-LandingPageMotion.mp4","poster":"assets/remotion-catalog/449-bennyblanco4__domain-generator-next-opensource-LandingPageMotion.jpg","w":1920,"h":1080,"seconds":15.06,"use":"git clone https://github.com/bennyblanco4/domain-generator-next-opensource\ncd domain-generator-next-opensource\nnpm install\nnpx remotion render src/remotion/index.ts LandingPageMotion out.mp4","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No inputs. Words, 34 to 50 color values and fonts are written in the file.","read":false}}]},{"name":"meetmati-ai/MATI-teaser","url":"https://github.com/meetmati-ai/MATI-teaser","licence":{"name":"MIT","basis":"README"},"line":"A clean white product teaser with big numbers and a kinetic hero line.","hand_written":true,"shelf":"product","jobs":["scene","title"],"needs":{"remotion":"4.0.303","packages":["puppeteer","remotion"]},"pieces":[{"id":"r0333","name":"Mati Launch","job":"scene","video":"assets/remotion-catalog/333-meetmati-ai__MATI-teaser-MatiLaunch.mp4","poster":"assets/remotion-catalog/333-meetmati-ai__MATI-teaser-MatiLaunch.jpg","w":1920,"h":1080,"seconds":37.06,"use":"git clone https://github.com/meetmati-ai/MATI-teaser\ncd MATI-teaser\nnpm install\nnpx remotion render src/index.ts MatiLaunch out.mp4","takes":{"how":"edit the file","what":["colors","type","text","pictures"],"line":"No inputs. One palette object at the top of MatiLaunch.tsx (about 15 named colors) feeds the whole 1,271-line film; words, fonts and pictures are written through the scenes.","read":true}},{"id":"r0334","name":"Mati Teaser","job":"scene","video":"assets/remotion-catalog/334-meetmati-ai__MATI-teaser-MatiTeaser.mp4","poster":"assets/remotion-catalog/334-meetmati-ai__MATI-teaser-MatiTeaser.jpg","w":1920,"h":1080,"seconds":37.06,"use":"git clone https://github.com/meetmati-ai/MATI-teaser\ncd MATI-teaser\nnpm install\nnpx remotion render src/index.ts MatiTeaser out.mp4","takes":{"how":"edit the file","what":["colors","type","text","pictures"],"line":"No inputs. One palette object at the top of MatiTeaser.tsx (const C) feeds the whole film; words, fonts and pictures are written through the scenes.","read":true}},{"id":"r0335","name":"Beat7 Option A","job":"scene","video":"assets/remotion-catalog/335-meetmati-ai__MATI-teaser-Beat7-OptionA.mp4","poster":"assets/remotion-catalog/335-meetmati-ai__MATI-teaser-Beat7-OptionA.jpg","w":1920,"h":1080,"seconds":6.06,"use":"git clone https://github.com/meetmati-ai/MATI-teaser\ncd MATI-teaser\nnpm install\nnpx remotion render src/index.ts Beat7-OptionA out.mp4","takes":{"how":"edit the file","what":["colors","type","text","pictures"],"line":"Its only prop is duration. Words, colors, fonts and pictures are written in BeatSamples.tsx.","read":true}},{"id":"r0336","name":"Beat8 Option A","job":"scene","video":"assets/remotion-catalog/336-meetmati-ai__MATI-teaser-Beat8-OptionA.mp4","poster":"assets/remotion-catalog/336-meetmati-ai__MATI-teaser-Beat8-OptionA.jpg","w":1920,"h":1080,"seconds":6.06,"use":"git clone https://github.com/meetmati-ai/MATI-teaser\ncd MATI-teaser\nnpm install\nnpx remotion render src/index.ts Beat8-OptionA out.mp4","takes":{"how":"edit the file","what":["colors","type","text","pictures"],"line":"Its only prop is duration. Words, colors, fonts and pictures are written in BeatSamples.tsx.","read":true}},{"id":"r0337","name":"Kinetic Hero","job":"title","video":"assets/remotion-catalog/337-meetmati-ai__MATI-teaser-KineticHero.mp4","poster":"assets/remotion-catalog/337-meetmati-ai__MATI-teaser-KineticHero.jpg","w":1920,"h":1080,"seconds":3.71,"use":"git clone https://github.com/meetmati-ai/MATI-teaser\ncd MATI-teaser\nnpm install\nnpx remotion render src/index.ts KineticHero out.mp4","takes":{"how":"props","what":["colors","type","text"],"line":"Props: content {headline, subheadline, cardTitle, cardBody}, colors (a palette of 8: background, headline, subheadline, cardBackground, cardBorder, cardTitle, cardBody, accent), fontFamily, plus timing values and an optional dashboardSlot for your own card contents.","read":true}}]},{"name":"twerpygeek/ExtractMint","url":"https://github.com/twerpygeek/ExtractMint","licence":{"name":"MIT","basis":"licence file"},"line":"A product explainer that shows the tool doing its job in three steps, wide and tall.","hand_written":true,"shelf":"product","jobs":["scene"],"needs":{"remotion":"^4.0.460","packages":["@vitejs/plugin-react","framer-motion","remotion","vite"]},"pieces":[{"id":"r0708","name":"Extract Mint Explainer","job":"scene","video":"assets/remotion-catalog/708-twerpygeek__ExtractMint-ExtractMintExplainer.mp4","poster":"assets/remotion-library/poster-r0708.jpg","w":1920,"h":1080,"seconds":6.06,"use":"git clone https://github.com/twerpygeek/ExtractMint\ncd ExtractMint\nnpm install\nnpx remotion render src/remotion/index.ts ExtractMintExplainer out.mp4","takes":{"how":"edit the file","what":["colors","type","text","numbers"],"line":"No inputs. Step labels and table rows are lists at the top of Explainer.tsx; about 36 color values are written through the JSX.","read":true}},{"id":"r0709","name":"Extract Mint Onboarding","job":"scene","video":"assets/remotion-catalog/709-twerpygeek__ExtractMint-ExtractMintOnboarding.mp4","poster":"assets/remotion-catalog/709-twerpygeek__ExtractMint-ExtractMintOnboarding.jpg","w":1080,"h":1920,"seconds":15.06,"use":"git clone https://github.com/twerpygeek/ExtractMint\ncd ExtractMint\nnpm install\nnpx remotion render src/remotion/index.ts ExtractMintOnboarding out.mp4","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No inputs. About 48 color values and the words are written through Onboarding.tsx (704 lines).","read":true}}]},{"name":"codeverbojan/remotion-cinematic","url":"https://github.com/codeverbojan/remotion-cinematic","licence":{"name":"MIT","basis":"licence file"},"line":"A cinematic product demo: app windows that move, then one closing line.","hand_written":true,"shelf":"product","jobs":["scene"],"needs":{"remotion":"4.0.451","packages":["remotion","vitest","zod"]},"pieces":[{"id":"r0339","name":"Cinematic Demo","job":"scene","video":"assets/remotion-catalog/339-codeverbojan__remotion-cinematic-CinematicDemo.mp4","poster":"assets/remotion-catalog/339-codeverbojan__remotion-cinematic-CinematicDemo.jpg","w":1920,"h":1080,"seconds":25.39,"use":"npm install remotion-cinematic\n# then import the part you want; the README at https://github.com/codeverbojan/remotion-cinematic lists them","takes":{"how":"props","what":["colors","type","logo","text"],"line":"Props (zod schema, color pickers): brand {name, colors (10 named: primary, accent, background, surface, text and more), fontSans, fontSerif, fontMono, logoUrl}, headlines {pain, resolution, closer}, scenes, music, sfxEnabled, sfxVolume, overlap.","read":true}}]},{"name":"ahgsql/remotion-animation","url":"https://github.com/ahgsql/remotion-animation","licence":{"name":"MIT","basis":"licence file"},"line":"Twenty stock entrance moves: bounce, flip, roll, swing, wobble.","hand_written":true,"shelf":"more","jobs":["title"],"needs":{"remotion":"^2.1.12","packages":["remotion"]},"pieces":[{"id":"r0118","name":"Bounce In","job":"title","video":"assets/remotion-catalog/118-ahgsql__remotion-animation-lib-animation-bounceIn.mp4","poster":"assets/remotion-catalog/118-ahgsql__remotion-animation-lib-animation-bounceIn.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-animation\n# then import the part you want; the README at https://github.com/ahgsql/remotion-animation lists them","takes":{"how":"props","what":["colors","type","text"],"line":"One wrapper component, Animation. Props: animateName (the preset), duration, style, children. It holds no colors, type or words of its own: whatever you put inside it is what moves.","read":true}},{"id":"r0119","name":"Fade In","job":"title","video":"assets/remotion-catalog/119-ahgsql__remotion-animation-lib-animation-fadeIn.mp4","poster":"assets/remotion-catalog/119-ahgsql__remotion-animation-lib-animation-fadeIn.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-animation\n# then import the part you want; the README at https://github.com/ahgsql/remotion-animation lists them","takes":{"how":"props","what":["colors","type","text"],"line":"One wrapper component, Animation. Props: animateName (the preset), duration, style, children. It holds no colors, type or words of its own: whatever you put inside it is what moves.","read":true}},{"id":"r0120","name":"Fade In Up","job":"title","video":"assets/remotion-catalog/120-ahgsql__remotion-animation-lib-animation-fadeInUp.mp4","poster":"assets/remotion-catalog/120-ahgsql__remotion-animation-lib-animation-fadeInUp.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-animation\n# then import the part you want; the README at https://github.com/ahgsql/remotion-animation lists them","takes":{"how":"props","what":["colors","type","text"],"line":"One wrapper component, Animation. Props: animateName (the preset), duration, style, children. It holds no colors, type or words of its own: whatever you put inside it is what moves.","read":true}},{"id":"r0121","name":"Zoom In","job":"title","video":"assets/remotion-catalog/121-ahgsql__remotion-animation-lib-animation-zoomIn.mp4","poster":"assets/remotion-catalog/121-ahgsql__remotion-animation-lib-animation-zoomIn.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-animation\n# then import the part you want; the README at https://github.com/ahgsql/remotion-animation lists them","takes":{"how":"props","what":["colors","type","text"],"line":"One wrapper component, Animation. Props: animateName (the preset), duration, style, children. It holds no colors, type or words of its own: whatever you put inside it is what moves.","read":true}},{"id":"r0122","name":"Slide In Left","job":"title","video":"assets/remotion-catalog/122-ahgsql__remotion-animation-lib-animation-slideInLeft.mp4","poster":"assets/remotion-catalog/122-ahgsql__remotion-animation-lib-animation-slideInLeft.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-animation\n# then import the part you want; the README at https://github.com/ahgsql/remotion-animation lists them","takes":{"how":"props","what":["colors","type","text"],"line":"One wrapper component, Animation. Props: animateName (the preset), duration, style, children. It holds no colors, type or words of its own: whatever you put inside it is what moves.","read":true}},{"id":"r0123","name":"Slide In Right","job":"title","video":"assets/remotion-catalog/123-ahgsql__remotion-animation-lib-animation-slideInRight.mp4","poster":"assets/remotion-catalog/123-ahgsql__remotion-animation-lib-animation-slideInRight.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-animation\n# then import the part you want; the README at https://github.com/ahgsql/remotion-animation lists them","takes":{"how":"props","what":["colors","type","text"],"line":"One wrapper component, Animation. Props: animateName (the preset), duration, style, children. It holds no colors, type or words of its own: whatever you put inside it is what moves.","read":true}},{"id":"r0124","name":"Rotate In","job":"title","video":"assets/remotion-catalog/124-ahgsql__remotion-animation-lib-animation-rotateIn.mp4","poster":"assets/remotion-catalog/124-ahgsql__remotion-animation-lib-animation-rotateIn.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-animation\n# then import the part you want; the README at https://github.com/ahgsql/remotion-animation lists them","takes":{"how":"props","what":["colors","type","text"],"line":"One wrapper component, Animation. Props: animateName (the preset), duration, style, children. It holds no colors, type or words of its own: whatever you put inside it is what moves.","read":true}},{"id":"r0125","name":"Flip In X","job":"title","video":"assets/remotion-catalog/125-ahgsql__remotion-animation-lib-animation-flipInX.mp4","poster":"assets/remotion-catalog/125-ahgsql__remotion-animation-lib-animation-flipInX.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-animation\n# then import the part you want; the README at https://github.com/ahgsql/remotion-animation lists them","takes":{"how":"props","what":["colors","type","text"],"line":"One wrapper component, Animation. Props: animateName (the preset), duration, style, children. It holds no colors, type or words of its own: whatever you put inside it is what moves.","read":true}},{"id":"r0126","name":"Jack In The Box","job":"title","video":"assets/remotion-catalog/126-ahgsql__remotion-animation-lib-animation-jackInTheBox.mp4","poster":"assets/remotion-catalog/126-ahgsql__remotion-animation-lib-animation-jackInTheBox.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-animation\n# then import the part you want; the README at https://github.com/ahgsql/remotion-animation lists them","takes":{"how":"props","what":["colors","type","text"],"line":"One wrapper component, Animation. Props: animateName (the preset), duration, style, children. It holds no colors, type or words of its own: whatever you put inside it is what moves.","read":true}},{"id":"r0127","name":"Light Speed In Right","job":"title","video":"assets/remotion-catalog/127-ahgsql__remotion-animation-lib-animation-lightSpeedInRight.mp4","poster":"assets/remotion-catalog/127-ahgsql__remotion-animation-lib-animation-lightSpeedInRight.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-animation\n# then import the part you want; the README at https://github.com/ahgsql/remotion-animation lists them","takes":{"how":"props","what":["colors","type","text"],"line":"One wrapper component, Animation. Props: animateName (the preset), duration, style, children. It holds no colors, type or words of its own: whatever you put inside it is what moves.","read":true}},{"id":"r0128","name":"Back In Down","job":"title","video":"assets/remotion-catalog/128-ahgsql__remotion-animation-lib-animation-backInDown.mp4","poster":"assets/remotion-catalog/128-ahgsql__remotion-animation-lib-animation-backInDown.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-animation\n# then import the part you want; the README at https://github.com/ahgsql/remotion-animation lists them","takes":{"how":"props","what":["colors","type","text"],"line":"One wrapper component, Animation. Props: animateName (the preset), duration, style, children. It holds no colors, type or words of its own: whatever you put inside it is what moves.","read":true}},{"id":"r0129","name":"Back In Left","job":"title","video":"assets/remotion-catalog/129-ahgsql__remotion-animation-lib-animation-backInLeft.mp4","poster":"assets/remotion-catalog/129-ahgsql__remotion-animation-lib-animation-backInLeft.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-animation\n# then import the part you want; the README at https://github.com/ahgsql/remotion-animation lists them","takes":{"how":"props","what":["colors","type","text"],"line":"One wrapper component, Animation. Props: animateName (the preset), duration, style, children. It holds no colors, type or words of its own: whatever you put inside it is what moves.","read":true}},{"id":"r0130","name":"Roll In","job":"title","video":"assets/remotion-catalog/130-ahgsql__remotion-animation-lib-animation-rollIn.mp4","poster":"assets/remotion-catalog/130-ahgsql__remotion-animation-lib-animation-rollIn.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-animation\n# then import the part you want; the README at https://github.com/ahgsql/remotion-animation lists them","takes":{"how":"props","what":["colors","type","text"],"line":"One wrapper component, Animation. Props: animateName (the preset), duration, style, children. It holds no colors, type or words of its own: whatever you put inside it is what moves.","read":true}},{"id":"r0131","name":"Rubber Band","job":"title","video":"assets/remotion-catalog/131-ahgsql__remotion-animation-lib-animation-rubberBand.mp4","poster":"assets/remotion-catalog/131-ahgsql__remotion-animation-lib-animation-rubberBand.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-animation\n# then import the part you want; the README at https://github.com/ahgsql/remotion-animation lists them","takes":{"how":"props","what":["colors","type","text"],"line":"One wrapper component, Animation. Props: animateName (the preset), duration, style, children. It holds no colors, type or words of its own: whatever you put inside it is what moves.","read":true}},{"id":"r0132","name":"Pulse","job":"title","video":"assets/remotion-catalog/132-ahgsql__remotion-animation-lib-animation-pulse.mp4","poster":"assets/remotion-catalog/132-ahgsql__remotion-animation-lib-animation-pulse.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-animation\n# then import the part you want; the README at https://github.com/ahgsql/remotion-animation lists them","takes":{"how":"props","what":["colors","type","text"],"line":"One wrapper component, Animation. Props: animateName (the preset), duration, style, children. It holds no colors, type or words of its own: whatever you put inside it is what moves.","read":true}},{"id":"r0133","name":"Shake X","job":"title","video":"assets/remotion-catalog/133-ahgsql__remotion-animation-lib-animation-shakeX.mp4","poster":"assets/remotion-catalog/133-ahgsql__remotion-animation-lib-animation-shakeX.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-animation\n# then import the part you want; the README at https://github.com/ahgsql/remotion-animation lists them","takes":{"how":"props","what":["colors","type","text"],"line":"One wrapper component, Animation. Props: animateName (the preset), duration, style, children. It holds no colors, type or words of its own: whatever you put inside it is what moves.","read":true}},{"id":"r0134","name":"Swing","job":"title","video":"assets/remotion-catalog/134-ahgsql__remotion-animation-lib-animation-swing.mp4","poster":"assets/remotion-catalog/134-ahgsql__remotion-animation-lib-animation-swing.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-animation\n# then import the part you want; the README at https://github.com/ahgsql/remotion-animation lists them","takes":{"how":"props","what":["colors","type","text"],"line":"One wrapper component, Animation. Props: animateName (the preset), duration, style, children. It holds no colors, type or words of its own: whatever you put inside it is what moves.","read":true}},{"id":"r0135","name":"Tada","job":"title","video":"assets/remotion-catalog/135-ahgsql__remotion-animation-lib-animation-tada.mp4","poster":"assets/remotion-catalog/135-ahgsql__remotion-animation-lib-animation-tada.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-animation\n# then import the part you want; the README at https://github.com/ahgsql/remotion-animation lists them","takes":{"how":"props","what":["colors","type","text"],"line":"One wrapper component, Animation. Props: animateName (the preset), duration, style, children. It holds no colors, type or words of its own: whatever you put inside it is what moves.","read":true}},{"id":"r0136","name":"Wobble","job":"title","video":"assets/remotion-catalog/136-ahgsql__remotion-animation-lib-animation-wobble.mp4","poster":"assets/remotion-catalog/136-ahgsql__remotion-animation-lib-animation-wobble.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-animation\n# then import the part you want; the README at https://github.com/ahgsql/remotion-animation lists them","takes":{"how":"props","what":["colors","type","text"],"line":"One wrapper component, Animation. Props: animateName (the preset), duration, style, children. It holds no colors, type or words of its own: whatever you put inside it is what moves.","read":true}},{"id":"r0137","name":"Heart Beat","job":"title","video":"assets/remotion-catalog/137-ahgsql__remotion-animation-lib-animation-heartBeat.mp4","poster":"assets/remotion-catalog/137-ahgsql__remotion-animation-lib-animation-heartBeat.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-animation\n# then import the part you want; the README at https://github.com/ahgsql/remotion-animation lists them","takes":{"how":"props","what":["colors","type","text"],"line":"One wrapper component, Animation. Props: animateName (the preset), duration, style, children. It holds no colors, type or words of its own: whatever you put inside it is what moves.","read":true}}]},{"name":"bbmw96/bbmw0-technologies-ai","url":"https://github.com/bbmw96/bbmw0-technologies-ai","licence":{"name":"MIT","basis":"licence file"},"line":"Twenty tall social cards led by type: hook, bullets, quote, call to action. Good tall layouts to learn from.","hand_written":true,"shelf":"more","jobs":["scene","title","quote","frame"],"needs":{"remotion":"4.0.454","packages":["@vitejs/plugin-react","remotion","vite"]},"pieces":[{"id":"r0490","name":"Hook","job":"scene","video":"assets/remotion-catalog/490-bbmw96__bbmw0-technologies-ai-Hook.mp4","poster":"assets/remotion-catalog/490-bbmw96__bbmw0-technologies-ai-Hook.jpg","w":1080,"h":1920,"seconds":5.06,"use":"git clone https://github.com/bbmw96/bbmw0-technologies-ai\ncd bbmw0-technologies-ai\nnpm install\nnpx remotion render src/compositions/registry.tsx Hook out.mp4","takes":{"how":"props","what":["colors","text"],"line":"Props: text, bg, accent, emoji. The font is written in the file.","read":false}},{"id":"r0491","name":"Title","job":"title","video":"assets/remotion-catalog/491-bbmw96__bbmw0-technologies-ai-Title.mp4","poster":"assets/remotion-catalog/491-bbmw96__bbmw0-technologies-ai-Title.jpg","w":1080,"h":1920,"seconds":5.06,"use":"git clone https://github.com/bbmw96/bbmw0-technologies-ai\ncd bbmw0-technologies-ai\nnpm install\nnpx remotion render src/compositions/registry.tsx Title out.mp4","takes":{"how":"props","what":["colors","text"],"line":"Props: title, subtitle, bg, accent. Fonts are written in the file.","read":true}},{"id":"r0492","name":"Bullets","job":"scene","video":"assets/remotion-catalog/492-bbmw96__bbmw0-technologies-ai-Bullets.mp4","poster":"assets/remotion-catalog/492-bbmw96__bbmw0-technologies-ai-Bullets.jpg","w":1080,"h":1920,"seconds":7.06,"use":"git clone https://github.com/bbmw96/bbmw0-technologies-ai\ncd bbmw0-technologies-ai\nnpm install\nnpx remotion render src/compositions/registry.tsx Bullets out.mp4","takes":{"how":"props","what":["colors","text"],"line":"Props: heading, items, bg, accent. Fonts are written in the file.","read":false}},{"id":"r0493","name":"Quote","job":"quote","video":"assets/remotion-catalog/493-bbmw96__bbmw0-technologies-ai-Quote.mp4","poster":"assets/remotion-catalog/493-bbmw96__bbmw0-technologies-ai-Quote.jpg","w":1080,"h":1920,"seconds":6.06,"use":"git clone https://github.com/bbmw96/bbmw0-technologies-ai\ncd bbmw0-technologies-ai\nnpm install\nnpx remotion render src/compositions/registry.tsx Quote out.mp4","takes":{"how":"props","what":["colors","text"],"line":"Props: quote, author, bg, accent. Fonts are written in the file.","read":true}},{"id":"r0494","name":"CTA","job":"scene","video":"assets/remotion-catalog/494-bbmw96__bbmw0-technologies-ai-CTA.mp4","poster":"assets/remotion-catalog/494-bbmw96__bbmw0-technologies-ai-CTA.jpg","w":1080,"h":1920,"seconds":5.06,"use":"git clone https://github.com/bbmw96/bbmw0-technologies-ai\ncd bbmw0-technologies-ai\nnpm install\nnpx remotion render src/compositions/registry.tsx CTA out.mp4","takes":{"how":"props","what":["colors","text"],"line":"Props: title, url, bg, accent. Fonts and a second background color are written in the file.","read":true}},{"id":"r0495","name":"Showcase","job":"scene","video":"assets/remotion-catalog/495-bbmw96__bbmw0-technologies-ai-Showcase.mp4","poster":"assets/remotion-catalog/495-bbmw96__bbmw0-technologies-ai-Showcase.jpg","w":1080,"h":1920,"seconds":60.05,"use":"git clone https://github.com/bbmw96/bbmw0-technologies-ai\ncd bbmw0-technologies-ai\nnpm install\nnpx remotion render src/compositions/registry.tsx Showcase out.mp4","takes":{"how":"props","what":["colors","text"],"line":"Props: brand, url, accent. Everything else in this 60-second piece (about 30 color values, the fonts, the script) is written in Showcase.tsx.","read":true}},{"id":"r0496","name":"Tutorial","job":"scene","video":"assets/remotion-catalog/496-bbmw96__bbmw0-technologies-ai-Tutorial.mp4","poster":"assets/remotion-catalog/496-bbmw96__bbmw0-technologies-ai-Tutorial.jpg","w":1080,"h":1920,"seconds":60.05,"use":"git clone https://github.com/bbmw96/bbmw0-technologies-ai\ncd bbmw0-technologies-ai\nnpm install\nnpx remotion render src/compositions/registry.tsx Tutorial out.mp4","takes":{"how":"props","what":["text"],"line":"Props: brand, url. About 80 color values and the script are written in Tutorial.tsx.","read":false}},{"id":"r0497","name":"Battle","job":"scene","video":"assets/remotion-catalog/497-bbmw96__bbmw0-technologies-ai-Battle.mp4","poster":"assets/remotion-catalog/497-bbmw96__bbmw0-technologies-ai-Battle.jpg","w":1080,"h":1920,"seconds":60.05,"use":"git clone https://github.com/bbmw96/bbmw0-technologies-ai\ncd bbmw0-technologies-ai\nnpm install\nnpx remotion render src/compositions/registry.tsx Battle out.mp4","takes":{"how":"props","what":["text"],"line":"Props: prompt, url. Colors, fonts and the rest of the script are written in Battle.tsx.","read":false}},{"id":"r0498","name":"Speed Run","job":"scene","video":"assets/remotion-catalog/498-bbmw96__bbmw0-technologies-ai-SpeedRun.mp4","poster":"assets/remotion-catalog/498-bbmw96__bbmw0-technologies-ai-SpeedRun.jpg","w":1080,"h":1920,"seconds":60.05,"use":"git clone https://github.com/bbmw96/bbmw0-technologies-ai\ncd bbmw0-technologies-ai\nnpm install\nnpx remotion render src/compositions/registry.tsx SpeedRun out.mp4","takes":{"how":"props","what":["text"],"line":"Prop: url. Colors, fonts and the script are written in the file.","read":false}},{"id":"r0499","name":"Feature Drop","job":"scene","video":"assets/remotion-catalog/499-bbmw96__bbmw0-technologies-ai-FeatureDrop.mp4","poster":"assets/remotion-catalog/499-bbmw96__bbmw0-technologies-ai-FeatureDrop.jpg","w":1080,"h":1920,"seconds":60.05,"use":"git clone https://github.com/bbmw96/bbmw0-technologies-ai\ncd bbmw0-technologies-ai\nnpm install\nnpx remotion render src/compositions/registry.tsx FeatureDrop out.mp4","takes":{"how":"props","what":["text"],"line":"Prop: url. Colors, fonts and the script are written in the file.","read":false}},{"id":"r0500","name":"Consensus","job":"scene","video":"assets/remotion-catalog/500-bbmw96__bbmw0-technologies-ai-Consensus.mp4","poster":"assets/remotion-catalog/500-bbmw96__bbmw0-technologies-ai-Consensus.jpg","w":1080,"h":1920,"seconds":40.04,"use":"git clone https://github.com/bbmw96/bbmw0-technologies-ai\ncd bbmw0-technologies-ai\nnpm install\nnpx remotion render src/compositions/registry.tsx Consensus out.mp4","takes":{"how":"tokens","what":["colors","type"],"line":"The look is one of 12 named themes in src/compositions/themes.ts (10 values each: background, surface, border, text, accents, glow) with 5 font choices; the piece picks one by name. The words are a list of beats written in themedShorts.tsx. Props: url, audioUrl.","read":true}},{"id":"r0501","name":"Phone Install","job":"frame","video":"assets/remotion-catalog/501-bbmw96__bbmw0-technologies-ai-PhoneInstall.mp4","poster":"assets/remotion-catalog/501-bbmw96__bbmw0-technologies-ai-PhoneInstall.jpg","w":1080,"h":1920,"seconds":40.04,"use":"git clone https://github.com/bbmw96/bbmw0-technologies-ai\ncd bbmw0-technologies-ai\nnpm install\nnpx remotion render src/compositions/registry.tsx PhoneInstall out.mp4","takes":{"how":"tokens","what":["colors","type"],"line":"The look is one of 12 named themes in src/compositions/themes.ts (10 values each: background, surface, border, text, accents, glow) with 5 font choices; the piece picks one by name. The words are a list of beats written in themedShorts.tsx. Props: url, audioUrl.","read":true}},{"id":"r0502","name":"Languages","job":"scene","video":"assets/remotion-catalog/502-bbmw96__bbmw0-technologies-ai-Languages.mp4","poster":"assets/remotion-catalog/502-bbmw96__bbmw0-technologies-ai-Languages.jpg","w":1080,"h":1920,"seconds":40.04,"use":"git clone https://github.com/bbmw96/bbmw0-technologies-ai\ncd bbmw0-technologies-ai\nnpm install\nnpx remotion render src/compositions/registry.tsx Languages out.mp4","takes":{"how":"tokens","what":["colors","type"],"line":"The look is one of 12 named themes in src/compositions/themes.ts (10 values each: background, surface, border, text, accents, glow) with 5 font choices; the piece picks one by name. The words are a list of beats written in themedShorts.tsx. Props: url, audioUrl.","read":true}},{"id":"r0503","name":"Presets","job":"scene","video":"assets/remotion-catalog/503-bbmw96__bbmw0-technologies-ai-Presets.mp4","poster":"assets/remotion-catalog/503-bbmw96__bbmw0-technologies-ai-Presets.jpg","w":1080,"h":1920,"seconds":40.04,"use":"git clone https://github.com/bbmw96/bbmw0-technologies-ai\ncd bbmw0-technologies-ai\nnpm install\nnpx remotion render src/compositions/registry.tsx Presets out.mp4","takes":{"how":"tokens","what":["colors","type"],"line":"The look is one of 12 named themes in src/compositions/themes.ts (10 values each: background, surface, border, text, accents, glow) with 5 font choices; the piece picks one by name. The words are a list of beats written in themedShorts.tsx. Props: url, audioUrl.","read":true}},{"id":"r0504","name":"Open Source","job":"scene","video":"assets/remotion-catalog/504-bbmw96__bbmw0-technologies-ai-OpenSource.mp4","poster":"assets/remotion-catalog/504-bbmw96__bbmw0-technologies-ai-OpenSource.jpg","w":1080,"h":1920,"seconds":40.04,"use":"git clone https://github.com/bbmw96/bbmw0-technologies-ai\ncd bbmw0-technologies-ai\nnpm install\nnpx remotion render src/compositions/registry.tsx OpenSource out.mp4","takes":{"how":"tokens","what":["colors","type"],"line":"The look is one of 12 named themes in src/compositions/themes.ts (10 values each: background, surface, border, text, accents, glow) with 5 font choices; the piece picks one by name. The words are a list of beats written in themedShorts.tsx. Props: url, audioUrl.","read":true}},{"id":"r0505","name":"Mobile First","job":"scene","video":"assets/remotion-catalog/505-bbmw96__bbmw0-technologies-ai-MobileFirst.mp4","poster":"assets/remotion-catalog/505-bbmw96__bbmw0-technologies-ai-MobileFirst.jpg","w":1080,"h":1920,"seconds":40.04,"use":"git clone https://github.com/bbmw96/bbmw0-technologies-ai\ncd bbmw0-technologies-ai\nnpm install\nnpx remotion render src/compositions/registry.tsx MobileFirst out.mp4","takes":{"how":"tokens","what":["colors","type"],"line":"The look is one of 12 named themes in src/compositions/themes.ts (10 values each: background, surface, border, text, accents, glow) with 5 font choices; the piece picks one by name. The words are a list of beats written in themedShorts.tsx. Props: url, audioUrl.","read":true}},{"id":"r0506","name":"Why Vertical","job":"scene","video":"assets/remotion-catalog/506-bbmw96__bbmw0-technologies-ai-WhyVertical.mp4","poster":"assets/remotion-catalog/506-bbmw96__bbmw0-technologies-ai-WhyVertical.jpg","w":1080,"h":1920,"seconds":40.04,"use":"git clone https://github.com/bbmw96/bbmw0-technologies-ai\ncd bbmw0-technologies-ai\nnpm install\nnpx remotion render src/compositions/registry.tsx WhyVertical out.mp4","takes":{"how":"tokens","what":["colors","type"],"line":"The look is one of 12 named themes in src/compositions/themes.ts (10 values each: background, surface, border, text, accents, glow) with 5 font choices; the piece picks one by name. The words are a list of beats written in themedShorts.tsx. Props: url, audioUrl.","read":true}},{"id":"r0507","name":"Your Pocket","job":"scene","video":"assets/remotion-catalog/507-bbmw96__bbmw0-technologies-ai-YourPocket.mp4","poster":"assets/remotion-catalog/507-bbmw96__bbmw0-technologies-ai-YourPocket.jpg","w":1080,"h":1920,"seconds":40.04,"use":"git clone https://github.com/bbmw96/bbmw0-technologies-ai\ncd bbmw0-technologies-ai\nnpm install\nnpx remotion render src/compositions/registry.tsx YourPocket out.mp4","takes":{"how":"tokens","what":["colors","type"],"line":"The look is one of 12 named themes in src/compositions/themes.ts (10 values each: background, surface, border, text, accents, glow) with 5 font choices; the piece picks one by name. The words are a list of beats written in themedShorts.tsx. Props: url, audioUrl.","read":true}},{"id":"r1123","name":"From Idea","job":"scene","video":"assets/remotion-catalog/1123-bbmw96__bbmw0-technologies-ai-FromIdea.mp4","poster":"assets/remotion-catalog/1123-bbmw96__bbmw0-technologies-ai-FromIdea.jpg","w":1080,"h":1920,"seconds":40.04,"use":"git clone https://github.com/bbmw96/bbmw0-technologies-ai\ncd bbmw0-technologies-ai\nnpm install\nnpx remotion render src/compositions/registry.tsx FromIdea out.mp4","takes":{"how":"tokens","what":["colors","type"],"line":"The look is one of 12 named themes in src/compositions/themes.ts (10 values each: background, surface, border, text, accents, glow) with 5 font choices; the piece picks one by name. The words are a list of beats written in themedShorts.tsx. Props: url, audioUrl.","read":true}},{"id":"r1124","name":"Daily","job":"scene","video":"assets/remotion-catalog/1124-bbmw96__bbmw0-technologies-ai-Daily.mp4","poster":"assets/remotion-catalog/1124-bbmw96__bbmw0-technologies-ai-Daily.jpg","w":1080,"h":1920,"seconds":40.04,"use":"git clone https://github.com/bbmw96/bbmw0-technologies-ai\ncd bbmw0-technologies-ai\nnpm install\nnpx remotion render src/compositions/registry.tsx Daily out.mp4","takes":{"how":"props","what":["colors","type","text","numbers"],"line":"Props: themeId (one of 12 themes in themes.ts), fontFamilyId (one of 5), beats[] (the words, lists and stats), audioUrl, audioVolume. Built to be rendered from a JSON props file.","read":true}}]},{"name":"ofershap/remotion-readme-kit","url":"https://github.com/ofershap/remotion-readme-kit","licence":{"name":"MIT","basis":"licence file"},"line":"Terminal demos for a README: a command typed in and its result, code before and after, a feature list.","hand_written":true,"shelf":"more","jobs":["scene","code","layout","chart"],"needs":{"remotion":"^4.0.0","packages":["remotion","zod"]},"pieces":[{"id":"r0171","name":"CLI demo","job":"code","video":"assets/remotion-catalog/171-ofershap__remotion-readme-kit-candidate-ofershap-cli-demo.mp4","poster":"assets/remotion-library/poster-r0171.jpg","w":1280,"h":720,"seconds":4.95,"use":"npm install remotion-readme-kit\n# then import the part you want; the README at https://github.com/ofershap/remotion-readme-kit lists them","takes":{"how":"props","what":["colors","type","text"],"line":"The CliDemo template. Words are props (zod schema): title, lines[], typingSpeed, promptSymbol. Colors (17) and fonts (2) come from src/constants.ts.","read":true}},{"id":"r0172","name":"Code before after","job":"code","video":"assets/remotion-catalog/172-ofershap__remotion-readme-kit-candidate-ofershap-code-before-after.mp4","poster":"assets/remotion-catalog/172-ofershap__remotion-readme-kit-candidate-ofershap-code-before-after.jpg","w":1280,"h":720,"seconds":6.55,"use":"npm install remotion-readme-kit\n# then import the part you want; the README at https://github.com/ofershap/remotion-readme-kit lists them","takes":{"how":"props","what":["colors","type","text"],"line":"The CodeBeforeAfter template. Words are props (zod schema): title, beforeLabel, afterLabel, beforeCode, afterCode. Colors (17) and fonts (2) come from src/constants.ts, shared by every template.","read":true}},{"id":"r0173","name":"Feature showcase","job":"layout","video":"assets/remotion-catalog/173-ofershap__remotion-readme-kit-candidate-ofershap-feature-showcase.mp4","poster":"assets/remotion-catalog/173-ofershap__remotion-readme-kit-candidate-ofershap-feature-showcase.jpg","w":1280,"h":720,"seconds":4.65,"use":"npm install remotion-readme-kit\n# then import the part you want; the README at https://github.com/ofershap/remotion-readme-kit lists them","takes":{"how":"props","what":["colors","type","text"],"line":"The FeatureShowcase template. Props (zod schema): projectName, tagline, features[], accentColor. The other colors (17) and fonts (2) come from src/constants.ts.","read":true}},{"id":"r0203","name":"Ts Nano Event","job":"scene","video":"assets/remotion-catalog/203-ofershap__remotion-readme-kit-TsNanoEvent.mp4","poster":"assets/remotion-catalog/203-ofershap__remotion-readme-kit-TsNanoEvent.jpg","w":1280,"h":720,"seconds":6.55,"use":"git clone https://github.com/ofershap/remotion-readme-kit\ncd remotion-readme-kit\nnpm install\nnpx remotion render src/index.ts TsNanoEvent out.mp4","takes":{"how":"props","what":["colors","type","text"],"line":"Words are props (zod schema): title, beforeLabel, afterLabel, beforeCode, afterCode. Colors (17) and fonts (2) come from src/constants.ts (COLORS, FONTS), shared by every template in the kit. The four entries are one component (CodeBeforeAfter) with different words.","read":true}},{"id":"r0204","name":"Awesome Hebrew Dev","job":"scene","video":"assets/remotion-catalog/204-ofershap__remotion-readme-kit-AwesomeHebrewDev.mp4","poster":"assets/remotion-catalog/204-ofershap__remotion-readme-kit-AwesomeHebrewDev.jpg","w":1280,"h":720,"seconds":5.85,"use":"git clone https://github.com/ofershap/remotion-readme-kit\ncd remotion-readme-kit\nnpm install\nnpx remotion render src/index.ts AwesomeHebrewDev out.mp4","takes":{"how":"props","what":["colors","type","text"],"line":"Props (zod schema): projectName, tagline, features[], accentColor. The other colors (17) and fonts (2) come from src/constants.ts, shared by every template. The five entries are one component (FeatureShowcase) with different words.","read":true}},{"id":"r0205","name":"Hebrew Slugify","job":"scene","video":"assets/remotion-catalog/205-ofershap__remotion-readme-kit-HebrewSlugify.mp4","poster":"assets/remotion-catalog/205-ofershap__remotion-readme-kit-HebrewSlugify.jpg","w":1280,"h":720,"seconds":12.29,"use":"git clone https://github.com/ofershap/remotion-readme-kit\ncd remotion-readme-kit\nnpm install\nnpx remotion render src/index.ts HebrewSlugify out.mp4","takes":{"how":"props","what":["colors","type","text"],"line":"Words are props (zod schema): title, lines[] (commands and output), typingSpeed, promptSymbol. Colors (17) and fonts (2) come from src/constants.ts, shared by every template. The three entries are one component (CliDemo) with different words.","read":true}},{"id":"r0206","name":"Env Guard","job":"scene","video":"assets/remotion-catalog/206-ofershap__remotion-readme-kit-EnvGuard.mp4","poster":"assets/remotion-catalog/206-ofershap__remotion-readme-kit-EnvGuard.jpg","w":1280,"h":720,"seconds":4.89,"use":"git clone https://github.com/ofershap/remotion-readme-kit\ncd remotion-readme-kit\nnpm install\nnpx remotion render src/index.ts EnvGuard out.mp4","takes":{"how":"props","what":["colors","type","text"],"line":"Words are props (zod schema): title, lines[] (commands and output), typingSpeed, promptSymbol. Colors (17) and fonts (2) come from src/constants.ts, shared by every template. The three entries are one component (CliDemo) with different words.","read":true}},{"id":"r0207","name":"Use Stepper","job":"scene","video":"assets/remotion-catalog/207-ofershap__remotion-readme-kit-UseStepper.mp4","poster":"assets/remotion-catalog/207-ofershap__remotion-readme-kit-UseStepper.jpg","w":1280,"h":720,"seconds":6.55,"use":"git clone https://github.com/ofershap/remotion-readme-kit\ncd remotion-readme-kit\nnpm install\nnpx remotion render src/index.ts UseStepper out.mp4","takes":{"how":"props","what":["colors","type","text"],"line":"Words are props (zod schema): title, beforeLabel, afterLabel, beforeCode, afterCode. Colors (17) and fonts (2) come from src/constants.ts (COLORS, FONTS), shared by every template in the kit. The four entries are one component (CodeBeforeAfter) with different words.","read":true}},{"id":"r0208","name":"Ai Commit Msg","job":"scene","video":"assets/remotion-catalog/208-ofershap__remotion-readme-kit-AiCommitMsg.mp4","poster":"assets/remotion-catalog/208-ofershap__remotion-readme-kit-AiCommitMsg.jpg","w":1280,"h":720,"seconds":5.25,"use":"git clone https://github.com/ofershap/remotion-readme-kit\ncd remotion-readme-kit\nnpm install\nnpx remotion render src/index.ts AiCommitMsg out.mp4","takes":{"how":"props","what":["colors","type","text"],"line":"Props (zod schema): projectName, tagline, features[], accentColor. The other colors (17) and fonts (2) come from src/constants.ts, shared by every template. The five entries are one component (FeatureShowcase) with different words.","read":true}},{"id":"r0209","name":"Mcp Server Devutils","job":"scene","video":"assets/remotion-catalog/209-ofershap__remotion-readme-kit-McpServerDevutils.mp4","poster":"assets/remotion-catalog/209-ofershap__remotion-readme-kit-McpServerDevutils.jpg","w":1280,"h":720,"seconds":5.55,"use":"git clone https://github.com/ofershap/remotion-readme-kit\ncd remotion-readme-kit\nnpm install\nnpx remotion render src/index.ts McpServerDevutils out.mp4","takes":{"how":"props","what":["colors","type","text"],"line":"Props (zod schema): projectName, tagline, features[], accentColor. The other colors (17) and fonts (2) come from src/constants.ts, shared by every template. The five entries are one component (FeatureShowcase) with different words.","read":true}},{"id":"r0210","name":"Mcp Server Github Gist","job":"chart","video":"assets/remotion-catalog/210-ofershap__remotion-readme-kit-McpServerGithubGist.mp4","poster":"assets/remotion-catalog/210-ofershap__remotion-readme-kit-McpServerGithubGist.jpg","w":1280,"h":720,"seconds":5.25,"use":"git clone https://github.com/ofershap/remotion-readme-kit\ncd remotion-readme-kit\nnpm install\nnpx remotion render src/index.ts McpServerGithubGist out.mp4","takes":{"how":"props","what":["colors","type","text"],"line":"Props (zod schema): projectName, tagline, features[], accentColor. The other colors (17) and fonts (2) come from src/constants.ts, shared by every template. The five entries are one component (FeatureShowcase) with different words.","read":true}},{"id":"r0211","name":"Mcp Server Npm","job":"scene","video":"assets/remotion-catalog/211-ofershap__remotion-readme-kit-McpServerNpm.mp4","poster":"assets/remotion-catalog/211-ofershap__remotion-readme-kit-McpServerNpm.jpg","w":1280,"h":720,"seconds":8.62,"use":"git clone https://github.com/ofershap/remotion-readme-kit\ncd remotion-readme-kit\nnpm install\nnpx remotion render src/index.ts McpServerNpm out.mp4","takes":{"how":"props","what":["colors","type","text"],"line":"Words are props (zod schema): title, lines[] (commands and output), typingSpeed, promptSymbol. Colors (17) and fonts (2) come from src/constants.ts, shared by every template. The three entries are one component (CliDemo) with different words.","read":true}},{"id":"r0212","name":"Mcp Server Cloudflare","job":"scene","video":"assets/remotion-catalog/212-ofershap__remotion-readme-kit-McpServerCloudflare.mp4","poster":"assets/remotion-catalog/212-ofershap__remotion-readme-kit-McpServerCloudflare.jpg","w":1280,"h":720,"seconds":5.55,"use":"git clone https://github.com/ofershap/remotion-readme-kit\ncd remotion-readme-kit\nnpm install\nnpx remotion render src/index.ts McpServerCloudflare out.mp4","takes":{"how":"props","what":["colors","type","text"],"line":"Props (zod schema): projectName, tagline, features[], accentColor. The other colors (17) and fonts (2) come from src/constants.ts, shared by every template. The five entries are one component (FeatureShowcase) with different words.","read":true}},{"id":"r0213","name":"Hebrew Dates","job":"scene","video":"assets/remotion-catalog/213-ofershap__remotion-readme-kit-HebrewDates.mp4","poster":"assets/remotion-catalog/213-ofershap__remotion-readme-kit-HebrewDates.jpg","w":1280,"h":720,"seconds":6.55,"use":"git clone https://github.com/ofershap/remotion-readme-kit\ncd remotion-readme-kit\nnpm install\nnpx remotion render src/index.ts HebrewDates out.mp4","takes":{"how":"props","what":["colors","type","text"],"line":"Words are props (zod schema): title, beforeLabel, afterLabel, beforeCode, afterCode. Colors (17) and fonts (2) come from src/constants.ts (COLORS, FONTS), shared by every template in the kit. The four entries are one component (CodeBeforeAfter) with different words.","read":true}},{"id":"r0214","name":"React Rtl Utils","job":"scene","video":"assets/remotion-catalog/214-ofershap__remotion-readme-kit-ReactRtlUtils.mp4","poster":"assets/remotion-catalog/214-ofershap__remotion-readme-kit-ReactRtlUtils.jpg","w":1280,"h":720,"seconds":6.55,"use":"git clone https://github.com/ofershap/remotion-readme-kit\ncd remotion-readme-kit\nnpm install\nnpx remotion render src/index.ts ReactRtlUtils out.mp4","takes":{"how":"props","what":["colors","type","text"],"line":"Words are props (zod schema): title, beforeLabel, afterLabel, beforeCode, afterCode. Colors (17) and fonts (2) come from src/constants.ts (COLORS, FONTS), shared by every template in the kit. The four entries are one component (CodeBeforeAfter) with different words.","read":true}}]},{"name":"Mason720/remotion","url":"https://github.com/Mason720/remotion","licence":{"name":"MIT","basis":"licence file"},"line":"A starter kit with slide, code and diagram scenes.","hand_written":true,"shelf":"more","jobs":["scene","code","title","effect"],"needs":{"remotion":"4.0.382","packages":["@shikijs/transformers","remotion","shiki","tailwindcss","zod"]},"pieces":[{"id":"r0647","name":"My Video","job":"scene","video":"assets/remotion-catalog/647-Mason720__remotion-MyVideo.mp4","poster":"assets/remotion-catalog/647-Mason720__remotion-MyVideo.jpg","w":1920,"h":1080,"seconds":2.05,"use":"# see the source for how to run it\nhttps://github.com/Mason720/remotion"},{"id":"r0648","name":"Example1 Landscape","job":"scene","video":"assets/remotion-catalog/648-Mason720__remotion-Example1-Landscape.mp4","poster":"assets/remotion-catalog/648-Mason720__remotion-Example1-Landscape.jpg","w":1920,"h":1080,"seconds":2.05,"use":"# see the source for how to run it\nhttps://github.com/Mason720/remotion"},{"id":"r0649","name":"Example2 Square","job":"scene","video":"assets/remotion-catalog/649-Mason720__remotion-Example2-Square.mp4","poster":"assets/remotion-catalog/649-Mason720__remotion-Example2-Square.jpg","w":1080,"h":1080,"seconds":2.05,"use":"# see the source for how to run it\nhttps://github.com/Mason720/remotion"},{"id":"r0650","name":"Title Slide","job":"title","video":"assets/remotion-catalog/650-Mason720__remotion-TitleSlide.mp4","poster":"assets/remotion-catalog/650-Mason720__remotion-TitleSlide.jpg","w":1280,"h":720,"seconds":1.05,"use":"# see the source for how to run it\nhttps://github.com/Mason720/remotion","takes":{"how":"props","what":["text"],"line":"Props (zod schema): title, className. Colors are Tailwind classes written in the file (bg-black, text-white); className lets you add classes but not replace those.","read":true}},{"id":"r0651","name":"Content Slide","job":"scene","video":"assets/remotion-catalog/651-Mason720__remotion-ContentSlide.mp4","poster":"assets/remotion-catalog/651-Mason720__remotion-ContentSlide.jpg","w":1280,"h":720,"seconds":1.05,"use":"# see the source for how to run it\nhttps://github.com/Mason720/remotion","takes":{"how":"props","what":["text"],"line":"Props (zod schema): header, content, className. Colors are Tailwind classes written in the file.","read":false}},{"id":"r0652","name":"Video Slide","job":"scene","video":"assets/remotion-catalog/652-Mason720__remotion-VideoSlide.mp4","poster":"assets/remotion-catalog/652-Mason720__remotion-VideoSlide.jpg","w":1280,"h":720,"seconds":2.05,"use":"# see the source for how to run it\nhttps://github.com/Mason720/remotion","takes":{"how":"props","what":["pictures"],"line":"Props (zod schema): filename, startTime, endTime.","read":false}},{"id":"r0653","name":"Code","job":"code","video":"assets/remotion-catalog/653-Mason720__remotion-Code.mp4","poster":"assets/remotion-catalog/653-Mason720__remotion-Code.jpg","w":1280,"h":720,"seconds":2.05,"use":"# see the source for how to run it\nhttps://github.com/Mason720/remotion","takes":{"how":"props","what":["colors","text"],"line":"Props (zod schema): code, language, theme (a named syntax theme, github-dark by default), showLineNumbers, highlightLines.","read":true}},{"id":"r0654","name":"Code Slide","job":"code","video":"assets/remotion-catalog/654-Mason720__remotion-CodeSlide.mp4","poster":"assets/remotion-catalog/654-Mason720__remotion-CodeSlide.jpg","w":1280,"h":720,"seconds":2.05,"use":"# see the source for how to run it\nhttps://github.com/Mason720/remotion","takes":{"how":"props","what":["colors","text"],"line":"Props (zod schema): title, code, language, theme, showLineNumbers, highlightLines, animatedHighlights, className.","read":false}},{"id":"r0655","name":"Ascii Player","job":"effect","video":"assets/remotion-catalog/655-Mason720__remotion-AsciiPlayer.mp4","poster":"assets/remotion-catalog/655-Mason720__remotion-AsciiPlayer.jpg","w":1280,"h":720,"seconds":2.05,"use":"# see the source for how to run it\nhttps://github.com/Mason720/remotion","takes":{"how":"props","what":[],"line":"Props (zod schema): timestamp, startTime, endTime, playbackSpeed. It plays a terminal recording; what it shows is the recording.","read":false}},{"id":"r0656","name":"Screenshot","job":"overlay","video":"assets/remotion-catalog/656-Mason720__remotion-Screenshot.mp4","poster":"assets/remotion-catalog/656-Mason720__remotion-Screenshot.jpg","w":1280,"h":720,"seconds":2.05,"use":"# see the source for how to run it\nhttps://github.com/Mason720/remotion","takes":{"how":"props","what":["pictures"],"line":"Props (zod schema): src, scrollSpeed, scrollDelaySeconds.","read":false}},{"id":"r0657","name":"Diagram Slide","job":"chart","video":"assets/remotion-catalog/657-Mason720__remotion-DiagramSlide.mp4","poster":"assets/remotion-catalog/657-Mason720__remotion-DiagramSlide.jpg","w":1280,"h":720,"seconds":2.05,"use":"# see the source for how to run it\nhttps://github.com/Mason720/remotion","takes":{"how":"props","what":["colors","text"],"line":"Props (zod schema): title, type (mermaid or d2), diagram (the diagram source), theme (default, dark, forest, neutral), sketch, className.","read":true}},{"id":"r0658","name":"Zoomable Video","job":"scene","video":"assets/remotion-catalog/658-Mason720__remotion-ZoomableVideo.mp4","poster":"assets/remotion-catalog/658-Mason720__remotion-ZoomableVideo.jpg","w":1280,"h":720,"seconds":2.05,"use":"# see the source for how to run it\nhttps://github.com/Mason720/remotion","takes":{"how":"props","what":["pictures"],"line":"Props (zod schema): src, zoomSegments, transformOrigin.","read":false}}]},{"name":"wangjs-jacky/remotion-playground","url":"https://github.com/wangjs-jacky/remotion-playground","licence":{"name":"MIT","basis":"README"},"line":"Eleven small studies: fade, spring, typewriter, word highlight, sequence timing.","hand_written":false,"shelf":"more","jobs":["move","number","title","callout"],"needs":{"remotion":"4.0.441","packages":["remotion","zod"]},"pieces":[{"id":"r0342","name":"Fade In","job":"move","video":"assets/remotion-catalog/342-wangjs-jacky__remotion-playground-FadeIn.mp4","poster":"assets/remotion-catalog/342-wangjs-jacky__remotion-playground-FadeIn.jpg","w":1920,"h":1080,"seconds":3.05,"use":"npm install remotion-playground\n# then import the part you want; the README at https://github.com/wangjs-jacky/remotion-playground lists them","takes":{"how":"edit the file","what":["colors","type"],"line":"No inputs. A few colors and fonts written in the demo file.","read":false}},{"id":"r0343","name":"Scale Rotate","job":"move","video":"assets/remotion-catalog/343-wangjs-jacky__remotion-playground-ScaleRotate.mp4","poster":"assets/remotion-catalog/343-wangjs-jacky__remotion-playground-ScaleRotate.jpg","w":1920,"h":1080,"seconds":3.05,"use":"npm install remotion-playground\n# then import the part you want; the README at https://github.com/wangjs-jacky/remotion-playground lists them","takes":{"how":"edit the file","what":["colors","type"],"line":"No inputs. A few colors and fonts written in the demo file.","read":false}},{"id":"r0344","name":"Spring","job":"move","video":"assets/remotion-catalog/344-wangjs-jacky__remotion-playground-Spring.mp4","poster":"assets/remotion-catalog/344-wangjs-jacky__remotion-playground-Spring.jpg","w":1920,"h":1080,"seconds":4.05,"use":"npm install remotion-playground\n# then import the part you want; the README at https://github.com/wangjs-jacky/remotion-playground lists them","takes":{"how":"edit the file","what":["colors","type"],"line":"No inputs. A few colors and fonts written in the demo file.","read":false}},{"id":"r0345","name":"Typewriter","job":"title","video":"assets/remotion-catalog/345-wangjs-jacky__remotion-playground-Typewriter.mp4","poster":"assets/remotion-catalog/345-wangjs-jacky__remotion-playground-Typewriter.jpg","w":1920,"h":1080,"seconds":5.06,"use":"npm install remotion-playground\n# then import the part you want; the README at https://github.com/wangjs-jacky/remotion-playground lists them","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No inputs. The lines are a LINES list at the top of TypewriterDemo.tsx; five colors and two fonts are written in the JSX.","read":true}},{"id":"r0346","name":"Word Highlight","job":"callout","video":"assets/remotion-catalog/346-wangjs-jacky__remotion-playground-WordHighlight.mp4","poster":"assets/remotion-catalog/346-wangjs-jacky__remotion-playground-WordHighlight.jpg","w":1920,"h":1080,"seconds":3.05,"use":"npm install remotion-playground\n# then import the part you want; the README at https://github.com/wangjs-jacky/remotion-playground lists them","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No inputs. The words are a WORDS list at the top of WordHighlightDemo.tsx; five colors and two fonts are written in the JSX.","read":true}},{"id":"r0347","name":"Sequence Timing","job":"move","video":"assets/remotion-catalog/347-wangjs-jacky__remotion-playground-SequenceTiming.mp4","poster":"assets/remotion-catalog/347-wangjs-jacky__remotion-playground-SequenceTiming.jpg","w":1920,"h":1080,"seconds":5.06,"use":"npm install remotion-playground\n# then import the part you want; the README at https://github.com/wangjs-jacky/remotion-playground lists them","takes":{"how":"edit the file","what":["colors","type"],"line":"No inputs. A few colors and fonts written in the demo file.","read":false}},{"id":"r0348","name":"Transitions","job":"transition","video":"assets/remotion-catalog/348-wangjs-jacky__remotion-playground-Transitions.mp4","poster":"assets/remotion-catalog/348-wangjs-jacky__remotion-playground-Transitions.jpg","w":1920,"h":1080,"seconds":6.06,"use":"npm install remotion-playground\n# then import the part you want; the README at https://github.com/wangjs-jacky/remotion-playground lists them","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No inputs. Each scene's background color and words are passed to a small Scene helper inside TransitionDemo.tsx; fonts are written in the JSX.","read":true}},{"id":"r0349","name":"Bar Chart","job":"number","video":"assets/remotion-catalog/349-wangjs-jacky__remotion-playground-BarChart.mp4","poster":"assets/remotion-catalog/349-wangjs-jacky__remotion-playground-BarChart.jpg","w":1920,"h":1080,"seconds":3.05,"use":"npm install remotion-playground\n# then import the part you want; the README at https://github.com/wangjs-jacky/remotion-playground lists them","takes":{"how":"edit the file","what":["colors","type","text","numbers"],"line":"No inputs. Labels, values and bar colors are a DATA list at the top of BarChartDemo.tsx; sizes are constants below it; the other colors and fonts are in the JSX.","read":true}},{"id":"r0350","name":"Pie Chart","job":"number","video":"assets/remotion-catalog/350-wangjs-jacky__remotion-playground-PieChart.mp4","poster":"assets/remotion-catalog/350-wangjs-jacky__remotion-playground-PieChart.jpg","w":1920,"h":1080,"seconds":4.05,"use":"npm install remotion-playground\n# then import the part you want; the README at https://github.com/wangjs-jacky/remotion-playground lists them","takes":{"how":"edit the file","what":["colors","type","text","numbers"],"line":"No inputs. Eight color values and three font uses written in PieChartDemo.tsx; expect a DATA list at the top like the bar chart.","read":false}},{"id":"r0351","name":"Parameterized Video","job":"overlay","video":"assets/remotion-catalog/351-wangjs-jacky__remotion-playground-ParameterizedVideo.mp4","poster":"assets/remotion-catalog/351-wangjs-jacky__remotion-playground-ParameterizedVideo.jpg","w":1920,"h":1080,"seconds":3.05,"use":"npm install remotion-playground\n# then import the part you want; the README at https://github.com/wangjs-jacky/remotion-playground lists them","takes":{"how":"props","what":["colors","text"],"line":"Props (zod schema, color pickers): title, subtitle, bgColor, textColor. Fonts are written in the file.","read":true}},{"id":"r0352","name":"Tech Grid","job":"ground","video":"assets/remotion-catalog/352-wangjs-jacky__remotion-playground-TechGrid.mp4","poster":"assets/remotion-catalog/352-wangjs-jacky__remotion-playground-TechGrid.jpg","w":2560,"h":1440,"seconds":10.05,"use":"npm install remotion-playground\n# then import the part you want; the README at https://github.com/wangjs-jacky/remotion-playground lists them","takes":{"how":"edit the file","what":["colors"],"line":"No inputs. About 12 color values written in TechGridDemo.tsx.","read":false}}]},{"name":"clawnify/open-video","url":"https://github.com/clawnify/open-video","licence":{"name":"MIT","basis":"README"},"line":"A moving gradient wave, a title card, a countdown, a logo reveal.","hand_written":true,"shelf":"more","jobs":["scene","title","logo","ground"],"needs":{"remotion":"4.0.448","packages":["@cloudflare/puppeteer","@hono/zod-openapi","remotion","zod"]},"pieces":[{"id":"r0453","name":"Title Card","job":"title","video":"assets/remotion-catalog/453-clawnify__open-video-TitleCard.mp4","poster":"assets/remotion-catalog/453-clawnify__open-video-TitleCard.jpg","w":1920,"h":1080,"seconds":5.06,"use":"git clone https://github.com/clawnify/open-video\ncd open-video\nnpm install\nnpx remotion render src/index.ts TitleCard out.mp4","takes":{"how":"props","what":["colors","text"],"line":"Props (zod schema, color pickers): title, subtitle, backgroundColor, textColor, accentColor. The font (Inter) is written in the file.","read":true}},{"id":"r0454","name":"Kinetic Text","job":"title","video":"assets/remotion-catalog/454-clawnify__open-video-KineticText.mp4","poster":"assets/remotion-catalog/454-clawnify__open-video-KineticText.jpg","w":1920,"h":1080,"seconds":6.06,"use":"git clone https://github.com/clawnify/open-video\ncd open-video\nnpm install\nnpx remotion render src/index.ts KineticText out.mp4","takes":{"how":"props","what":["colors","text"],"line":"Props (zod schema): lines[], backgroundColor, textColor, accentColor, fontWeight. The font (Inter) is written in the file.","read":true}},{"id":"r0455","name":"Social Post","job":"scene","video":"assets/remotion-catalog/455-clawnify__open-video-SocialPost.mp4","poster":"assets/remotion-catalog/455-clawnify__open-video-SocialPost.jpg","w":1080,"h":1080,"seconds":4.05,"use":"git clone https://github.com/clawnify/open-video\ncd open-video\nnpm install\nnpx remotion render src/index.ts SocialPost out.mp4","takes":{"how":"props","what":["colors","text"],"line":"Props (zod schema): headline, body, cta, backgroundColor, textColor, accentColor.","read":false}},{"id":"r0456","name":"Countdown","job":"scene","video":"assets/remotion-catalog/456-clawnify__open-video-Countdown.mp4","poster":"assets/remotion-catalog/456-clawnify__open-video-Countdown.jpg","w":1920,"h":1080,"seconds":7.06,"use":"git clone https://github.com/clawnify/open-video\ncd open-video\nnpm install\nnpx remotion render src/index.ts Countdown out.mp4","takes":{"how":"props","what":["colors","text"],"line":"Props (zod schema): from, endText, backgroundColor, textColor, accentColor.","read":false}},{"id":"r0457","name":"Logo Reveal","job":"logo","video":"assets/remotion-library/r0457-lej.mp4","poster":"assets/remotion-library/r0457-lej-poster.jpg","w":1920,"h":1080,"seconds":4.05,"use":"git clone https://github.com/clawnify/open-video\ncd open-video\nnpm install\nnpx remotion render src/index.ts LogoReveal out.mp4","takes":{"how":"props","what":["colors","text"],"line":"Props (zod schema): text, tagline, backgroundColor, textColor, accentColor. The logo is a word set in type, not a picture; there is no image slot. The font (Inter) is written in the file.","read":true}},{"id":"r0458","name":"Gradient Wave","job":"ground","video":"assets/remotion-catalog/458-clawnify__open-video-GradientWave.mp4","poster":"assets/remotion-library/poster-r0458.jpg","w":1920,"h":1080,"seconds":6.06,"use":"git clone https://github.com/clawnify/open-video\ncd open-video\nnpm install\nnpx remotion render src/index.ts GradientWave out.mp4","takes":{"how":"props","what":["colors","text"],"line":"Props (zod schema): title, subtitle, colorFrom, colorTo, textColor. The font (Inter) is written in the file.","read":true}},{"id":"r0459","name":"Babette Welcome","job":"scene","video":"assets/remotion-catalog/459-clawnify__open-video-BabetteWelcome.mp4","poster":"assets/remotion-catalog/459-clawnify__open-video-BabetteWelcome.jpg","w":1920,"h":1080,"seconds":5.06,"use":"git clone https://github.com/clawnify/open-video\ncd open-video\nnpm install\nnpx remotion render src/index.ts BabetteWelcome out.mp4","takes":{"how":"props","what":["colors","text"],"line":"Props: salonName, tagline, welcomeText, locationText, backgroundColor, textColor, accentColor, goldColor, mutedColor.","read":true}}]},{"name":"nullxnothing/claude-auto-tok","url":"https://github.com/nullxnothing/claude-auto-tok","licence":{"name":"MIT","basis":"README"},"line":"Parts for tall shorts: a terminal reveal, a stat card that drops, a countdown list.","hand_written":false,"shelf":"more","jobs":["caption","code","number","title"],"needs":{"remotion":"^4.0.443","packages":["@anthropic-ai/sdk","playwright","remotion"]},"pieces":[{"id":"r0595","name":"Terminal Reveal","job":"code","video":"assets/remotion-catalog/595-nullxnothing__claude-auto-tok-TerminalReveal.mp4","poster":"assets/remotion-catalog/595-nullxnothing__claude-auto-tok-TerminalReveal.jpg","w":1080,"h":1920,"seconds":30.06,"use":"git clone https://github.com/nullxnothing/claude-auto-tok\ncd claude-auto-tok\nnpm install\nnpx remotion render src/remotion/Root.tsx TerminalReveal out.mp4","takes":{"how":"props","what":["colors","text"],"line":"All six templates take the same props: script {hook_text_onscreen, voiceover_text, overlays[] {second, text, position}, caption, hashtags}, colorPalette (one of four named palettes in src/remotion/palettes.ts, three colors each: bg, accent, text), duration, wordTimings, scenes, voiceoverSrc,…","read":true}},{"id":"r0596","name":"Stat Card Drop","job":"number","video":"assets/remotion-catalog/596-nullxnothing__claude-auto-tok-StatCardDrop.mp4","poster":"assets/remotion-catalog/596-nullxnothing__claude-auto-tok-StatCardDrop.jpg","w":1080,"h":1920,"seconds":30.06,"use":"git clone https://github.com/nullxnothing/claude-auto-tok\ncd claude-auto-tok\nnpm install\nnpx remotion render src/remotion/Root.tsx StatCardDrop out.mp4","takes":{"how":"props","what":["colors","text"],"line":"All six templates take the same props: script {hook_text_onscreen, voiceover_text, overlays[] {second, text, position}, caption, hashtags}, colorPalette (one of four named palettes in src/remotion/palettes.ts, three colors each: bg, accent, text), duration, wordTimings, scenes, voiceoverSrc,…","read":true}},{"id":"r0597","name":"Split Reveal","job":"caption","video":"assets/remotion-catalog/597-nullxnothing__claude-auto-tok-SplitReveal.mp4","poster":"assets/remotion-catalog/597-nullxnothing__claude-auto-tok-SplitReveal.jpg","w":1080,"h":1920,"seconds":30.06,"use":"git clone https://github.com/nullxnothing/claude-auto-tok\ncd claude-auto-tok\nnpm install\nnpx remotion render src/remotion/Root.tsx SplitReveal out.mp4","takes":{"how":"props","what":["colors","text"],"line":"All six templates take the same props: script {hook_text_onscreen, voiceover_text, overlays[] {second, text, position}, caption, hashtags}, colorPalette (one of four named palettes in src/remotion/palettes.ts, three colors each: bg, accent, text), duration, wordTimings, scenes, voiceoverSrc,…","read":true}},{"id":"r0598","name":"Countdown List","job":"caption","video":"assets/remotion-catalog/598-nullxnothing__claude-auto-tok-CountdownList.mp4","poster":"assets/remotion-catalog/598-nullxnothing__claude-auto-tok-CountdownList.jpg","w":1080,"h":1920,"seconds":30.06,"use":"git clone https://github.com/nullxnothing/claude-auto-tok\ncd claude-auto-tok\nnpm install\nnpx remotion render src/remotion/Root.tsx CountdownList out.mp4","takes":{"how":"props","what":["colors","text"],"line":"All six templates take the same props: script {hook_text_onscreen, voiceover_text, overlays[] {second, text, position}, caption, hashtags}, colorPalette (one of four named palettes in src/remotion/palettes.ts, three colors each: bg, accent, text), duration, wordTimings, scenes, voiceoverSrc,…","read":true}},{"id":"r0599","name":"Cinematic Text","job":"title","video":"assets/remotion-catalog/599-nullxnothing__claude-auto-tok-CinematicText.mp4","poster":"assets/remotion-catalog/599-nullxnothing__claude-auto-tok-CinematicText.jpg","w":1080,"h":1920,"seconds":30.06,"use":"git clone https://github.com/nullxnothing/claude-auto-tok\ncd claude-auto-tok\nnpm install\nnpx remotion render src/remotion/Root.tsx CinematicText out.mp4","takes":{"how":"props","what":["colors","text"],"line":"All six templates take the same props: script {hook_text_onscreen, voiceover_text, overlays[] {second, text, position}, caption, hashtags}, colorPalette (one of four named palettes in src/remotion/palettes.ts, three colors each: bg, accent, text), duration, wordTimings, scenes, voiceoverSrc,…","read":true}},{"id":"r0600","name":"Screen Record Sim","job":"caption","video":"assets/remotion-catalog/600-nullxnothing__claude-auto-tok-ScreenRecordSim.mp4","poster":"assets/remotion-catalog/600-nullxnothing__claude-auto-tok-ScreenRecordSim.jpg","w":1080,"h":1920,"seconds":30.06,"use":"git clone https://github.com/nullxnothing/claude-auto-tok\ncd claude-auto-tok\nnpm install\nnpx remotion render src/remotion/Root.tsx ScreenRecordSim out.mp4","takes":{"how":"props","what":["colors","text"],"line":"All six templates take the same props: script {hook_text_onscreen, voiceover_text, overlays[] {second, text, position}, caption, hashtags}, colorPalette (one of four named palettes in src/remotion/palettes.ts, three colors each: bg, accent, text), duration, wordTimings, scenes, voiceoverSrc,…","read":true}}]},{"name":"av/remotion-bits","url":"https://github.com/av/remotion-bits","licence":{"name":"MIT","basis":"README"},"line":"Small parts: animated text, a counter, matrix rain.","hand_written":true,"shelf":"more","jobs":["title","number","ground","kit"],"needs":{"remotion":">=4","packages":["@tailwindcss/vite","@vitejs/plugin-react","prism-react-renderer","remotion","remotion-bits","tailwind-merge","tailwindcss","three"]},"pieces":[{"id":"r0163","name":"Animated text","job":"title","video":"assets/remotion-catalog/163-av__remotion-bits-candidate-av-remotion-bits-animated-text.mp4","poster":"assets/remotion-catalog/163-av__remotion-bits-candidate-av-remotion-bits-animated-text.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-bits\n# then import the part you want; the README at https://github.com/av/remotion-bits lists them","takes":{"how":"props","what":["colors","type","text"],"line":"Props: transition (the motion), style, className, children. It holds no colors or type of its own: pass them in style, and the words as children.","read":true}},{"id":"r0164","name":"Animated counter","job":"number","video":"assets/remotion-catalog/164-av__remotion-bits-candidate-av-remotion-bits-animated-counter.mp4","poster":"assets/remotion-catalog/164-av__remotion-bits-candidate-av-remotion-bits-animated-counter.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-bits\n# then import the part you want; the README at https://github.com/av/remotion-bits lists them","takes":{"how":"props","what":["colors","type","numbers"],"line":"Props: transition.values (the numbers to count between), prefix, postfix, toFixed, style, className. Colors and type go in style.","read":true}},{"id":"r0165","name":"Matrix rain","job":"ground","video":"assets/remotion-catalog/165-av__remotion-bits-candidate-av-remotion-bits-matrix-rain.mp4","poster":"assets/remotion-catalog/165-av__remotion-bits-candidate-av-remotion-bits-matrix-rain.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-bits\n# then import the part you want; the README at https://github.com/av/remotion-bits lists them","takes":{"how":"props","what":["colors"],"line":"Props: color, fontSize, speed, density, streamLength, charset. The font is monospace, written in the file.","read":true}},{"id":"r0546","name":"Showcase","job":"kit","video":"assets/remotion-catalog/546-av__remotion-bits-av-remotion-bits-showcase.mp4","poster":"assets/remotion-catalog/546-av__remotion-bits-av-remotion-bits-showcase.jpg","w":1280,"h":720,"seconds":5.06,"use":"npm install remotion-bits\n# then import the part you want; the README at https://github.com/av/remotion-bits lists them","takes":{"how":"props","what":["colors","type","text","numbers"],"line":"The showcase clip was put together as this library's preview; the parts it shows take props: AnimatedCounter (transition.values, prefix, postfix, toFixed, style), MatrixRain (color, fontSize, speed, density), TypeWriter (text[], typeSpeed, deleteSpeed). Colors and type go in style.","read":true}}]},{"name":"itsjwill/vanta","url":"https://github.com/itsjwill/vanta","licence":{"name":"MIT","basis":"licence file"},"line":"A showcase reel with kinetic text, a data chart and a waveform.","hand_written":false,"shelf":"more","jobs":["caption","title","ground"],"needs":{"remotion":"^4.0.0","packages":["remotion"]},"pieces":[{"id":"r0198","name":"Vanta Showcase","job":"caption","video":"assets/remotion-catalog/198-itsjwill__vanta-VantaShowcase.mp4","poster":"assets/remotion-catalog/198-itsjwill__vanta-VantaShowcase.jpg","w":1920,"h":1080,"seconds":15.06,"use":"git clone https://github.com/itsjwill/vanta\ncd vanta\nnpm install\nnpx remotion render src/index.ts VantaShowcase out.mp4","takes":{"how":"edit the file","what":["text"],"line":"No inputs. A 95-line file that plays the kit's other scenes in order and passes them their words; colors live in those scenes.","read":true}},{"id":"r0200","name":"Kinetic Text","job":"title","video":"assets/remotion-catalog/200-itsjwill__vanta-KineticText.mp4","poster":"assets/remotion-catalog/200-itsjwill__vanta-KineticText.jpg","w":1920,"h":1080,"seconds":4.05,"use":"git clone https://github.com/itsjwill/vanta\ncd vanta\nnpm install\nnpx remotion render src/index.ts KineticText out.mp4","takes":{"how":"props","what":["text"],"line":"Props: text, subtitle. Colors and the monospace font are written in KineticText.tsx.","read":true}},{"id":"r0201","name":"Data Viz","job":"caption","video":"assets/remotion-catalog/201-itsjwill__vanta-DataViz.mp4","poster":"assets/remotion-catalog/201-itsjwill__vanta-DataViz.jpg","w":1920,"h":1080,"seconds":4.05,"use":"git clone https://github.com/itsjwill/vanta\ncd vanta\nnpm install\nnpx remotion render src/index.ts DataViz out.mp4","takes":{"how":"edit the file","what":["colors","type","text","numbers"],"line":"No inputs. Labels and values are a DATA list at the top of DataVizScene.tsx; colors and the monospace font are in the JSX.","read":true}},{"id":"r0202","name":"Waveform","job":"ground","video":"assets/remotion-catalog/202-itsjwill__vanta-Waveform.mp4","poster":"assets/remotion-catalog/202-itsjwill__vanta-Waveform.jpg","w":1920,"h":1080,"seconds":4.05,"use":"git clone https://github.com/itsjwill/vanta\ncd vanta\nnpm install\nnpx remotion render src/index.ts Waveform out.mp4","takes":{"how":"edit the file","what":["colors","type"],"line":"No inputs. Five color values and the font are written in WaveformScene.tsx.","read":false}}]},{"name":"armandogon94/Video-Automation-Remotion","url":"https://github.com/armandogon94/Video-Automation-Remotion","licence":{"name":"MIT","basis":"package.json"},"line":"Four formats in one project: explainer, talking head, listicle, quote card.","hand_written":false,"shelf":"more","jobs":["title","quote"],"needs":{"remotion":"4.0.443","packages":["remotion","vitest","zod"]},"pieces":[{"id":"r0232","name":"Explainer Video","job":"title","video":"assets/remotion-catalog/232-armandogon94__Video-Automation-Remotion-ExplainerVideo.mp4","poster":"assets/remotion-catalog/232-armandogon94__Video-Automation-Remotion-ExplainerVideo.jpg","w":1920,"h":1080,"seconds":10.05,"use":"git clone https://github.com/armandogon94/Video-Automation-Remotion\ncd Video-Automation-Remotion\nnpm install\nnpx remotion render src/index.ts ExplainerVideo out.mp4","takes":{"how":"props","what":["colors","type","text"],"line":"Props (zod schema): title, script, audioUrl, wordTimings, backgroundColor, gradientTo, accentColor, textColor, fontFamily, captions.","read":true}},{"id":"r0233","name":"Talking Head","job":"title","video":"assets/remotion-catalog/233-armandogon94__Video-Automation-Remotion-TalkingHead.mp4","poster":"assets/remotion-catalog/233-armandogon94__Video-Automation-Remotion-TalkingHead.jpg","w":1920,"h":1080,"seconds":10.05,"use":"git clone https://github.com/armandogon94/Video-Automation-Remotion\ncd Video-Automation-Remotion\nnpm install\nnpx remotion render src/index.ts TalkingHead out.mp4","takes":{"how":"props","what":["colors","text","pictures"],"line":"Props (zod schema): title, audioUrl, speakerImageUrl, wordTimings, backgroundColor, nameTag, nameTagColor, captions.","read":false}},{"id":"r0234","name":"Listicle","job":"title","video":"assets/remotion-catalog/234-armandogon94__Video-Automation-Remotion-Listicle.mp4","poster":"assets/remotion-catalog/234-armandogon94__Video-Automation-Remotion-Listicle.jpg","w":1920,"h":1080,"seconds":20.05,"use":"git clone https://github.com/armandogon94/Video-Automation-Remotion\ncd Video-Automation-Remotion\nnpm install\nnpx remotion render src/index.ts Listicle out.mp4","takes":{"how":"props","what":["colors","text"],"line":"Props (zod schema): title, items, audioUrl, wordTimings, backgroundColor, gradientTo, accentColor, textColor, secondsPerItem, captions.","read":false}},{"id":"r0235","name":"Quote Card","job":"quote","video":"assets/remotion-catalog/235-armandogon94__Video-Automation-Remotion-QuoteCard.mp4","poster":"assets/remotion-catalog/235-armandogon94__Video-Automation-Remotion-QuoteCard.jpg","w":1920,"h":1080,"seconds":5.06,"use":"git clone https://github.com/armandogon94/Video-Automation-Remotion\ncd Video-Automation-Remotion\nnpm install\nnpx remotion render src/index.ts QuoteCard out.mp4","takes":{"how":"props","what":["colors","type","text"],"line":"Props (zod schema): quote, author, audioUrl, wordTimings, backgroundColor, quoteColor, authorColor, fontFamily, captions.","read":true}}]},{"name":"45ck/content-machine","url":"https://github.com/45ck/content-machine","licence":{"name":"MIT","basis":"licence file"},"line":"A short-video machine: captions and split screens.","hand_written":true,"shelf":"more","jobs":["caption","scene"],"needs":{"remotion":"^4.0.424","packages":["@anthropic-ai/sdk","@vitest/coverage-istanbul","@vitest/coverage-v8","ffmpeg-static","openai","playwright","remotion","vitest"]},"pieces":[{"id":"r0321","name":"Caption spacing test","job":"caption","video":"assets/remotion-catalog/321-45ck__content-machine-caption-spacing-test.mp4","poster":"assets/remotion-catalog/321-45ck__content-machine-caption-spacing-test.jpg","w":1080,"h":1920,"seconds":3.05,"use":"git clone https://github.com/45ck/content-machine\ncd content-machine\nnpm install\nnpx remotion render src/render/remotion/index.ts caption-spacing-test out.mp4","takes":{"how":"props","what":["colors","text"],"line":"Props: words[] {word, start, end}, config (the caption settings: textColor, highlightColor and layout values, checked by src/render/captions/config).","read":true}},{"id":"r0322","name":"Caption ocr test","job":"caption","video":"assets/remotion-catalog/322-45ck__content-machine-caption-ocr-test.mp4","poster":"assets/remotion-catalog/322-45ck__content-machine-caption-ocr-test.jpg","w":1080,"h":1920,"seconds":3.05,"use":"git clone https://github.com/45ck/content-machine\ncd content-machine\nnpm install\nnpx remotion render src/render/remotion/index.ts caption-ocr-test out.mp4","takes":{"how":"edit the file","what":["colors","text"],"line":"No inputs. A test card whose words and colors are written in CaptionSpacingTest.tsx.","read":true}},{"id":"r0659","name":"Short Video","job":"scene","video":"assets/remotion-catalog/659-45ck__content-machine-ShortVideo.mp4","poster":"assets/remotion-catalog/659-45ck__content-machine-ShortVideo.jpg","w":1080,"h":1920,"seconds":6.06,"use":"npm install @45ck/content-machine\n# then import the part you want; the README at https://github.com/45ck/content-machine lists them","takes":{"how":"props","what":["colors","type","text","pictures"],"line":"Props: scenes, clips, overlays, words, audioPath, audioMix, duration, captionConfig, hook, fonts.","read":false}},{"id":"r0660","name":"Split Screen Gameplay","job":"scene","video":"assets/remotion-catalog/660-45ck__content-machine-SplitScreenGameplay.mp4","poster":"assets/remotion-catalog/660-45ck__content-machine-SplitScreenGameplay.jpg","w":1080,"h":1920,"seconds":6.06,"use":"npm install @45ck/content-machine\n# then import the part you want; the README at https://github.com/45ck/content-machine lists them","takes":{"how":"props","what":["colors","text","pictures"],"line":"Props: scenes, clips, overlays, words, audioPath, captionConfig, gameplayClip, splitScreenRatio, gameplayPosition, contentPosition, hook, fonts.","read":false}}]},{"name":"IsaiahDupree/remotion-mcp-studio","url":"https://github.com/IsaiahDupree/remotion-mcp-studio","licence":{"name":"MIT","basis":"README"},"line":"A tall title card from a video studio project.","hand_written":false,"shelf":"more","jobs":["caption"],"needs":{"remotion":"4.0.443","packages":["@motion-canvas/2d","@motion-canvas/core","@motion-canvas/ffmpeg","@motion-canvas/ui","@motion-canvas/vite-plugin","@tailwindcss/postcss","eslint-config-next","next"]},"pieces":[{"id":"r0886","name":"Brief Composition","job":"caption","video":"assets/remotion-catalog/886-IsaiahDupree__remotion-mcp-studio-BriefComposition.mp4","poster":"assets/remotion-catalog/886-IsaiahDupree__remotion-mcp-studio-BriefComposition.jpg","w":1080,"h":1920,"seconds":10.05,"use":"git clone https://github.com/IsaiahDupree/remotion-mcp-studio\ncd remotion-mcp-studio\nnpm install\nnpx remotion render src/index.ts BriefComposition out.mp4","takes":{"how":"props","what":["colors","type","text","pictures"],"line":"Prop: brief, one object holding the sections (the words), a style block (a named theme from src/styles/themes plus your overrides), the background video and the audio.","read":true}}]},{"name":"lifeprompt-team/remotion-scenes","url":"https://github.com/lifeprompt-team/remotion-scenes","licence":{"name":"MIT","basis":"licence file"},"line":"A scene library: bar chart, glitch text, shape morph.","hand_written":true,"shelf":"more","jobs":["transition","number","title"],"needs":{"remotion":">=4.0.0","packages":["@react-three/drei","@react-three/fiber","@vitejs/plugin-react","remotion","three","vite"]},"pieces":[{"id":"r0166","name":"Shape morphing","job":"transition","video":"assets/remotion-catalog/166-lifeprompt-team__remotion-scenes-candidate-lifeprompt-shape-morphing.mp4","poster":"assets/remotion-catalog/166-lifeprompt-team__remotion-scenes-candidate-lifeprompt-shape-morphing.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-scenes\n# then import the part you want; the README at https://github.com/lifeprompt-team/remotion-scenes lists them","takes":{"how":"tokens","what":["colors","type"],"line":"Colors come from C in src/common/colors.ts (about 26 values) and the font from src/common/fonts.ts (Inter); every scene in the kit imports both. The words on screen are written in the scene. Its only prop is startDelay.","read":true}},{"id":"r0167","name":"Data bar chart","job":"number","video":"assets/remotion-catalog/167-lifeprompt-team__remotion-scenes-candidate-lifeprompt-data-bar-chart.mp4","poster":"assets/remotion-catalog/167-lifeprompt-team__remotion-scenes-candidate-lifeprompt-data-bar-chart.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-scenes\n# then import the part you want; the README at https://github.com/lifeprompt-team/remotion-scenes lists them","takes":{"how":"tokens","what":["colors","type"],"line":"Colors come from C in src/common/colors.ts (about 26 values) and the font from src/common/fonts.ts (Inter); every scene in the kit imports both. The title, labels and bar values are an array written in the scene. Its only prop is startDelay.","read":true}},{"id":"r0168","name":"Text glitch","job":"title","video":"assets/remotion-catalog/168-lifeprompt-team__remotion-scenes-candidate-lifeprompt-text-glitch.mp4","poster":"assets/remotion-catalog/168-lifeprompt-team__remotion-scenes-candidate-lifeprompt-text-glitch.jpg","w":1280,"h":720,"seconds":3.05,"use":"npm install remotion-scenes\n# then import the part you want; the README at https://github.com/lifeprompt-team/remotion-scenes lists them","takes":{"how":"props","what":["colors","type","text"],"line":"Props: text, startDelay. The font comes from src/common/fonts.ts and the base colors from src/common/colors.ts (shared by every scene); the red and cyan glitch colors are written in the file.","read":true}}]},{"name":"rutkat/my_remotion","url":"https://github.com/rutkat/my_remotion","licence":{"name":"MIT","basis":"licence file"},"line":"A sales dashboard that builds itself, a logo reveal and a data story.","hand_written":false,"shelf":"more","jobs":["chart","logo"],"needs":{"remotion":"4.0.460","packages":["@react-three/fiber","remotion","tailwindcss","three"]},"pieces":[{"id":"r0401","name":"Demo1 Sales Dashboard","job":"chart","video":"assets/remotion-catalog/401-rutkat__my_remotion-Demo1-SalesDashboard.mp4","poster":"assets/remotion-catalog/401-rutkat__my_remotion-Demo1-SalesDashboard.jpg","w":1280,"h":720,"seconds":5.06,"use":"# see the source for how to run it\nhttps://github.com/rutkat/my_remotion","takes":{"how":"tokens","what":["colors","type"],"line":"No inputs. Colors and fonts come from src/_shared/theme.ts (COLORS, about 30 values, and FONTS), shared by every demo. Labels and values are lists at the top of SalesDashboard.tsx (BAR_DATA and others).","read":true}},{"id":"r0403","name":"Demo3 Logo Reveal","job":"logo","video":"assets/remotion-catalog/403-rutkat__my_remotion-Demo3-LogoReveal.mp4","poster":"assets/remotion-catalog/403-rutkat__my_remotion-Demo3-LogoReveal.jpg","w":1280,"h":720,"seconds":5.06,"use":"# see the source for how to run it\nhttps://github.com/rutkat/my_remotion","takes":{"how":"edit the file","what":["colors","type","logo","text"],"line":"No inputs. The logo is two SVG path constants at the top of LogoReveal.tsx (LOGO_PATH_N, LOGO_PATH_P); about 18 color values are written in the file. Only the font comes from src/_shared/theme.ts.","read":true}},{"id":"r0404","name":"Demo6 Data Story","job":"chart","video":"assets/remotion-catalog/404-rutkat__my_remotion-Demo6-DataStory.mp4","poster":"assets/remotion-catalog/404-rutkat__my_remotion-Demo6-DataStory.jpg","w":1920,"h":1080,"seconds":6.06,"use":"# see the source for how to run it\nhttps://github.com/rutkat/my_remotion","takes":{"how":"tokens","what":["colors","type"],"line":"No inputs. Imports COLORS and FONTS from src/_shared/theme.ts; eight more color values are written in DataStory.tsx.","read":false}}]},{"name":"scotthavird/remotion-docker-template","url":"https://github.com/scotthavird/remotion-docker-template","licence":{"name":"MIT","basis":"licence file"},"line":"A transitions demo and a captions demo, set up to render in Docker.","hand_written":false,"shelf":"more","jobs":["transition","caption"],"needs":{"remotion":"4.0.459","packages":["remotion","tailwindcss","zod"]},"pieces":[{"id":"r0340","name":"Transitions Demo","job":"transition","video":"assets/remotion-catalog/340-scotthavird__remotion-docker-template-TransitionsDemo.mp4","poster":"assets/remotion-catalog/340-scotthavird__remotion-docker-template-TransitionsDemo.jpg","w":1920,"h":1080,"seconds":9.05,"use":"npm install remotion-docker-template\n# then import the part you want; the README at https://github.com/scotthavird/remotion-docker-template lists them","takes":{"how":"props","what":["colors","text"],"line":"Props (zod schema): sceneOneText, sceneTwoText, sceneThreeText. Colors come from src/theme/colors.ts (a palette file of named color scales), shared across the template.","read":true}},{"id":"r0341","name":"Captions Demo","job":"caption","video":"assets/remotion-catalog/341-scotthavird__remotion-docker-template-CaptionsDemo.mp4","poster":"assets/remotion-catalog/341-scotthavird__remotion-docker-template-CaptionsDemo.jpg","w":1080,"h":1920,"seconds":10.05,"use":"npm install remotion-docker-template\n# then import the part you want; the README at https://github.com/scotthavird/remotion-docker-template lists them","takes":{"how":"props","what":["colors","text"],"line":"Prop (zod schema): srtPath, the caption file. Colors come from src/theme/colors.ts, shared across the template.","read":true}}]},{"name":"remotion-ui/remotion-ui","url":"https://github.com/remotion-ui/remotion-ui","licence":{"name":"MIT","basis":"package.json"},"line":"A small component library for video UI.","hand_written":true,"shelf":"more","jobs":["kit","transition"],"needs":{"remotion":"^4.0.0","packages":["@lottiefiles/dotlottie-web","@remotion-ui/core","@remotion-ui/eslint-config","@remotion-ui/themes","@remotion-ui/ts-config","@vitest/coverage-v8","remotion","vitest"]},"pieces":[{"id":"r0485","name":"Showcase","job":"kit","video":"assets/remotion-catalog/485-rrh1441__remotion-ui-rrh1441-remotion-ui-showcase.mp4","poster":"assets/remotion-catalog/485-rrh1441__remotion-ui-rrh1441-remotion-ui-showcase.jpg","w":1280,"h":720,"seconds":5.06,"use":"# see the source for how to run it\nhttps://github.com/remotion-ui/remotion-ui","takes":{"how":"props","what":["colors","type","text","numbers"],"line":"The showcase clip was put together as this library's preview; the parts it shows are TitleCard (title, subtitle), LowerThird (primary, secondary, align, startAt) and StatBlock (value, label, delta, startAt). Their colors (about 25 named tokens) and type come from a theme passed down by the kit's…","read":true}},{"id":"r0486","name":"Crossfade","job":"transition","video":"assets/remotion-catalog/486-rrh1441__remotion-ui-rrh1441-remotion-ui-crossfade.mp4","poster":"assets/remotion-catalog/486-rrh1441__remotion-ui-rrh1441-remotion-ui-crossfade.jpg","w":1280,"h":720,"seconds":4.05,"use":"# see the source for how to run it\nhttps://github.com/remotion-ui/remotion-ui","takes":{"how":"props","what":[],"line":"Props: from, to (any two scenes), startAt, durationInFrames, style, className. It holds no colors, type or words of its own.","read":true}}]},{"name":"lhr0909/asciinema-mp4","url":"https://github.com/lhr0909/asciinema-mp4","licence":{"name":"MIT","basis":"README"},"line":"Plays a recorded terminal session as video.","hand_written":false,"shelf":"more","jobs":["chart"],"needs":{"remotion":"3.3.37","packages":["remotion","tailwindcss"]},"pieces":[{"id":"r0169","name":"Asciinema player","job":"chart","video":"assets/remotion-catalog/169-lhr0909__asciinema-mp4-candidate-lhr0909-asciinema-player.mp4","poster":"assets/remotion-catalog/169-lhr0909__asciinema-mp4-candidate-lhr0909-asciinema-player.jpg","w":1920,"h":1080,"seconds":3.05,"use":"npm install asciinema-mp4\n# then import the part you want; the README at https://github.com/lhr0909/asciinema-mp4 lists them","takes":{"how":"edit the file","what":[],"line":"No inputs. It plays the terminal recording public/test.cast with the asciinema-player package; the look is that package's stylesheet, so there are no colors or words in the piece to change.","read":true}}]},{"name":"Code-Hive-Colombia/snipcast","url":"https://github.com/Code-Hive-Colombia/snipcast","licence":{"name":"MIT","basis":"package.json"},"line":"A code snippet shown in an editor window.","hand_written":false,"shelf":"more","jobs":["code"],"needs":{"remotion":"^4.0.402","packages":["canvas","remotion","shiki","zod"]},"pieces":[{"id":"r0226","name":"Code Video","job":"code","video":"assets/remotion-catalog/226-Code-Hive-Colombia__snipcast-CodeVideo.mp4","poster":"assets/remotion-catalog/226-Code-Hive-Colombia__snipcast-CodeVideo.jpg","w":1920,"h":1080,"seconds":5.06,"use":"npm install snipcast\n# then import the part you want; the README at https://github.com/Code-Hive-Colombia/snipcast lists them"}]},{"name":"remotion-dev/remotion-three-gltf-example","url":"https://github.com/remotion-dev/remotion-three-gltf-example","licence":{"name":"MIT","basis":"licence file"},"line":"A 3D model turning in space. Remotion's own example.","hand_written":true,"shelf":"more","jobs":["3d"],"needs":{"remotion":"4.0.120","packages":["@react-three/drei","@react-three/fiber","drei","remotion","three"]},"pieces":[{"id":"r0243","name":"Scene","job":"3d","video":"assets/remotion-catalog/243-remotion-dev__remotion-three-gltf-example-Scene.mp4","poster":"assets/remotion-catalog/243-remotion-dev__remotion-three-gltf-example-Scene.jpg","w":1280,"h":720,"seconds":10,"use":"npm install remotion-template-three\n# then import the part you want; the README at https://github.com/remotion-dev/remotion-three-gltf-example lists them","takes":{"how":"edit the file","what":["colors"],"line":"Registered with videoSrc and baseScale, but the 19-line scene ignores them. The background color is written in Scene.tsx and the model is loaded by a component it imports.","read":true}}]},{"name":"mlands66397/remotion-saas-video-factory","url":"https://github.com/mlands66397/remotion-saas-video-factory","licence":{"name":"MIT","basis":"licence file"},"line":"A tall promo card template.","hand_written":false,"shelf":"more","jobs":["chart"],"needs":{"remotion":"4.0.448","packages":["remotion"]},"pieces":[{"id":"r0269","name":"Template","job":"chart","video":"assets/remotion-catalog/269-mlands66397__remotion-saas-video-factory-Template.mp4","poster":"assets/remotion-catalog/269-mlands66397__remotion-saas-video-factory-Template.jpg","w":1080,"h":1920,"seconds":5.06,"use":"git clone https://github.com/mlands66397/remotion-saas-video-factory\ncd remotion-saas-video-factory\nnpm install\nnpx remotion render src/index.ts Template out.mp4","takes":{"how":"props","what":["text"],"line":"Props: name, city, product. Four colors and the font are written in Template.tsx.","read":true}}]},{"name":"LionsTheme/remotion-video-generator","url":"https://github.com/LionsTheme/remotion-video-generator","licence":{"name":"MIT","basis":"README"},"line":"Kinetic type: one line of text, animated in.","hand_written":false,"shelf":"more","jobs":["title"],"needs":{"remotion":"^4.0.409","packages":["@anthropic-ai/sdk","@tailwindcss/postcss","eslint-config-next","next","remotion","tailwind-merge","tailwindcss","zod"]},"pieces":[{"id":"r0330","name":"Text Animation","job":"title","video":"assets/remotion-catalog/330-LionsTheme__remotion-video-generator-TextAnimation.mp4","poster":"assets/remotion-catalog/330-LionsTheme__remotion-video-generator-TextAnimation.jpg","w":1920,"h":1080,"seconds":10.05,"use":"git clone https://github.com/LionsTheme/remotion-video-generator\ncd remotion-video-generator\nnpm install\nnpx remotion render src/remotion/index.ts TextAnimation out.mp4","takes":{"how":"props","what":["colors","text"],"line":"Prop (zod schema): script {title, scenes[] {text, bgColor, textColor, animation, fontSize, startSec, durationSec}}. The font is written in the file.","read":true}}]},{"name":"tianmind-studio/codex-remotion-demo","url":"https://github.com/tianmind-studio/codex-remotion-demo","licence":{"name":"MIT","basis":"licence file"},"line":"A short demo of code turning into video.","hand_written":true,"shelf":"more","jobs":["code"],"needs":{"remotion":"4.0.456","packages":["remotion","tailwindcss"]},"pieces":[{"id":"r0405","name":"Codex Remotion Demo","job":"code","video":"assets/remotion-catalog/405-tianmind-studio__codex-remotion-demo-CodexRemotionDemo.mp4","poster":"assets/remotion-catalog/405-tianmind-studio__codex-remotion-demo-CodexRemotionDemo.jpg","w":1280,"h":720,"seconds":9.05,"use":"# see the source for how to run it\nhttps://github.com/tianmind-studio/codex-remotion-demo","takes":{"how":"edit the file","what":["colors","text"],"line":"No inputs. One palette object at the top of Composition.tsx (about 9 named colors) feeds the piece; words are written in the JSX.","read":true}}]},{"name":"pskd73/remotion-animate-text","url":"https://github.com/pskd73/remotion-animate-text","licence":{"name":"MIT","basis":"licence file"},"line":"A library that animates text letter by letter.","hand_written":false,"shelf":"more","jobs":["title"],"needs":{"remotion":"^4.0.46","packages":["remotion","remotion-animate-text","zod"]},"pieces":[{"id":"r0484","name":"Animate text","job":"title","video":"assets/remotion-catalog/484-pskd73__remotion-animate-text-pskd73-remotion-animate-text.mp4","poster":"assets/remotion-catalog/484-pskd73__remotion-animate-text-pskd73-remotion-animate-text.jpg","w":1280,"h":720,"seconds":4.05,"use":"# see the source for how to run it\nhttps://github.com/pskd73/remotion-animate-text","takes":{"how":"props","what":["text"],"line":"Props: duration, animation {delimiter, opacity, x, y, scale, rotate, durations}, and the words as children. Colors and type come from the element you wrap around it. The clip itself is a demo written as this library's preview.","read":true}}]},{"name":"j2masamitu/remotion-go-board","url":"https://github.com/j2masamitu/remotion-go-board","licence":{"name":"MIT","basis":"README"},"line":"A Go board with numbered stones.","hand_written":false,"shelf":"more","jobs":["chart"],"needs":{"remotion":">=4.0","packages":["remotion"]},"pieces":[{"id":"r0487","name":"Go board","job":"chart","video":"assets/remotion-catalog/487-j2masamitu__remotion-go-board-j2masamitu-remotion-go-board.mp4","poster":"assets/remotion-catalog/487-j2masamitu__remotion-go-board-j2masamitu-remotion-go-board.jpg","w":1280,"h":720,"seconds":5.06,"use":"npm install remotion-go-board\n# then import the part you want; the README at https://github.com/j2masamitu/remotion-go-board lists them","takes":{"how":"props","what":[],"line":"Props: sgf (the game record), startMove, endMove, speed, boardSize, showNumbers. Board and stone colors were not checked.","read":true}}]},{"name":"jaebong-human/audiobook-gen","url":"https://github.com/jaebong-human/audiobook-gen","licence":{"name":"MIT","basis":"licence file"},"line":"An audiobook scene over a full-frame picture.","hand_written":false,"shelf":"more","jobs":["audio"],"needs":{"remotion":"^4.0.448","packages":["mediabunny","openai","remotion","zod"]},"pieces":[{"id":"r0530","name":"The night shift","job":"audio","video":"assets/remotion-catalog/530-jaebong-human__audiobook-gen-the-night-shift.mp4","poster":"assets/remotion-catalog/530-jaebong-human__audiobook-gen-the-night-shift.jpg","w":1920,"h":1080,"seconds":60.93,"use":"git clone https://github.com/jaebong-human/audiobook-gen\ncd audiobook-gen\nnpm install\nnpx remotion render src/index.ts the-night-shift out.mp4"}]},{"name":"stefanwittwer/remotion-animated","url":"https://github.com/stefanwittwer/remotion-animated","licence":{"name":"MIT","basis":"licence file"},"line":"A helper library for declaring moves in a few lines.","hand_written":true,"shelf":"more","jobs":["kit"],"needs":{"remotion":">=4.0.0","packages":["prism-react-renderer","remotion","tailwindcss"]},"pieces":[{"id":"r0548","name":"Showcase","job":"kit","video":"assets/remotion-catalog/548-stefanwittwer__remotion-animated-stefanwittwer-remotion-animated-showcase.mp4","poster":"assets/remotion-catalog/548-stefanwittwer__remotion-animated-stefanwittwer-remotion-animated-showcase.jpg","w":1280,"h":720,"seconds":5.06,"use":"# see the source for how to run it\nhttps://github.com/stefanwittwer/remotion-animated","takes":{"how":"props","what":["colors","type","text"],"line":"The showcase clip was put together as this library's preview. The part is a wrapper, Animated: props animations[] (Fade, Move, Scale, Rotate with their values), delay, style, children. It holds no colors, type or words of its own.","read":true}}]},{"name":"redwanJemal/social-video-engine","url":"https://github.com/redwanJemal/social-video-engine","licence":{"name":"MIT","basis":"README"},"line":"A tall stat card on a gradient.","hand_written":false,"shelf":"more","jobs":["number"],"needs":{"remotion":"4.0.0","packages":["remotion"]},"pieces":[{"id":"r0670","name":"Stat Card Preview","job":"number","video":"assets/remotion-catalog/670-redwanJemal__social-video-engine-StatCardPreview.mp4","poster":"assets/remotion-catalog/670-redwanJemal__social-video-engine-StatCardPreview.jpg","w":1080,"h":1920,"seconds":5.06,"use":"git clone https://github.com/redwanJemal/social-video-engine\ncd social-video-engine\nnpm install\nnpx remotion render src/index.ts StatCardPreview out.mp4","takes":{"how":"props","what":["colors","type","text","numbers"],"line":"Props: scenes[] {type (kinetic-text, stat-card, list-reveal, quote-card, comparison, cta and more), duration, props}, theme {bgGradient (two colors), textColor, accentColor, fontFamily}. Ready-made themes are in src/types.ts.","read":true}}]},{"name":"WimpyvL/3d-Video-generator","url":"https://github.com/WimpyvL/3d-Video-generator","licence":{"name":"MIT","basis":"licence file"},"line":"One 3D shape turning on white.","hand_written":false,"shelf":"more","jobs":["3d"],"needs":{"remotion":"^4.0.0","packages":["@react-three/fiber","remotion","three","zod"]},"pieces":[{"id":"r0728","name":"Scene","job":"3d","video":"assets/remotion-catalog/728-WimpyvL__3d-Video-generator-Scene.mp4","poster":"assets/remotion-catalog/728-WimpyvL__3d-Video-generator-Scene.jpg","w":1280,"h":720,"seconds":10.05,"use":"git clone https://github.com/WimpyvL/3d-Video-generator\ncd 3d-Video-generator\nnpm install\nnpx remotion render src/index.ts Scene out.mp4","takes":{"how":"props","what":["colors"],"line":"Props (zod schema): phoneColor (color picker), deviceType (phone or tablet). The video on the screen is a file named in the source.","read":true}}]},{"name":"ASchwad/remotion-flux-text-gifs","url":"https://github.com/ASchwad/remotion-flux-text-gifs","licence":{"name":"MIT","basis":"licence file"},"line":"A logo and text sequence made for GIFs.","hand_written":false,"shelf":"more","jobs":["title"],"needs":{"remotion":"^4.0.441","packages":["remotion"]},"pieces":[{"id":"r0761","name":"Text Sequence","job":"title","video":"assets/remotion-catalog/761-ASchwad__remotion-flux-text-gifs-TextSequence.mp4","poster":"assets/remotion-catalog/761-ASchwad__remotion-flux-text-gifs-TextSequence.jpg","w":1080,"h":810,"seconds":5.55,"use":"git clone https://github.com/ASchwad/remotion-flux-text-gifs\ncd remotion-flux-text-gifs\nnpm install\nnpx remotion render src/index.ts TextSequence out.mp4","takes":{"how":"edit the file","what":["logo","text"],"line":"No inputs. The words are a SEGMENTS list at the top of TextSequence.tsx; an entry with no text shows the logo.","read":true}}]},{"name":"AshrafMorningstar/cinematic-github-stats","url":"https://github.com/AshrafMorningstar/cinematic-github-stats","licence":{"name":"MIT","basis":"licence file"},"line":"GitHub stats as a glowing dashboard card.","hand_written":false,"shelf":"more","jobs":["number"],"needs":{"remotion":null,"packages":["d3-scale","d3-shape","remotion","zod"]},"pieces":[{"id":"r0807","name":"Stats Composition","job":"number","video":"assets/remotion-catalog/807-AshrafMorningstar__cinematic-github-stats-StatsComposition.mp4","poster":"assets/remotion-catalog/807-AshrafMorningstar__cinematic-github-stats-StatsComposition.jpg","w":1200,"h":630,"seconds":10.05,"use":"git clone https://github.com/AshrafMorningstar/cinematic-github-stats\ncd cinematic-github-stats\nnpm install\nnpx remotion render src/index.ts StatsComposition out.mp4","takes":{"how":"tokens","what":["colors","numbers"],"line":"No inputs. Colors come from defaultTheme in src/config/themes and the figures from src/data/stats.json; labels are written in StatsScene.tsx.","read":true}}]},{"name":"AshrafMorningstar/devmetrics-pro-ai","url":"https://github.com/AshrafMorningstar/devmetrics-pro-ai","licence":{"name":"MIT","basis":"licence file"},"line":"A developer profile card with GitHub stats.","hand_written":false,"shelf":"more","jobs":["number"],"needs":{"remotion":"^4.0.383","packages":["@tailwindcss/postcss","eslint-config-next","next","openai","remotion","tailwind-merge","tailwindcss","zod"]},"pieces":[{"id":"r0808","name":"Git Hub Stats","job":"number","video":"assets/remotion-catalog/808-AshrafMorningstar__devmetrics-pro-ai-GitHubStats.mp4","poster":"assets/remotion-catalog/808-AshrafMorningstar__devmetrics-pro-ai-GitHubStats.jpg","w":1920,"h":1080,"seconds":5.06,"use":"git clone https://github.com/AshrafMorningstar/devmetrics-pro-ai\ncd devmetrics-pro-ai\nnpm install\nnpx remotion render src/remotion/index.tsx GitHubStats out.mp4","takes":{"how":"props","what":["text"],"line":"Prop: username. Colors and fonts are Tailwind classes written in BasicStats.tsx (bg-void-dark, font-sans and others), so the look is set in the Tailwind config and the class names.","read":true}}]},{"name":"el-frontend/video-wizard","url":"https://github.com/el-frontend/video-wizard","licence":{"name":"MIT","basis":"licence file"},"line":"A tall video with subtitles burned in.","hand_written":false,"shelf":"more","jobs":["caption"],"needs":{"remotion":"^4.0.405","packages":["@ai-sdk/openai","@next/eslint-plugin-next","@tailwindcss/postcss","@workspace/remotion-compositions","eslint-config-next","next","next-auth","next-themes"]},"pieces":[{"id":"r0846","name":"Video With Subtitles","job":"caption","video":"assets/remotion-catalog/846-el-frontend__video-wizard__packages__remotion-compositions-VideoWithSubtitles.mp4","poster":"assets/remotion-catalog/846-el-frontend__video-wizard__packages__remotion-compositions-VideoWithSubtitles.jpg","w":1080,"h":1920,"seconds":6.04,"use":"git clone https://github.com/el-frontend/video-wizard\ncd video-wizard/packages/remotion-compositions\nnpm install\nnpx remotion render src/index.ts VideoWithSubtitles out.mp4","takes":{"how":"props","what":["colors","type","logo","text","pictures"],"line":"Props: videoUrl, subtitles, template (the caption style), language, backgroundColor, brandKit {logoUrl, logoPosition, logoScale, primaryColor, secondaryColor, textColor, backgroundColor, fontFamily}.","read":true}}]},{"name":"haideman2025/Animation-Engine-MVP","url":"https://github.com/haideman2025/Animation-Engine-MVP","licence":{"name":"MIT","basis":"licence file"},"line":"One text animation on a dark gradient.","hand_written":false,"shelf":"more","jobs":["title"],"needs":{"remotion":"^4.0.447","packages":["@napi-rs/canvas","@tailwindcss/postcss","eslint-config-next","framer-motion","next","openai","remotion","tailwindcss"]},"pieces":[{"id":"r0870","name":"Animation engine mvp","job":"title","video":"assets/remotion-catalog/870-haideman2025__Animation-Engine-MVP-animation-engine-mvp.mp4","poster":"assets/remotion-catalog/870-haideman2025__Animation-Engine-MVP-animation-engine-mvp.jpg","w":1080,"h":1920,"seconds":25.05,"use":"git clone https://github.com/haideman2025/Animation-Engine-MVP\ncd Animation-Engine-MVP\nnpm install\nnpx remotion render src/remotion/index.ts animation-engine-mvp out.mp4"}]},{"name":"ItsDlylan/AgentCanvas","url":"https://github.com/ItsDlylan/AgentCanvas","licence":{"name":"MIT","basis":"licence file"},"line":"A welcome screen for an agent workspace: terminals, browsers, notes, tasks.","hand_written":false,"shelf":"more","jobs":["overlay"],"needs":{"remotion":"4.0.450","packages":["@tailwindcss/vite","electron-vite","remotion","tailwindcss","whisper-node"]},"pieces":[{"id":"r0890","name":"Welcome","job":"overlay","video":"assets/remotion-catalog/890-ItsDlylan__AgentCanvas-Welcome.mp4","poster":"assets/remotion-catalog/890-ItsDlylan__AgentCanvas-Welcome.jpg","w":1280,"h":720,"seconds":21.72,"use":"git clone https://github.com/ItsDlylan/AgentCanvas\ncd AgentCanvas\nnpm install\nnpx remotion render remotion/src/index.ts Welcome out.mp4","takes":{"how":"tokens","what":["colors","type"],"line":"No inputs. Colors (15 named values) and the font stack come from remotion/src/theme.ts, shared by the scenes it plays in order. Words are written in those scenes.","read":true}}]},{"name":"princegevariya1/CluadRemotion","url":"https://github.com/princegevariya1/CluadRemotion","licence":{"name":"MIT","basis":"licence file"},"line":"One 3D shape turning on white.","hand_written":false,"shelf":"more","jobs":["3d"],"needs":{"remotion":"^4.0.0","packages":["@react-three/fiber","mediabunny","remotion","three","zod"]},"pieces":[{"id":"r1015","name":"Scene","job":"3d","video":"assets/remotion-catalog/1015-princegevariya1__CluadRemotion-Scene.mp4","poster":"assets/remotion-catalog/1015-princegevariya1__CluadRemotion-Scene.jpg","w":1280,"h":720,"seconds":10.05,"use":"git clone https://github.com/princegevariya1/CluadRemotion\ncd CluadRemotion\nnpm install\nnpx remotion render src/index.ts Scene out.mp4","takes":{"how":"props","what":["colors","pictures"],"line":"Props (zod schema, color picker): phoneColor, deviceType (phone or tablet), videoSrc, baseScale. The scene background color is written in Scene.tsx.","read":true}}]},{"name":"LukasParke/github-stats-remotion","url":"https://github.com/LukasParke/github-stats-remotion","licence":{"name":"MIT","basis":"package.json"},"line":"GitHub stats as an animated list.","hand_written":false,"shelf":"more","jobs":["number"],"needs":{"remotion":"^4.0.214","packages":["framer-motion","remotion","tailwind-merge","zod"]},"pieces":[{"id":"r1038","name":"Stats","job":"number","video":"assets/remotion-catalog/1038-LukasParke__github-stats-remotion-stats.mp4","poster":"assets/remotion-catalog/1038-LukasParke__github-stats-remotion-stats.jpg","w":1000,"h":460,"seconds":5,"use":"npm install remotion-template\n# then import the part you want; the README at https://github.com/LukasParke/github-stats-remotion lists them","takes":{"how":"props","what":["numbers"],"line":"Prop (zod schema): userStats, the figures on the cards. Where the card colors live (src/style.css, src/config.ts) was not checked.","read":true}}]},{"name":"wesleysimplicio/marketing-engine","url":"https://github.com/wesleysimplicio/marketing-engine","licence":{"name":"Apache-2.0","basis":"licence file"},"line":"A product walkthrough built from interface cards.","hand_written":false,"shelf":"more","jobs":["caption"],"needs":{"remotion":"4.0.243","packages":["@playwright/test","remotion"]},"pieces":[{"id":"r1087","name":"Marketing engine skills","job":"caption","video":"assets/remotion-catalog/1087-wesleysimplicio__marketing-engine-marketing-engine-skills.mp4","poster":"assets/remotion-catalog/1087-wesleysimplicio__marketing-engine-marketing-engine-skills.jpg","w":1920,"h":1080,"seconds":90.71,"use":"git clone https://github.com/wesleysimplicio/marketing-engine\ncd marketing-engine\nnpm install\nnpx remotion render video/src/index.ts marketing-engine-skills out.mp4","takes":{"how":"tokens","what":["colors","text"],"line":"Its only prop is locale (pt-BR or en). Colors come from video/src/theme.ts and the words from video/src/i18n.tsx; a few code-sample colors are written in MarketingEngineVideo.tsx.","read":true}}]},{"name":"gaebalai/study-recoding-pipeline","url":"https://github.com/gaebalai/study-recoding-pipeline","licence":{"name":"MIT","basis":"licence file"},"line":"A narrated study slide with a code block.","hand_written":false,"shelf":"more","jobs":["audio"],"needs":{"remotion":"4.0.454","packages":["remotion","tailwindcss"]},"pieces":[{"id":"r1134","name":"Study Video","job":"audio","video":"assets/remotion-catalog/1134-gaebalai__study-recoding-pipeline-StudyVideo.mp4","poster":"assets/remotion-catalog/1134-gaebalai__study-recoding-pipeline-StudyVideo.jpg","w":1280,"h":720,"seconds":10.05,"use":"git clone https://github.com/gaebalai/study-recoding-pipeline\ncd study-recoding-pipeline\nnpm install\nnpx remotion render remotion/src/index.ts StudyVideo out.mp4","takes":{"how":"props","what":["text"],"line":"Prop: sections (the lines and their timing). Four named colors are constants at the top of StudyVideo.tsx (CRIMSON, GOLD, BG, TEXT); speaker names and colors come from speaker-config.json beside it; the font (Noto Sans KR) is loaded in the file.","read":true}}]},{"name":"samlaying/Remotion","url":"https://github.com/samlaying/Remotion","licence":{"name":"MIT","basis":"package.json"},"line":"A set of floating product cards.","hand_written":false,"shelf":"more","jobs":["scene"],"needs":{"remotion":"4.0.456","packages":["remotion","zod"]},"pieces":[{"id":"r1159","name":"AICloud Cards","job":"scene","video":"assets/remotion-catalog/1159-samlaying__Remotion__projects---AI-xuanzhuan-AICloudCards.mp4","poster":"assets/remotion-catalog/1159-samlaying__Remotion__projects---AI-xuanzhuan-AICloudCards.jpg","w":2048,"h":2048,"seconds":4.05,"use":"# see the source for how to run it\nhttps://github.com/samlaying/Remotion","takes":{"how":"edit the file","what":["colors"],"line":"Its props (zod schema) are layout and motion only: cardCount, orbitSpeed, containerScale, depthStrength, cardOpacity, glowIntensity, showToolNames. About 38 color values are written in AICloudCards.tsx.","read":true}}]},{"name":"Yonkoo11/multihook","url":"https://github.com/Yonkoo11/multihook","licence":{"name":"MIT","basis":"licence file"},"line":"A title scene for a tech explainer.","hand_written":false,"shelf":"more","jobs":["scene"],"needs":{"remotion":"4.0.300","packages":["puppeteer-core","puppeteer-screen-recorder","remotion","shiki","vite"]},"pieces":[{"id":"r1166","name":"Meta Hook Tech","job":"scene","video":"assets/remotion-catalog/1166-Yonkoo11__multihook-MetaHookTech.mp4","poster":"assets/remotion-catalog/1166-Yonkoo11__multihook-MetaHookTech.jpg","w":1920,"h":1080,"seconds":5.06,"use":"npm install multihook\n# then import the part you want; the README at https://github.com/Yonkoo11/multihook lists them","takes":{"how":"edit the file","what":[],"line":"No inputs. A short file that plays the kit's eight scene files in order; the words and colors are in those scenes (not opened).","read":true}}]},{"name":"yuuuuukou/study-video-pipeline","url":"https://github.com/yuuuuukou/study-video-pipeline","licence":{"name":"MIT","basis":"licence file"},"line":"A narrated study slide with bullet points.","hand_written":false,"shelf":"more","jobs":["scene"],"needs":{"remotion":"4.0.454","packages":["remotion","tailwindcss"]},"pieces":[{"id":"r1167","name":"Study Video","job":"scene","video":"assets/remotion-catalog/1167-yuuuuukou__study-video-pipeline__remotion-StudyVideo.mp4","poster":"assets/remotion-catalog/1167-yuuuuukou__study-video-pipeline__remotion-StudyVideo.jpg","w":1280,"h":720,"seconds":5.06,"use":"# see the source for how to run it\nhttps://github.com/yuuuuukou/study-video-pipeline","takes":{"how":"props","what":["text"],"line":"Prop: sections (the lines and their timing). Four named colors are constants at the top of StudyVideo.tsx (CRIMSON, GOLD, BG, TEXT); speaker names and colors come from speaker-config.json beside it.","read":true}}]},{"name":"notedit/VPresent","url":"https://github.com/notedit/VPresent","licence":{"name":"MIT","basis":"README"},"line":"A tall text scene in a dark, cinematic look.","hand_written":false,"shelf":"more","jobs":["scene"],"needs":{"remotion":"4.0.301","packages":["remotion"]},"pieces":[{"id":"r1178","name":"Scheme1 Cinematic Noir","job":"scene","video":"assets/remotion-catalog/1178-notedit__VPresent__remotion-video-Scheme1-CinematicNoir.mp4","poster":"assets/remotion-catalog/1178-notedit__VPresent__remotion-video-Scheme1-CinematicNoir.jpg","w":1080,"h":1920,"seconds":5.06,"use":"# see the source for how to run it\nhttps://github.com/notedit/VPresent","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No inputs. One palette object at the top of the scheme file (about 10 named colors: blacks, golds, silver) feeds the piece; the card words come from src/data/cards.json; fonts are written through the 1,222-line file.","read":true}}]}],"kinds":[{"key":"remotion","label":"Remotion pieces","line":"Compositions and components for Remotion, most with a clip you can watch."},{"key":"html-video","label":"HTML to video","line":"Web pages that render to video: blocks, components and looks."},{"key":"shot-recipe","label":"Shot recipes","line":"Named camera and motion moves, each with its settings and a worked example."},{"key":"gsap","label":"GSAP motion","line":"Easing, timelines and motion patterns for GSAP."},{"key":"three","label":"three.js and WebGL","line":"3D scenes, shaders and components for the browser."},{"key":"blender","label":"Blender","line":"Skills, scripts and scenes for Blender."},{"key":"template","label":"Starters","line":"Whole projects to begin from."},{"key":"skill","label":"Agent skills","line":"Instructions that teach a coding agent a craft."},{"key":"tool","label":"Tools","line":"Programs: command-line tools, servers, add-ons."}],"packs":[{"id":"hyperframes","name":"HyperFrames","repo":"heygen-com/hyperframes","url":"https://github.com/heygen-com/hyperframes","commit":"070b964d7b8cd844a893f0abbe8e0b7f1ac6d879","commit_date":"2026-11-08","licence":{"name":"Apache-2.0","basis":"LICENSE file at the repo root (Apache License 2.0); the README badge and CREDITS.md say the same; license: Apache-2.0 in packages/cli/package.json.","note":"That covers the code. Some things inside are under other terms: GSAP has its own no-charge license, the bundled sound effects are under Pixabay's, and many blocks imitate other companies' interfaces. The code is free to use. The brands are theirs."},"kind":"html-video","line":"HeyGen's open-source way to make video from HTML. You write a web page with one paused GSAP timeline, and its command-line tool renders it frame by frame. It comes with 456 ready-made blocks and components, nine agent skills, and the tools around them.","look_only":false,"get":{"command":"npm install hyperframes@0.9.23 --ignore-scripts\nexport DO_NOT_TRACK=1 HYPERFRAMES_NO_TELEMETRY=1 HYPERFRAMES_NO_UPDATE_CHECK=1 HYPERFRAMES_NO_AUTO_INSTALL=1 HYPERFRAMES_SKIP_SKILLS=1","note":"The second line stops it reporting each command to HeyGen and checking for updates. For one block, copy its folder from the repo, or run: npx hyperframes add <name>"},"needs":"Node 22, FFmpeg and a headless Chrome (it downloads one on first render unless you point it at yours). Pages load GSAP and fonts from the network at render time unless you make them local. The WebGPU blocks want a GPU. A HeyGen sign-in only for cloud render, publish and generated media.","sends":"Out of the box it sends a usage event to HeyGen for every command and checks GitHub and npm for updates. The five switches in the second line above turn that off. One command, \"hyperframes usage\", reads your coding agent's login token and no switch stops it, so skip that one. Publish, cloud render and feedback send your project or your words to HeyGen, only when you run them.","seen":[{"line":"A 6-second film written by hand rendered in 16 seconds, with no browser download.","preview":{"video":"assets/asset-library/hyperframes-cli-render-test.mp4","poster":"assets/asset-library/hyperframes-cli-render-test-poster.jpg","w":1280,"h":720,"seconds":6}},{"line":"A news overlay (a stat plate, a source chip, a name plate) rendered in 17 seconds, to MP4 and to a MOV with a clear background that sits over footage.","preview":{"video":"assets/asset-library/hyperframes-nf-overlay.mp4","poster":"assets/asset-library/hyperframes-nf-overlay-poster.jpg","w":1080,"h":1920,"seconds":7}},{"line":"Three registry blocks drew right the first time: a chart, a lower third, a code diff.","preview":{"poster":"assets/asset-library/hyperframes-data-chart.jpg","w":1280,"h":720}},{"line":"The whip-pan transition block rendered, but it is a demo card. It proves the shader runs, not what the cut looks like on real scenes.","preview":{"video":"assets/asset-library/hyperframes-whip-pan.mp4","poster":"assets/asset-library/hyperframes-whip-pan-poster.jpg","w":1280,"h":720,"seconds":4}}],"not_seen":"Cloud render, publish, the two Pro skills, and most of the 456 blocks were read, not run.","count":511,"kinds":{"html-video":426,"three":26,"template":25,"tool":22,"skill":12},"assets":[{"id":"hyperframes/block/ai-answer-rank","name":"AI Answer Rank","kind":"html-video","job":"scene","line":"Is your brand in the AI answer? A question types into a chat card, the assistant answers with a ranked list of three picks, then re-ranks: the promoted brand slides into its slot, the picks below step down, and the brand row… Credited to Tugra Avci.","path":"registry/blocks/ai-answer-rank","use":"Copy the folder into a project, or `npx hyperframes add ai-answer-rank` (fetches it from GitHub main to compositions/ai-answer-rank.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 10 settings to change.","w":1080,"h":1080,"seconds":9,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","text"],"line":"Declared variables: prompt, lead, rowA, rowB, rowC, brand, brandRank, accent and 2 more. Its colors are custom properties declared in one block in the file (--aar-accent, --aar-ground, --aar-hair, --aar-ink).","read":false}},{"id":"hyperframes/block/ai-chat-reveal","name":"AI Chat Reveal","kind":"html-video","job":"scene","line":"A question is typed on a rising keyboard, sent, and answered by an AI that streams its reply word by word on a measured token rhythm - thinking dot, uneven bursts, bulleted list - before the app cuts to a branded closing card. Credited to Miao Yang.","path":"registry/blocks/ai-chat-reveal","use":"Copy the folder into a project, or `npx hyperframes add ai-chat-reveal` (fetches it from GitHub main to compositions/ai-chat-reveal.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 13 settings to change.","w":1080,"h":1920,"seconds":19.3333,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["logo","text","pictures"],"line":"Declared variables: botName, userMessage, answer1, answer2, answer3, bullet1, bullet2, bullet3 and 5 more. 25 hex colors and 1 font stack are written in the file's CSS.","read":false}},{"id":"hyperframes/block/app-showcase","name":"App Showcase","kind":"html-video","job":"scene","line":"Fitness app product showcase with three floating smartphone screens.","path":"registry/blocks/app-showcase","use":"Copy the folder into a project, or `npx hyperframes add app-showcase` (fetches it from GitHub main to compositions/app-showcase.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":5.5,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 13 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/apple-money-count","name":"Apple Money Count","kind":"html-video","job":"number","line":"Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound. Credited to Stronkter.","path":"registry/blocks/apple-money-count","use":"Copy the folder into a project, or `npx hyperframes add apple-money-count` (fetches it from GitHub main to compositions/apple-money-count.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":5,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net; bundled sound file).","takes":{"how":"tokens","what":["colors","type"],"line":"No declared variables. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 11 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/block/aurora","name":"Aurora","kind":"html-video","job":"ground","line":"Green and violet aurora curtains ripple across a night sky. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/aurora","use":"Copy the folder into a project, or `npx hyperframes add aurora` (fetches it from GitHub main to compositions/aurora.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","preview":{"poster":"assets/asset-library/hyperframes-aurora.jpg","w":1280,"h":720},"takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/bar-chart-race","name":"Bar Chart Race","kind":"html-video","job":"chart","line":"Ranked bars grow and overtake each other as a time series advances, with the axis rescaling as values climb and the accent handing over to whoever leads.","path":"registry/blocks/bar-chart-race","use":"Copy the folder into a project, or `npx hyperframes add bar-chart-race` (fetches it from GitHub main to compositions/bar-chart-race.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 20 settings to change.","w":1920,"h":1080,"seconds":12,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","text","numbers"],"line":"Declared variables: title, subtitle, periods, series, barCount, periodDuration, valuePrefix, valueSuffix and 2 more. 4 hex colors and 1 font stack are written in the file's CSS.","read":true}},{"id":"hyperframes/block/beat-freeze-cut","name":"Beat Freeze Cut","kind":"html-video","job":"transition","line":"A beat-driven speed ramp, freeze-frame hit, and hard-cut sequence for music-led promos and montages.","path":"registry/blocks/beat-freeze-cut","use":"Copy the folder into a project, or `npx hyperframes add beat-freeze-cut` (fetches it from GitHub main to compositions/beat-freeze-cut.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 2 settings to change.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"tokens","what":["colors"],"line":"No declared variables. Its colors are custom properties declared in one block in the file (--accent-color, --bfc-ink, --bfc-line, --bfc-muted, --bfc-panel, 7 in all). The words are in the HTML.","read":false}},{"id":"hyperframes/block/blob","name":"Blob","kind":"html-video","job":"ground","line":"A soft coral and pink blob with a warm highlight slowly changes shape on black. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/blob","use":"Copy the folder into a project, or `npx hyperframes add blob` (fetches it from GitHub main to compositions/blob.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/blue-sweater-intro-video","name":"Blue Sweater Intro Video","kind":"html-video","job":"scene","line":"Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_. Credited to Joe Sai. Idea only: It is a named creator's own intro (author Joe Sai), with his avatar picture and X handle in it.","path":"registry/blocks/blue-sweater-intro-video","use":"","w":1920,"h":1080,"seconds":12,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net; 4 MB folder; bundled sound file).","look_only":true},{"id":"hyperframes/block/camcorder-hud","name":"Camcorder HUD","kind":"html-video","job":"overlay","line":"Responsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder treatments.","path":"registry/blocks/camcorder-hud","use":"Copy the folder into a project, or `npx hyperframes add camcorder-hud` (fetches it from GitHub main to compositions/camcorder-hud.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":4,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors","type"],"line":"No declared variables. Its colors are custom properties declared in one block in the file (--hf-camcorder-accent, --hf-camcorder-color, --hf-camcorder-font-size). The words are in the HTML.","read":false}},{"id":"hyperframes/block/camera-dolly-zoom","name":"Dolly Zoom (Vertigo Shot)","kind":"html-video","job":"camera","line":"Camera tracks toward or away from the subject while the field of view changes the opposite way, so the subject holds its frame size while the background collapses behind it or rushes in.","path":"registry/blocks/camera-dolly-zoom","use":"Copy the folder into a project, or `npx hyperframes add camera-dolly-zoom` (fetches it from GitHub main to compositions/camera-dolly-zoom.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 4 settings to change.","w":1920,"h":1080,"seconds":4,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":[],"line":"Declared variables: direction, strength, subjectDistance, easing. 10 hex colors and 1 font stack are written in the file's CSS.","read":false}},{"id":"hyperframes/block/canopy-part-title","name":"Canopy Part Title","kind":"three","job":"title","line":"Leaves sweep through the frame and part to reveal the headline. Idea only: The repo's CREDITS.md says the origin of its two leaf textures is still to be confirmed with the author.","path":"registry/blocks/canopy-part-title","use":"","w":1920,"h":1080,"seconds":12,"needs":"Three.js. Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","look_only":true},{"id":"hyperframes/block/carousel-circle-1","name":"Circle Carousel 1","kind":"html-video","job":"layout","line":"Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 1); 12 image slots. Credited to Jake Moran.","path":"registry/blocks/carousel-circle-1","use":"Copy the folder into a project, or `npx hyperframes add carousel-circle-1` (fetches it from GitHub main to compositions/carousel-circle-1.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 14 settings to change.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","pictures"],"line":"Declared variables: image1, image2, image3, image4, image5, image6, image7, image8 and 6 more. 3 hex colors and 1 font stack are written in the file's CSS. It also reads its own custom properties with fallbacks (--background); set them on a wrapping element to re-skin it without editing.","read":false}},{"id":"hyperframes/block/carousel-circle-2","name":"Circle Carousel 2","kind":"html-video","job":"layout","line":"Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 2); 12 image slots. Credited to Jake Moran.","path":"registry/blocks/carousel-circle-2","use":"Copy the folder into a project, or `npx hyperframes add carousel-circle-2` (fetches it from GitHub main to compositions/carousel-circle-2.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 14 settings to change.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","pictures"],"line":"Declared variables: image1, image2, image3, image4, image5, image6, image7, image8 and 6 more. 3 hex colors and 1 font stack are written in the file's CSS. It also reads its own custom properties with fallbacks (--background); set them on a wrapping element to re-skin it without editing.","read":false}},{"id":"hyperframes/block/carousel-circle-3","name":"Circle Carousel 3","kind":"html-video","job":"layout","line":"Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 3); 12 image slots. Credited to Jake Moran.","path":"registry/blocks/carousel-circle-3","use":"Copy the folder into a project, or `npx hyperframes add carousel-circle-3` (fetches it from GitHub main to compositions/carousel-circle-3.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 14 settings to change.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","pictures"],"line":"Declared variables: image1, image2, image3, image4, image5, image6, image7, image8 and 6 more. 3 hex colors and 1 font stack are written in the file's CSS. It also reads its own custom properties with fallbacks (--background); set them on a wrapping element to re-skin it without editing.","read":false}},{"id":"hyperframes/block/carousel-circle-4","name":"Circle Carousel 4","kind":"html-video","job":"layout","line":"Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 4); 12 image slots. Credited to Jake Moran.","path":"registry/blocks/carousel-circle-4","use":"Copy the folder into a project, or `npx hyperframes add carousel-circle-4` (fetches it from GitHub main to compositions/carousel-circle-4.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 14 settings to change.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","pictures"],"line":"Declared variables: image1, image2, image3, image4, image5, image6, image7, image8 and 6 more. 3 hex colors and 1 font stack are written in the file's CSS. It also reads its own custom properties with fallbacks (--background); set them on a wrapping element to re-skin it without editing.","read":false}},{"id":"hyperframes/block/carousel-circle-5","name":"Circle Carousel 5","kind":"html-video","job":"layout","line":"Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 5); 12 image slots. Credited to Jake Moran.","path":"registry/blocks/carousel-circle-5","use":"Copy the folder into a project, or `npx hyperframes add carousel-circle-5` (fetches it from GitHub main to compositions/carousel-circle-5.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 14 settings to change.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","pictures"],"line":"Declared variables: image1, image2, image3, image4, image5, image6, image7, image8 and 6 more. 3 hex colors and 1 font stack are written in the file's CSS. It also reads its own custom properties with fallbacks (--background); set them on a wrapping element to re-skin it without editing.","read":false}},{"id":"hyperframes/block/carousel-orbit-1","name":"Orbit Carousel 1","kind":"html-video","job":"layout","line":"Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 1); 24 image slots. Credited to Jake Moran.","path":"registry/blocks/carousel-orbit-1","use":"Copy the folder into a project, or `npx hyperframes add carousel-orbit-1` (fetches it from GitHub main to compositions/carousel-orbit-1.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 26 settings to change.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","pictures"],"line":"Declared variables: image1, image2, image3, image4, image5, image6, image7, image8 and 18 more. 3 hex colors and 1 font stack are written in the file's CSS. It also reads its own custom properties with fallbacks (--background); set them on a wrapping element to re-skin it without editing.","read":false}},{"id":"hyperframes/block/carousel-orbit-2","name":"Orbit Carousel 2","kind":"html-video","job":"layout","line":"Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 2); 24 image slots. Credited to Jake Moran.","path":"registry/blocks/carousel-orbit-2","use":"Copy the folder into a project, or `npx hyperframes add carousel-orbit-2` (fetches it from GitHub main to compositions/carousel-orbit-2.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 26 settings to change.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","pictures"],"line":"Declared variables: image1, image2, image3, image4, image5, image6, image7, image8 and 18 more. 3 hex colors and 1 font stack are written in the file's CSS. It also reads its own custom properties with fallbacks (--background); set them on a wrapping element to re-skin it without editing.","read":false}},{"id":"hyperframes/block/carousel-orbit-3","name":"Orbit Carousel 3","kind":"html-video","job":"layout","line":"Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 3); 24 image slots. Credited to Jake Moran.","path":"registry/blocks/carousel-orbit-3","use":"Copy the folder into a project, or `npx hyperframes add carousel-orbit-3` (fetches it from GitHub main to compositions/carousel-orbit-3.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 26 settings to change.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","pictures"],"line":"Declared variables: image1, image2, image3, image4, image5, image6, image7, image8 and 18 more. 3 hex colors and 1 font stack are written in the file's CSS. It also reads its own custom properties with fallbacks (--background); set them on a wrapping element to re-skin it without editing.","read":false}},{"id":"hyperframes/block/carousel-orbit-4","name":"Orbit Carousel 4","kind":"html-video","job":"layout","line":"Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 4); 24 image slots. Credited to Jake Moran.","path":"registry/blocks/carousel-orbit-4","use":"Copy the folder into a project, or `npx hyperframes add carousel-orbit-4` (fetches it from GitHub main to compositions/carousel-orbit-4.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 26 settings to change.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","pictures"],"line":"Declared variables: image1, image2, image3, image4, image5, image6, image7, image8 and 18 more. 3 hex colors and 1 font stack are written in the file's CSS. It also reads its own custom properties with fallbacks (--background); set them on a wrapping element to re-skin it without editing.","read":false}},{"id":"hyperframes/block/carousel-orbit-5","name":"Orbit Carousel 5","kind":"html-video","job":"layout","line":"Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 5); 24 image slots. Credited to Jake Moran.","path":"registry/blocks/carousel-orbit-5","use":"Copy the folder into a project, or `npx hyperframes add carousel-orbit-5` (fetches it from GitHub main to compositions/carousel-orbit-5.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 26 settings to change.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","pictures"],"line":"Declared variables: image1, image2, image3, image4, image5, image6, image7, image8 and 18 more. 3 hex colors and 1 font stack are written in the file's CSS. It also reads its own custom properties with fallbacks (--background); set them on a wrapping element to re-skin it without editing.","read":false}},{"id":"hyperframes/block/carousel-path-1","name":"Path Carousel 1","kind":"html-video","job":"layout","line":"Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 1); 24 image slots. Credited to Jake Moran.","path":"registry/blocks/carousel-path-1","use":"Copy the folder into a project, or `npx hyperframes add carousel-path-1` (fetches it from GitHub main to compositions/carousel-path-1.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 26 settings to change.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","pictures"],"line":"Declared variables: image1, image2, image3, image4, image5, image6, image7, image8 and 18 more. 3 hex colors and 1 font stack are written in the file's CSS. It also reads its own custom properties with fallbacks (--background); set them on a wrapping element to re-skin it without editing.","read":false}},{"id":"hyperframes/block/carousel-path-2","name":"Path Carousel 2","kind":"html-video","job":"layout","line":"Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 2); 12 image slots. Credited to Jake Moran.","path":"registry/blocks/carousel-path-2","use":"Copy the folder into a project, or `npx hyperframes add carousel-path-2` (fetches it from GitHub main to compositions/carousel-path-2.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 14 settings to change.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","pictures"],"line":"Declared variables: image1, image2, image3, image4, image5, image6, image7, image8 and 6 more. 3 hex colors and 1 font stack are written in the file's CSS. It also reads its own custom properties with fallbacks (--background); set them on a wrapping element to re-skin it without editing.","read":false}},{"id":"hyperframes/block/carousel-path-3","name":"Path Carousel 3","kind":"html-video","job":"layout","line":"Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 3); 12 image slots. Credited to Jake Moran.","path":"registry/blocks/carousel-path-3","use":"Copy the folder into a project, or `npx hyperframes add carousel-path-3` (fetches it from GitHub main to compositions/carousel-path-3.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 14 settings to change.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","pictures"],"line":"Declared variables: image1, image2, image3, image4, image5, image6, image7, image8 and 6 more. 3 hex colors and 1 font stack are written in the file's CSS. It also reads its own custom properties with fallbacks (--background); set them on a wrapping element to re-skin it without editing.","read":false}},{"id":"hyperframes/block/carousel-path-4","name":"Path Carousel 4","kind":"html-video","job":"layout","line":"Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 4); 24 image slots. Credited to Jake Moran.","path":"registry/blocks/carousel-path-4","use":"Copy the folder into a project, or `npx hyperframes add carousel-path-4` (fetches it from GitHub main to compositions/carousel-path-4.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 26 settings to change.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","pictures"],"line":"Declared variables: image1, image2, image3, image4, image5, image6, image7, image8 and 18 more. 3 hex colors and 1 font stack are written in the file's CSS. It also reads its own custom properties with fallbacks (--background); set them on a wrapping element to re-skin it without editing.","read":false}},{"id":"hyperframes/block/carousel-path-5","name":"Path Carousel 5","kind":"html-video","job":"layout","line":"Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 5); 24 image slots. Credited to Jake Moran.","path":"registry/blocks/carousel-path-5","use":"Copy the folder into a project, or `npx hyperframes add carousel-path-5` (fetches it from GitHub main to compositions/carousel-path-5.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 26 settings to change.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","pictures"],"line":"Declared variables: image1, image2, image3, image4, image5, image6, image7, image8 and 18 more. 3 hex colors and 1 font stack are written in the file's CSS. It also reads its own custom properties with fallbacks (--background); set them on a wrapping element to re-skin it without editing.","read":false}},{"id":"hyperframes/block/carousel-text-circle-1","name":"Text + Circle Carousel 1","kind":"html-video","job":"title","line":"A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to center, hard-cuts to a second line that arrives at 1.4× (Circle style 1). Credited to Jake Moran.","path":"registry/blocks/carousel-text-circle-1","use":"Copy the folder into a project, or `npx hyperframes add carousel-text-circle-1` (fetches it from GitHub main to compositions/carousel-text-circle-1.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 16 settings to change.","w":1920,"h":1080,"seconds":5,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"props","what":["colors","text","pictures"],"line":"Declared variables: image1, image2, image3, image4, image5, image6, image7, image8 and 8 more. 4 hex colors and 1 font stack are written in the file's CSS. It also reads its own custom properties with fallbacks (--background); set them on a wrapping element to re-skin it without editing.","read":false}},{"id":"hyperframes/block/carousel-text-circle-2","name":"Text + Circle Carousel 2","kind":"html-video","job":"title","line":"A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to center, hard-cuts to a second line that arrives at 1.4× (Circle style 2). Credited to Jake Moran.","path":"registry/blocks/carousel-text-circle-2","use":"Copy the folder into a project, or `npx hyperframes add carousel-text-circle-2` (fetches it from GitHub main to compositions/carousel-text-circle-2.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 16 settings to change.","w":1920,"h":1080,"seconds":5,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"props","what":["colors","text","pictures"],"line":"Declared variables: image1, image2, image3, image4, image5, image6, image7, image8 and 8 more. 4 hex colors and 1 font stack are written in the file's CSS. It also reads its own custom properties with fallbacks (--background); set them on a wrapping element to re-skin it without editing.","read":false}},{"id":"hyperframes/block/carousel-text-circle-3","name":"Text + Circle Carousel 3","kind":"html-video","job":"title","line":"A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to center, hard-cuts to a second line that arrives at 1.4× (Circle style 3). Credited to Jake Moran.","path":"registry/blocks/carousel-text-circle-3","use":"Copy the folder into a project, or `npx hyperframes add carousel-text-circle-3` (fetches it from GitHub main to compositions/carousel-text-circle-3.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 16 settings to change.","w":1920,"h":1080,"seconds":5,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"props","what":["colors","text","pictures"],"line":"Declared variables: image1, image2, image3, image4, image5, image6, image7, image8 and 8 more. 4 hex colors and 1 font stack are written in the file's CSS. It also reads its own custom properties with fallbacks (--background); set them on a wrapping element to re-skin it without editing.","read":false}},{"id":"hyperframes/block/carousel-text-circle-4","name":"Text + Circle Carousel 4","kind":"html-video","job":"title","line":"A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to center, hard-cuts to a second line that arrives at 1.4× (Circle style 4). Credited to Jake Moran.","path":"registry/blocks/carousel-text-circle-4","use":"Copy the folder into a project, or `npx hyperframes add carousel-text-circle-4` (fetches it from GitHub main to compositions/carousel-text-circle-4.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 16 settings to change.","w":1920,"h":1080,"seconds":5,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"props","what":["colors","text","pictures"],"line":"Declared variables: image1, image2, image3, image4, image5, image6, image7, image8 and 8 more. 4 hex colors and 1 font stack are written in the file's CSS. It also reads its own custom properties with fallbacks (--background); set them on a wrapping element to re-skin it without editing.","read":false}},{"id":"hyperframes/block/carousel-text-circle-5","name":"Text + Circle Carousel 5","kind":"html-video","job":"title","line":"A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to center, hard-cuts to a second line that arrives at 1.4× (Circle style 5). Credited to Jake Moran.","path":"registry/blocks/carousel-text-circle-5","use":"Copy the folder into a project, or `npx hyperframes add carousel-text-circle-5` (fetches it from GitHub main to compositions/carousel-text-circle-5.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 16 settings to change.","w":1920,"h":1080,"seconds":5,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"props","what":["colors","text","pictures"],"line":"Declared variables: image1, image2, image3, image4, image5, image6, image7, image8 and 8 more. 4 hex colors and 1 font stack are written in the file's CSS. It also reads its own custom properties with fallbacks (--background); set them on a wrapping element to re-skin it without editing.","read":false}},{"id":"hyperframes/block/carousel-vision-1","name":"Vision Carousel 1","kind":"html-video","job":"layout","line":"A ring of large image cards tilted into a row under a 3D camera, each card turning toward the center (Vision style 1); 12 image slots. Credited to Jake Moran.","path":"registry/blocks/carousel-vision-1","use":"Copy the folder into a project, or `npx hyperframes add carousel-vision-1` (fetches it from GitHub main to compositions/carousel-vision-1.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 14 settings to change.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","pictures"],"line":"Declared variables: image1, image2, image3, image4, image5, image6, image7, image8 and 6 more. 3 hex colors and 1 font stack are written in the file's CSS. It also reads its own custom properties with fallbacks (--background); set them on a wrapping element to re-skin it without editing.","read":false}},{"id":"hyperframes/block/carousel-vision-2","name":"Vision Carousel 2","kind":"html-video","job":"layout","line":"A ring of large image cards tilted into a row under a 3D camera, each card turning toward the center (Vision style 2); 12 image slots. Credited to Jake Moran.","path":"registry/blocks/carousel-vision-2","use":"Copy the folder into a project, or `npx hyperframes add carousel-vision-2` (fetches it from GitHub main to compositions/carousel-vision-2.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 14 settings to change.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","pictures"],"line":"Declared variables: image1, image2, image3, image4, image5, image6, image7, image8 and 6 more. 3 hex colors and 1 font stack are written in the file's CSS. It also reads its own custom properties with fallbacks (--background); set them on a wrapping element to re-skin it without editing.","read":false}},{"id":"hyperframes/block/carousel-vision-3","name":"Vision Carousel 3","kind":"html-video","job":"layout","line":"A ring of large image cards tilted into a row under a 3D camera, each card turning toward the center (Vision style 3); 12 image slots. Credited to Jake Moran.","path":"registry/blocks/carousel-vision-3","use":"Copy the folder into a project, or `npx hyperframes add carousel-vision-3` (fetches it from GitHub main to compositions/carousel-vision-3.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 14 settings to change.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","pictures"],"line":"Declared variables: image1, image2, image3, image4, image5, image6, image7, image8 and 6 more. 3 hex colors and 1 font stack are written in the file's CSS. It also reads its own custom properties with fallbacks (--background); set them on a wrapping element to re-skin it without editing.","read":false}},{"id":"hyperframes/block/carousel-vision-4","name":"Vision Carousel 4","kind":"html-video","job":"layout","line":"A ring of large image cards tilted into a row under a 3D camera, each card turning toward the center (Vision style 4); 12 image slots. Credited to Jake Moran.","path":"registry/blocks/carousel-vision-4","use":"Copy the folder into a project, or `npx hyperframes add carousel-vision-4` (fetches it from GitHub main to compositions/carousel-vision-4.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 14 settings to change.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","pictures"],"line":"Declared variables: image1, image2, image3, image4, image5, image6, image7, image8 and 6 more. 3 hex colors and 1 font stack are written in the file's CSS. It also reads its own custom properties with fallbacks (--background); set them on a wrapping element to re-skin it without editing.","read":false}},{"id":"hyperframes/block/carousel-vision-5","name":"Vision Carousel 5","kind":"html-video","job":"layout","line":"A ring of large image cards tilted into a row under a 3D camera, each card turning toward the center (Vision style 5); 12 image slots. Credited to Jake Moran.","path":"registry/blocks/carousel-vision-5","use":"Copy the folder into a project, or `npx hyperframes add carousel-vision-5` (fetches it from GitHub main to compositions/carousel-vision-5.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 14 settings to change.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","pictures"],"line":"Declared variables: image1, image2, image3, image4, image5, image6, image7, image8 and 6 more. 3 hex colors and 1 font stack are written in the file's CSS. It also reads its own custom properties with fallbacks (--background); set them on a wrapping element to re-skin it without editing.","read":false}},{"id":"hyperframes/block/chatgpt-exchange","name":"ChatGPT Exchange","kind":"html-video","job":"scene","line":"A portrait ChatGPT-style exchange types and sends a prompt, streams an answer, assembles a comparison table, and scrolls back through the result. Copies the look of ChatGPT; that brand is theirs. Credited to Jake Moran.","path":"registry/blocks/chatgpt-exchange","use":"Copy the folder into a project, or `npx hyperframes add chatgpt-exchange` (fetches it from GitHub main to compositions/chatgpt-exchange.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1080,"h":1920,"seconds":14.9,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors"],"line":"No declared variables. Its colors are custom properties declared in one block in the file (--blue, --bubble, --chip-bg, --chip-line, --dim, 9 in all).","read":true}},{"id":"hyperframes/block/chromatic-radial-split","name":"Chromatic Radial Split","kind":"html-video","job":"transition","line":"Demo card for the chromatic-split shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is not a drop-in; use the shader through the shader-transitions package or lift its GLSL.","path":"registry/blocks/chromatic-radial-split","use":"Copy the folder into a project, or `npx hyperframes add chromatic-radial-split` (fetches it from GitHub main to compositions/chromatic-radial-split.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":4,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 3 hex colors and 4 font stacks are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/chrome-orb","name":"Chrome Orb","kind":"html-video","job":"effect","line":"A mirror-chrome orb reflects a bright studio light, on black. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/chrome-orb","use":"Copy the folder into a project, or `npx hyperframes add chrome-orb` (fetches it from GitHub main to compositions/chrome-orb.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/cinemagraph","name":"Cinemagraph","kind":"html-video","job":"effect","line":"A still photograph with one living region: the frame is frozen while a single feathered window keeps moving - here, steam rising over a cup - drawn from the seek time alone with a period that divides the duration, so the render…","path":"registry/blocks/cinemagraph","use":"Copy the folder into a project, or `npx hyperframes add cinemagraph` (fetches it from GitHub main to compositions/cinemagraph.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":10,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors","pictures"],"line":"No declared variables. 3 hex colors are written in the file's CSS.","read":false}},{"id":"hyperframes/block/cinematic-zoom","name":"Cinematic Zoom","kind":"html-video","job":"transition","line":"Demo card for the cinematic-zoom shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is not a drop-in; use the shader through the shader-transitions package or lift its GLSL.","path":"registry/blocks/cinematic-zoom","use":"Copy the folder into a project, or `npx hyperframes add cinematic-zoom` (fetches it from GitHub main to compositions/cinematic-zoom.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":4,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 3 hex colors and 4 font stacks are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/claude-exchange","name":"Claude Exchange","kind":"html-video","job":"scene","line":"A portrait Claude-style exchange types a prompt, works through search and reasoning steps, then streams a detailed answer with citations and actions. Copies the look of Claude; that brand is theirs. Credited to Jake Moran.","path":"registry/blocks/claude-exchange","use":"Copy the folder into a project, or `npx hyperframes add claude-exchange` (fetches it from GitHub main to compositions/claude-exchange.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1080,"h":1920,"seconds":21.4,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors"],"line":"No declared variables. Its colors are custom properties declared in one block in the file (--card, --hair, --ink, --kb-bg, --key, 6 in all).","read":false}},{"id":"hyperframes/block/code-3d-extrude","name":"Code 3D Extrude","kind":"three","job":"code","line":"Syntax-highlighted code on a lit, beveled 3D slab that rotates through real space and settles to a readable rest — true WebGL depth and lighting, not a 2D transform.","path":"registry/blocks/code-3d-extrude","use":"Copy the folder into a project, or `npx hyperframes add code-3d-extrude` (fetches it from GitHub main to compositions/code-3d-extrude.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":8,"needs":"Three.js. Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors","text"],"line":"No declared variables. 9 hex colors are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/code-diff","name":"Code Diff","kind":"html-video","job":"code","line":"An edit shown as a colored diff — removed lines collapse in red, added lines expand in green.","path":"registry/blocks/code-diff","use":"Copy the folder into a project, or `npx hyperframes add code-diff` (fetches it from GitHub main to compositions/code-diff.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","preview":{"poster":"assets/asset-library/hyperframes-code-diff.jpg","w":1280,"h":720},"takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 29 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/code-highlight","name":"Code Highlight Sweep","kind":"html-video","job":"code","line":"A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line.","path":"registry/blocks/code-highlight","use":"Copy the folder into a project, or `npx hyperframes add code-highlight` (fetches it from GitHub main to compositions/code-highlight.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":5,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 29 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/code-morph","name":"Code Morph","kind":"html-video","job":"code","line":"One snippet transforms into another — tokens glide between positions, leavers fade out, enterers fade in. Shiki Magic Move re-driven as a paused GSAP timeline.","path":"registry/blocks/code-morph","use":"Copy the folder into a project, or `npx hyperframes add code-morph` (fetches it from GitHub main to compositions/code-morph.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":7,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 28 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/code-particle-assemble","name":"Code Particle Assemble","kind":"three","job":"code","line":"Thousands of GPU points scatter through space and fly to the exact glyph pixels of the code, resolving into readable syntax-highlighted text — a particle system, not a token tween.","path":"registry/blocks/code-particle-assemble","use":"Copy the folder into a project, or `npx hyperframes add code-particle-assemble` (fetches it from GitHub main to compositions/code-particle-assemble.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":8,"needs":"Three.js. Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors","text"],"line":"No declared variables. 7 hex colors are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/code-scroll","name":"Code Scroll To Line","kind":"html-video","job":"code","line":"The camera scrolls a long file to bring a target line to center and spotlights it — for walking through real modules.","path":"registry/blocks/code-scroll","use":"Copy the folder into a project, or `npx hyperframes add code-scroll` (fetches it from GitHub main to compositions/code-scroll.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 29 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/code-shader-dissolve","name":"Code Shader Dissolve","kind":"three","job":"code","line":"The code compiles into existence: a GPU fragment shader resolves it out of seeded noise with a chromatic dissolve front and edge glow, then holds crisp.","path":"registry/blocks/code-shader-dissolve","use":"Copy the folder into a project, or `npx hyperframes add code-shader-dissolve` (fetches it from GitHub main to compositions/code-shader-dissolve.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":7,"needs":"Three.js. Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors","text"],"line":"No declared variables. 8 hex colors are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/code-slice-hero","name":"Code Slice Hero","kind":"html-video","job":"title","line":"A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline.","path":"registry/blocks/code-slice-hero","use":"Copy the folder into a project, or `npx hyperframes add code-slice-hero` (fetches it from GitHub main to compositions/code-slice-hero.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":8,"takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 4 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/code-snippet-apple-terminal-pro","name":"Code Snippet - Apple Terminal Pro","kind":"html-video","job":"code","line":"Apple Terminal Pro profile: black background with gray text and lime green cursor, per-character typing animation of a shell session. Copies the look of Apple Terminal; that brand is theirs.","path":"registry/blocks/code-snippet-apple-terminal-pro","use":"Copy the folder into a project, or `npx hyperframes add code-snippet-apple-terminal-pro` (fetches it from GitHub main to compositions/code-snippet-apple-terminal-pro.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":12,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 14 hex colors and 2 font stacks are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/code-snippet-dark-2026","name":"Code Snippet - Dark 2026","kind":"html-video","job":"code","line":"VS Code workbench with per-character typing animation in the Dark 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar. Copies the look of VS Code; that brand is theirs.","path":"registry/blocks/code-snippet-dark-2026","use":"Copy the folder into a project, or `npx hyperframes add code-snippet-dark-2026` (fetches it from GitHub main to compositions/code-snippet-dark-2026.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":11,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors"],"line":"No declared variables. Its colors are custom properties declared in one block in the file (--activity-bg, --activity-fg, --activity-muted, --editor-bg, --editor-fg, 24 in all). The words are in the HTML.","read":false}},{"id":"hyperframes/block/code-snippet-dark-modern","name":"Code Snippet - Dark Modern","kind":"html-video","job":"code","line":"VS Code workbench with per-character typing animation in the Dark Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar. Copies the look of VS Code; that brand is theirs.","path":"registry/blocks/code-snippet-dark-modern","use":"Copy the folder into a project, or `npx hyperframes add code-snippet-dark-modern` (fetches it from GitHub main to compositions/code-snippet-dark-modern.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":11,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors"],"line":"No declared variables. Its colors are custom properties declared in one block in the file (--activity-bg, --activity-fg, --activity-muted, --editor-bg, --editor-fg, 24 in all). The words are in the HTML.","read":false}},{"id":"hyperframes/block/code-typing","name":"Code Typing","kind":"html-video","job":"code","line":"Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation.","path":"registry/blocks/code-typing","use":"Copy the folder into a project, or `npx hyperframes add code-typing` (fetches it from GitHub main to compositions/code-typing.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":5,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 29 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/color-wheel","name":"Color Wheel","kind":"html-video","job":"ground","line":"A wide gradient slides slowly through the colors of the rainbow. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/color-wheel","use":"Copy the folder into a project, or `npx hyperframes add color-wheel` (fetches it from GitHub main to compositions/color-wheel.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/cosmic-orb","name":"Cosmic Orb","kind":"html-video","job":"ground","line":"An iridescent soap-bubble planet: a slowly spinning sphere of nebula bands, dust lanes and twinkling stars wrapped in a refracting glass limb with chromatic aberration at the edge. The repo marks it experimental.","path":"registry/blocks/cosmic-orb","use":"Copy the folder into a project, or `npx hyperframes add cosmic-orb` (fetches it from GitHub main to compositions/cosmic-orb.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 18 settings to change.","w":1920,"h":1080,"seconds":10,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","text"],"line":"Declared variables: hue, accent, spin, stars, glow, size, pulse, pulseEnvelope and 1 more. 2 hex colors are written in the file's CSS.","read":false}},{"id":"hyperframes/block/cross-warp-morph","name":"Cross Warp Morph","kind":"html-video","job":"transition","line":"Demo card for the cross-warp-morph shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is not a drop-in; use the shader through the shader-transitions package or lift its GLSL.","path":"registry/blocks/cross-warp-morph","use":"Copy the folder into a project, or `npx hyperframes add cross-warp-morph` (fetches it from GitHub main to compositions/cross-warp-morph.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":4,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 3 hex colors and 4 font stacks are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/cuboid-carousel","name":"Cuboid Carousel","kind":"three","job":"layout","line":"A chain of bevelled cuboids rides a traveling wave as a content carousel.","path":"registry/blocks/cuboid-carousel","use":"Copy the folder into a project, or `npx hyperframes add cuboid-carousel` (fetches it from GitHub main to compositions/cuboid-carousel.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":6.67,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow); three.js. Loads its libraries from the network when it renders (fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 13 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/data-chart","name":"Data Chart","kind":"html-video","job":"chart","line":"Animated bar + line chart with staggered reveal, NYT-style typography, and value labels.","path":"registry/blocks/data-chart","use":"Copy the folder into a project, or `npx hyperframes add data-chart` (fetches it from GitHub main to compositions/data-chart.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 2 settings to change.","w":1920,"h":1080,"seconds":15,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","preview":{"poster":"assets/asset-library/hyperframes-data-chart.jpg","w":1280,"h":720},"takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 7 hex colors and 2 font stacks are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/domain-warp-dissolve","name":"Domain Warp Dissolve","kind":"html-video","job":"transition","line":"Demo card for the domain-warp shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is not a drop-in; use the shader through the shader-transitions package or lift its GLSL.","path":"registry/blocks/domain-warp-dissolve","use":"Copy the folder into a project, or `npx hyperframes add domain-warp-dissolve` (fetches it from GitHub main to compositions/domain-warp-dissolve.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":4,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 3 hex colors and 4 font stacks are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/editorial-flash-overlay","name":"Editorial Flash Overlay","kind":"html-video","job":"overlay","line":"Finite neutral-warm light layers for a seek-safe camera-flash cut or social reveal.","path":"registry/blocks/editorial-flash-overlay","use":"Copy the folder into a project, or `npx hyperframes add editorial-flash-overlay` (fetches it from GitHub main to compositions/editorial-flash-overlay.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":4,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":[],"line":"No declared variables and no colors or fonts of its own found; what it shows is set by the markup and script in the file.","read":false}},{"id":"hyperframes/block/exploded-stack","name":"Exploded Stack","kind":"three","job":"diagram","line":"Isometric layer plates explode apart with a label beside each layer, hold, then collapse back into one stack. Built for architecture and system diagrams.","path":"registry/blocks/exploded-stack","use":"Copy the folder into a project, or `npx hyperframes add exploded-stack` (fetches it from GitHub main to compositions/exploded-stack.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":5,"needs":"Three.js. Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 6 hex colors and 2 font stacks are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/extruded-logo","name":"Extruded Logo","kind":"three","job":"logo","line":"Beveled 3D letters flip up one by one, the word swings so light runs across the bevels, then settles for a readable hold. Chrome, gold or matte. Check your word before you rely on it: when we rendered it, its own sample word drew right, and the letters L and H did not (L as a filled wedge, H as a backwards N).","path":"registry/blocks/extruded-logo","use":"Copy the folder into a project, or `npx hyperframes add extruded-logo` (fetches it from GitHub main to compositions/extruded-logo.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":5,"needs":"Three.js. Loads its libraries from the network when it renders (cdn.jsdelivr.net).","preview":{"video":"assets/asset-library/hyperframes-extruded-logo.mp4","poster":"assets/asset-library/hyperframes-extruded-logo-poster.jpg","w":1280,"h":720,"seconds":5},"takes":{"how":"props","what":["colors","text"],"line":"Declared variables, in the block's page and not in its registry file: text (8 characters at most), tagline, finish (chrome, gold or matte), rim_color, background. The tagline's color and font are written in the file's CSS.","read":true}},{"id":"hyperframes/block/falling-lines","name":"Falling Lines","kind":"html-video","job":"ground","line":"White lines fall down the frame at varied speeds, each fading into a trail. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/falling-lines","use":"Copy the folder into a project, or `npx hyperframes add falling-lines` (fetches it from GitHub main to compositions/falling-lines.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/flash-through-white","name":"Flash Through White","kind":"html-video","job":"transition","line":"Demo card for the flash-through-white shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is not a drop-in; use the shader through the shader-transitions package or lift its GLSL.","path":"registry/blocks/flash-through-white","use":"Copy the folder into a project, or `npx hyperframes add flash-through-white` (fetches it from GitHub main to compositions/flash-through-white.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":4,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 3 hex colors and 4 font stacks are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/flowchart","name":"Flowchart","kind":"html-video","job":"diagram","line":"Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction.","path":"registry/blocks/flowchart","use":"Copy the folder into a project, or `npx hyperframes add flowchart` (fetches it from GitHub main to compositions/flowchart.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":12,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 13 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/flowchart-vertical","name":"Flowchart Vertical","kind":"html-video","job":"diagram","line":"Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction.","path":"registry/blocks/flowchart-vertical","use":"Copy the folder into a project, or `npx hyperframes add flowchart-vertical` (fetches it from GitHub main to compositions/flowchart-vertical.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1440,"h":2560,"seconds":12,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 13 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/flowing-gradient","name":"Flowing Gradient","kind":"html-video","job":"ground","line":"Bands of orange and violet flow across the frame in a smooth gradient. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/flowing-gradient","use":"Copy the folder into a project, or `npx hyperframes add flowing-gradient` (fetches it from GitHub main to compositions/flowing-gradient.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/fractal-noise","name":"Fractal Noise","kind":"html-video","job":"ground","line":"Soft gray fractal noise drifts across the frame like slow clouds. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/fractal-noise","use":"Copy the folder into a project, or `npx hyperframes add fractal-noise` (fetches it from GitHub main to compositions/fractal-noise.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/freeze-frame-dressing","name":"Freeze-Frame Dressing","kind":"html-video","job":"overlay","line":"Timeline-driven paper, tape, and flash dressing for a freeze-frame or background-removed subject.","path":"registry/blocks/freeze-frame-dressing","use":"Copy the folder into a project, or `npx hyperframes add freeze-frame-dressing` (fetches it from GitHub main to compositions/freeze-frame-dressing.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":4,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/frost","name":"Frost","kind":"html-video","job":"effect","line":"A frozen blue orb with frost creeping in from its edge, on black. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/frost","use":"Copy the folder into a project, or `npx hyperframes add frost` (fetches it from GitHub main to compositions/frost.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/frost-sequence-camera-orbit","name":"Frost Sequence Camera Orbit","kind":"three","job":"logo","line":"An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades. Idea only: The repo's CREDITS.md says the origin of three of its textures is still to be confirmed with the author.","path":"registry/blocks/frost-sequence-camera-orbit","use":"","w":1920,"h":1080,"seconds":22.5,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow); three.js; 3 MB folder","look_only":true},{"id":"hyperframes/block/gabor-noise","name":"Gabor Noise","kind":"html-video","job":"ground","line":"Gray streaky noise drifts across the frame like a moving fingerprint. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/gabor-noise","use":"Copy the folder into a project, or `npx hyperframes add gabor-noise` (fetches it from GitHub main to compositions/gabor-noise.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/gallery-tunnel","name":"Gallery Tunnel","kind":"three","job":"ground","line":"An infinite corridor of panels: a square tunnel receding to a vanishing point, its floor, ceiling and walls tiled with saturated color slabs and caller-supplied images that swell toward camera and exit past you, the far end… The repo marks it experimental.","path":"registry/blocks/gallery-tunnel","use":"Copy the folder into a project, or `npx hyperframes add gallery-tunnel` (fetches it from GitHub main to compositions/gallery-tunnel.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 20 settings to change.","w":1920,"h":1080,"seconds":12,"needs":"Three.js. Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","text"],"line":"Declared variables: images, imageMix, speed, palette, grid, fill, fog, edgeColor and 2 more. 9 hex colors are written in the file's CSS.","read":false}},{"id":"hyperframes/block/glass-hero","name":"Glass Hero","kind":"three","job":"title","line":"A solid glass object rises in front of a giant headline and keeps turning, so the type bends and splits into color through it.","path":"registry/blocks/glass-hero","use":"Copy the folder into a project, or `npx hyperframes add glass-hero` (fetches it from GitHub main to compositions/glass-hero.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":5,"needs":"Three.js. Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 3 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/glass-shard-title","name":"Glass Shard Title","kind":"three","job":"title","line":"Glass shards fly in through fog and tile themselves into the headline. Idea only: The repo's CREDITS.md says the origin of its matcap image is still to be confirmed with the author.","path":"registry/blocks/glass-shard-title","use":"","w":1920,"h":1080,"seconds":12.16,"needs":"Three.js. Loads its libraries from the network when it renders (cdn.jsdelivr.net; 3 MB folder).","look_only":true},{"id":"hyperframes/block/glitch","name":"Glitch","kind":"html-video","job":"transition","line":"Demo card for the glitch shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is not a drop-in; use the shader through the shader-transitions package or lift its GLSL.","path":"registry/blocks/glitch","use":"Copy the folder into a project, or `npx hyperframes add glitch` (fetches it from GitHub main to compositions/glitch.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":4,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 3 hex colors and 4 font stacks are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/godrays","name":"Godrays","kind":"html-video","job":"ground","line":"Rays of light fan out from a corner and drift across a deep blue field. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/godrays","use":"Copy the folder into a project, or `npx hyperframes add godrays` (fetches it from GitHub main to compositions/godrays.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/goo","name":"Goo","kind":"html-video","job":"effect","line":"A glossy green liquid ball whose surface bulges and ripples like wet goo, centerd on black. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/goo","use":"Copy the folder into a project, or `npx hyperframes add goo` (fetches it from GitHub main to compositions/goo.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/gooey-split","name":"Gooey Split","kind":"html-video","job":"logo","line":"A dot splits into a three-dot menu with a gooey metaball neck, spins into a swirl mark under directional shutter motion blur, then breaks back into three dots and merges into one.","path":"registry/blocks/gooey-split","use":"Copy the folder into a project, or `npx hyperframes add gooey-split` (fetches it from GitHub main to compositions/gooey-split.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":4.7,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","preview":{"video":"assets/asset-library/hyperframes-gooey-split.mp4","poster":"assets/asset-library/hyperframes-gooey-split-poster.jpg","w":1280,"h":720,"seconds":4.7},"takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 2 hex colors are written in the file's CSS.","read":false}},{"id":"hyperframes/block/gravitational-lens","name":"Gravitational Lens","kind":"html-video","job":"transition","line":"Demo card for the gravitational-lens shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is not a drop-in; use the shader through the shader-transitions package or lift its GLSL.","path":"registry/blocks/gravitational-lens","use":"Copy the folder into a project, or `npx hyperframes add gravitational-lens` (fetches it from GitHub main to compositions/gravitational-lens.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":4,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 3 hex colors and 4 font stacks are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/halftone-field","name":"Halftone Field","kind":"html-video","job":"ground","line":"A full-bleed halftone light field: a grid of dots whose size and color track a slow flowing simplex-noise field, so broad bands of light sweep across a mostly-black frame like a giant LED wall showing a plasma. The repo marks it experimental.","path":"registry/blocks/halftone-field","use":"Copy the folder into a project, or `npx hyperframes add halftone-field` (fetches it from GitHub main to compositions/halftone-field.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 22 settings to change.","w":1920,"h":1080,"seconds":10,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors"],"line":"Declared variables: frequency, speed, cellSize, gamma, paletteBias, palette1, palette2, palette3 and 3 more. 5 hex colors are written in the file's CSS.","read":false}},{"id":"hyperframes/block/heatmap","name":"Heatmap","kind":"html-video","job":"effect","line":"Thermal colors flow through a glowing orb, on black. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/heatmap","use":"Copy the folder into a project, or `npx hyperframes add heatmap` (fetches it from GitHub main to compositions/heatmap.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/heygen-avatar-promo-card","name":"HeyGen Avatar Promo Card","kind":"html-video","job":"scene","line":"A portrait HeyGen offer card pairs a moving avatar mosaic with bold promotional typography and a branded callout. Credited to HeyGen. Idea only: It is HeyGen's own advert, with the HeyGen logo in it.","path":"registry/blocks/heygen-avatar-promo-card","use":"","w":1080,"h":1920,"seconds":10,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","look_only":true},{"id":"hyperframes/block/hologram","name":"Hologram","kind":"html-video","job":"effect","line":"A pale blue holographic orb with scan rings and flicker, on black. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/hologram","use":"Copy the folder into a project, or `npx hyperframes add hologram` (fetches it from GitHub main to compositions/hologram.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/holographic","name":"Holographic","kind":"html-video","job":"effect","line":"An iridescent foil orb with a shifting rainbow sheen, centerd on black. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/holographic","use":"Copy the folder into a project, or `npx hyperframes add holographic` (fetches it from GitHub main to compositions/holographic.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/hw-frame","name":"Sketched Frame","kind":"html-video","job":"frame","line":"Media in a hand-drawn border with corner doodles and a handwritten caption; the unit tilts slightly and boils (images inside the block; keep live footage in the host).","path":"registry/blocks/hw-frame","use":"Copy the folder into a project, or `npx hyperframes add hw-frame` (fetches it from GitHub main to compositions/hw-frame.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":8,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors","type"],"line":"No declared variables. Its colors are custom properties declared in one block in the file (--hw-accent-warm, --hw-font-print, --hw-font-script, --hw-ink).","read":false}},{"id":"hyperframes/block/hw-path-text","name":"Text Along a Path","kind":"html-video","job":"title","line":"Handwriting flowing along any SVG path with a per-character reveal; the path is the only geometry input.","path":"registry/blocks/hw-path-text","use":"Copy the folder into a project, or `npx hyperframes add hw-path-text` (fetches it from GitHub main to compositions/hw-path-text.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors","type"],"line":"No declared variables. Its colors are custom properties declared in one block in the file (--hw-font-print, --hw-font-script, --hw-ink).","read":false}},{"id":"hyperframes/block/hw-pipeline","name":"Hand-Drawn Flowchart","kind":"html-video","job":"diagram","line":"Wobbled boxes with handwritten labels joined by curved connectors, drawing on in sequence from a node list.","path":"registry/blocks/hw-pipeline","use":"Copy the folder into a project, or `npx hyperframes add hw-pipeline` (fetches it from GitHub main to compositions/hw-pipeline.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":7,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors","type"],"line":"No declared variables. Its colors are custom properties declared in one block in the file (--hw-accent, --hw-font-print, --hw-font-script, --hw-ink).","read":false}},{"id":"hyperframes/block/hw-scribble-transition","name":"Scribble Transition","kind":"html-video","job":"transition","line":"Overlay transition: scribble bands accumulate to cover the frame with a solid backstop, the host cuts beneath, and the scribble clears.","path":"registry/blocks/hw-scribble-transition","use":"Copy the folder into a project, or `npx hyperframes add hw-scribble-transition` (fetches it from GitHub main to compositions/hw-scribble-transition.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2.2,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/hw-text-cloud","name":"Speech Bubble","kind":"html-video","job":"callout","line":"Hand-drawn speech bubble with a positionable tail: outline draws on, paper fill fades in, handwritten text types per character; boils.","path":"registry/blocks/hw-text-cloud","use":"Copy the folder into a project, or `npx hyperframes add hw-text-cloud` (fetches it from GitHub main to compositions/hw-text-cloud.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors","type"],"line":"No declared variables. Its colors are custom properties declared in one block in the file (--hw-font-print, --hw-font-script, --hw-ink, --hw-ink-dark).","read":false}},{"id":"hyperframes/block/hw-title","name":"Handwritten Title","kind":"html-video","job":"title","line":"Handwritten display text with a scalar-driven word-by-word highlight sweep and a seeded squiggle underline sized to the text; boils.","path":"registry/blocks/hw-title","use":"Copy the folder into a project, or `npx hyperframes add hw-title` (fetches it from GitHub main to compositions/hw-title.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors","type"],"line":"No declared variables. Its colors are custom properties declared in one block in the file (--hw-accent-warm, --hw-font-print, --hw-font-script, --hw-ink, --hw-ink-dark).","read":false}},{"id":"hyperframes/block/hw-write-title","name":"Handwritten Write-On Title","kind":"html-video","job":"title","line":"True glyph write-on: filled Caveat letterforms revealed by baked per-glyph centerline strokes traced in real stroke order with a curvature-adaptive pen-velocity ease (fast on straights, slow into curves, inter-stroke pen lifts).","path":"registry/blocks/hw-write-title","use":"Copy the folder into a project, or `npx hyperframes add hw-write-title` (fetches it from GitHub main to compositions/hw-write-title.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors","type"],"line":"No declared variables. Its colors are custom properties declared in one block in the file (--hw-accent-warm, --hw-font-print, --hw-ink, --hw-ink-dark).","read":false}},{"id":"hyperframes/block/instagram-follow","name":"Instagram Follow","kind":"html-video","job":"overlay","line":"Animated Instagram follow overlay with profile card and follow button. Copies the look of Instagram; that brand is theirs.","path":"registry/blocks/instagram-follow","use":"Copy the folder into a project, or `npx hyperframes add instagram-follow` (fetches it from GitHub main to compositions/instagram-follow.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1080,"h":1920,"seconds":4.5,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text","pictures"],"line":"No declared variables. 8 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/ios26-liquid-glass","name":"iOS 26 Liquid Glass Home Screen","kind":"three","job":"3d","line":"3D iPhone with a normal iOS 26 home screen, liquid glass app icons, shader wallpaper, dock, and fluid glass notifications that drop from the status area onto a GLTF device model. The repo marks it experimental. Copies the look of iOS; that brand is theirs. The repo does not say where its device models came from.","path":"registry/blocks/ios26-liquid-glass","use":"Copy the folder into a project, or `npx hyperframes add ios26-liquid-glass` (fetches it from GitHub main to compositions/ios26-liquid-glass.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":15,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow); three.js. Loads its libraries from the network when it renders (cdn.jsdelivr.net, www.gstatic.com; 5 MB folder; bundled 3D model (.glb)).","takes":{"how":"edit the file","what":["colors","type","text","pictures"],"line":"No declared variables. 32 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/lens-flare","name":"Lens Flare","kind":"html-video","job":"ground","line":"A camera lens flare: a bright star burst and a faint rainbow halo that slowly shimmer on black. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/lens-flare","use":"Copy the folder into a project, or `npx hyperframes add lens-flare` (fetches it from GitHub main to compositions/lens-flare.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/light-edge","name":"Light Edge","kind":"html-video","job":"effect","line":"Purple and cyan light races around the edge of an orb on black. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/light-edge","use":"Copy the folder into a project, or `npx hyperframes add light-edge` (fetches it from GitHub main to compositions/light-edge.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/light-leak","name":"Light Leak","kind":"html-video","job":"transition","line":"Demo card for the light-leak shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is not a drop-in; use the shader through the shader-transitions package or lift its GLSL.","path":"registry/blocks/light-leak","use":"Copy the folder into a project, or `npx hyperframes add light-leak` (fetches it from GitHub main to compositions/light-leak.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":4,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 3 hex colors and 4 font stacks are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/liquid-glass-notification","name":"Liquid Glass Notification","kind":"three","job":"scene","line":"Frosted glass notification cards floating over an aurora shader background. The repo marks it experimental.","path":"registry/blocks/liquid-glass-notification","use":"Copy the folder into a project, or `npx hyperframes add liquid-glass-notification` (fetches it from GitHub main to compositions/liquid-glass-notification.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":8,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow); three.js. Loads its libraries from the network when it renders (cdn.jsdelivr.net, cdnjs.cloudflare.com).","takes":{"how":"tokens","what":["colors"],"line":"No declared variables. Its colors are custom properties declared in one block in the file (--lg-shadow-offset-y, --lg-shadow-opacity, --lg-shadow-spread). The words are in the HTML.","read":false}},{"id":"hyperframes/block/liquid-glass-widgets","name":"Liquid Glass Widgets","kind":"three","job":"scene","line":"Frosted glass stat cards, showcase panel and pill chips over an aurora shader background. The repo marks it experimental.","path":"registry/blocks/liquid-glass-widgets","use":"Copy the folder into a project, or `npx hyperframes add liquid-glass-widgets` (fetches it from GitHub main to compositions/liquid-glass-widgets.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":8,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow); three.js. Loads its libraries from the network when it renders (cdn.jsdelivr.net, cdnjs.cloudflare.com).","takes":{"how":"tokens","what":["colors"],"line":"No declared variables. Its colors are custom properties declared in one block in the file (--lg-shadow-offset-y, --lg-shadow-opacity, --lg-shadow-spread). The words are in the HTML.","read":false}},{"id":"hyperframes/block/liquid-metal","name":"Liquid Metal","kind":"html-video","job":"effect","line":"A chrome sphere ripples and flows like molten metal on black. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/liquid-metal","use":"Copy the folder into a project, or `npx hyperframes add liquid-metal` (fetches it from GitHub main to compositions/liquid-metal.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/logo-outro","name":"Logo Outro","kind":"html-video","job":"end card","line":"Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill.","path":"registry/blocks/logo-outro","use":"Copy the folder into a project, or `npx hyperframes add logo-outro` (fetches it from GitHub main to compositions/logo-outro.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 2 settings to change.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 9 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/lottie-character-walk","name":"Lottie Character Walk","kind":"html-video","job":"scene","line":"A jointed flat character walks in on planted feet, stops and points at a card; the body acting is a Lottie file and the stage is GSAP. Item license: Apache-2.0.","path":"registry/blocks/lottie-character-walk","use":"Copy the folder into a project, or `npx hyperframes add lottie-character-walk` (fetches it from GitHub main to compositions/lottie-character-walk.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 2 settings to change.","w":1920,"h":1080,"seconds":7.5,"needs":"Lottie. Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"props","what":["text"],"line":"Declared variables: title, body. 3 hex colors and 1 font stack are written in the file's CSS.","read":false}},{"id":"hyperframes/block/lower-third-bild","name":"Lower Third — BILD Style","kind":"html-video","job":"lower third","line":"News-style lower third with tight-fit text boxes: white headline bar with red drop-shadow, red sub-line with white drop-shadow.","path":"registry/blocks/lower-third-bild","use":"Copy the folder into a project, or `npx hyperframes add lower-third-bild` (fetches it from GitHub main to compositions/lower-third-bild.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 2 settings to change.","w":1920,"h":1080,"seconds":8,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","preview":{"poster":"assets/asset-library/hyperframes-lower-third-bild.jpg","w":916,"h":516},"takes":{"how":"props","what":["text"],"line":"Declared variables: TXT_MAIN_1_Line, TXT_SUB. 3 hex colors and 2 font stacks are written in the file's CSS.","read":true}},{"id":"hyperframes/block/lt-accent-underline","name":"Lower Third — Accent Underline","kind":"html-video","job":"lower third","line":"Cardless lower third for footage overlay: name rises, an accent rule draws left-to-right, role fades in; text-shadowed for legibility.","path":"registry/blocks/lt-accent-underline","use":"Copy the folder into a project, or `npx hyperframes add lt-accent-underline` (fetches it from GitHub main to compositions/lt-accent-underline.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":4.8,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","preview":{"video":"assets/asset-library/hyperframes-lt-accent-underline.mp4","poster":"assets/asset-library/hyperframes-lt-accent-underline-poster.jpg","w":1280,"h":720,"seconds":4.8},"takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 3 hex colors and 2 font stacks are written in the file's CSS. The words are in the HTML.","read":true}},{"id":"hyperframes/block/lt-bold-block","name":"Lower Third — Bold Block","kind":"html-video","job":"lower third","line":"High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops.","path":"registry/blocks/lt-bold-block","use":"Copy the folder into a project, or `npx hyperframes add lt-bold-block` (fetches it from GitHub main to compositions/lt-bold-block.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":4.8,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","preview":{"video":"assets/asset-library/hyperframes-lt-bold-block.mp4","poster":"assets/asset-library/hyperframes-lt-bold-block-poster.jpg","w":1280,"h":720,"seconds":4.8},"takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 3 hex colors and 2 font stacks are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/lt-clean-bar","name":"Lower Third — Clean Bar","kind":"html-video","job":"lower third","line":"Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance.","path":"registry/blocks/lt-clean-bar","use":"Copy the folder into a project, or `npx hyperframes add lt-clean-bar` (fetches it from GitHub main to compositions/lt-clean-bar.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":4.8,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","preview":{"video":"assets/asset-library/hyperframes-lt-clean-bar.mp4","poster":"assets/asset-library/hyperframes-lt-clean-bar-poster.jpg","w":1280,"h":720,"seconds":4.8},"takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 4 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/lt-color-block","name":"Lower Third — Color Block","kind":"html-video","job":"lower third","line":"High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role.","path":"registry/blocks/lt-color-block","use":"Copy the folder into a project, or `npx hyperframes add lt-color-block` (fetches it from GitHub main to compositions/lt-color-block.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":4.8,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","preview":{"video":"assets/asset-library/hyperframes-lt-color-block.mp4","poster":"assets/asset-library/hyperframes-lt-color-block-poster.jpg","w":1280,"h":720,"seconds":4.8},"takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 2 hex colors and 2 font stacks are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/lt-dark-card","name":"Lower Third — Dark Card","kind":"html-video","job":"lower third","line":"Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance.","path":"registry/blocks/lt-dark-card","use":"Copy the folder into a project, or `npx hyperframes add lt-dark-card` (fetches it from GitHub main to compositions/lt-dark-card.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":4.8,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","preview":{"video":"assets/asset-library/hyperframes-lt-dark-card.mp4","poster":"assets/asset-library/hyperframes-lt-dark-card-poster.jpg","w":1280,"h":720,"seconds":4.8},"takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 4 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/lt-kicker-name","name":"Lower Third — Kicker Name","kind":"html-video","job":"lower third","line":"Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage.","path":"registry/blocks/lt-kicker-name","use":"Copy the folder into a project, or `npx hyperframes add lt-kicker-name` (fetches it from GitHub main to compositions/lt-kicker-name.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":4.8,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","preview":{"video":"assets/asset-library/hyperframes-lt-kicker-name.mp4","poster":"assets/asset-library/hyperframes-lt-kicker-name-poster.jpg","w":1280,"h":720,"seconds":4.8},"takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 3 hex colors and 2 font stacks are written in the file's CSS. The words are in the HTML.","read":true}},{"id":"hyperframes/block/lt-mask-reveal","name":"Lower Third — Mask Reveal","kind":"html-video","job":"lower third","line":"Cardless lower third: an accent sweep crosses and clip-path-reveals a heavy name, role fades up; for footage.","path":"registry/blocks/lt-mask-reveal","use":"Copy the folder into a project, or `npx hyperframes add lt-mask-reveal` (fetches it from GitHub main to compositions/lt-mask-reveal.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":4.8,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","preview":{"video":"assets/asset-library/hyperframes-lt-mask-reveal.mp4","poster":"assets/asset-library/hyperframes-lt-mask-reveal-poster.jpg","w":1280,"h":720,"seconds":4.8},"takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 3 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/lt-neon-border","name":"Neon Border","kind":"html-video","job":"lower third","line":"Two arcs of light travel the edge of a rounded panel and snap corner to corner, trailing a soft three-layer bloom. A lower third for a name and role. The repo marks it experimental.","path":"registry/blocks/lt-neon-border","use":"Copy the folder into a project, or `npx hyperframes add lt-neon-border` (fetches it from GitHub main to compositions/lt-neon-border.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 18 settings to change.","w":1920,"h":1080,"seconds":4.8,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","preview":{"video":"assets/asset-library/hyperframes-lt-neon-border.mp4","poster":"assets/asset-library/hyperframes-lt-neon-border-poster.jpg","w":1280,"h":720,"seconds":4.8},"takes":{"how":"props","what":["colors","text"],"line":"Declared variables: name, role, accent, movement, speed, cornerRadius, thickness, arcLength and 1 more. 3 hex colors and 1 font stack are written in the file's CSS.","read":true}},{"id":"hyperframes/block/lt-side-rule","name":"Lower Third — Side Rule","kind":"html-video","job":"lower third","line":"Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage.","path":"registry/blocks/lt-side-rule","use":"Copy the folder into a project, or `npx hyperframes add lt-side-rule` (fetches it from GitHub main to compositions/lt-side-rule.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":4.8,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","preview":{"video":"assets/asset-library/hyperframes-lt-side-rule.mp4","poster":"assets/asset-library/hyperframes-lt-side-rule-poster.jpg","w":1280,"h":720,"seconds":4.8},"takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 3 hex colors and 2 font stacks are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/lt-soft-pill","name":"Lower Third — Soft Pill","kind":"html-video","job":"lower third","line":"Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance.","path":"registry/blocks/lt-soft-pill","use":"Copy the folder into a project, or `npx hyperframes add lt-soft-pill` (fetches it from GitHub main to compositions/lt-soft-pill.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":4.8,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","preview":{"video":"assets/asset-library/hyperframes-lt-soft-pill.mp4","poster":"assets/asset-library/hyperframes-lt-soft-pill-poster.jpg","w":1280,"h":720,"seconds":4.8},"takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 4 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/lt-stack-bars","name":"Lower Third — Stack Bars","kind":"html-video","job":"lower third","line":"Two stacked bars: a dark name bar wipes from the left, an accent role bar wipes from the right.","path":"registry/blocks/lt-stack-bars","use":"Copy the folder into a project, or `npx hyperframes add lt-stack-bars` (fetches it from GitHub main to compositions/lt-stack-bars.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":4.8,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","preview":{"video":"assets/asset-library/hyperframes-lt-stack-bars.mp4","poster":"assets/asset-library/hyperframes-lt-stack-bars-poster.jpg","w":1280,"h":720,"seconds":4.8},"takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 3 hex colors and 2 font stacks are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/macos-notification","name":"macOS Notification","kind":"html-video","job":"overlay","line":"Animated macOS-style notification banner with app icon and message. Copies the look of macOS; that brand is theirs.","path":"registry/blocks/macos-notification","use":"Copy the folder into a project, or `npx hyperframes add macos-notification` (fetches it from GitHub main to compositions/macos-notification.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":5,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 4 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/macos-tahoe-liquid-glass","name":"macOS Tahoe Liquid Glass Desktop","kind":"three","job":"3d","line":"3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move. The repo marks it experimental. Copies the look of macOS; that brand is theirs. The repo does not say where its device models came from.","path":"registry/blocks/macos-tahoe-liquid-glass","use":"Copy the folder into a project, or `npx hyperframes add macos-tahoe-liquid-glass` (fetches it from GitHub main to compositions/macos-tahoe-liquid-glass.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":15,"needs":"Three.js. Loads its libraries from the network when it renders (cdn.jsdelivr.net, www.gstatic.com; 7 MB folder; bundled 3D model (.glb)).","takes":{"how":"edit the file","what":["colors","type","text","pictures"],"line":"No declared variables. 47 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/marble","name":"Marble","kind":"html-video","job":"ground","line":"Ink-dark veins wind through white in a marbled pattern that slowly shifts. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/marble","use":"Copy the folder into a project, or `npx hyperframes add marble` (fetches it from GitHub main to compositions/marble.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/mesh-gradient","name":"Mesh Gradient","kind":"html-video","job":"ground","line":"Soft coral, orange and violet fields blend and drift in a mesh gradient. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/mesh-gradient","use":"Copy the folder into a project, or `npx hyperframes add mesh-gradient` (fetches it from GitHub main to compositions/mesh-gradient.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/message-thread-reveal","name":"Message Thread Reveal","kind":"html-video","job":"scene","line":"A full text conversation plays out on a phone - bubbles popping in, typing indicators, a shared link card, emoji, delivered receipts - with the whole thread scrolling up beat by beat until a closing card lands. Credited to Miao Yang.","path":"registry/blocks/message-thread-reveal","use":"Copy the folder into a project, or `npx hyperframes add message-thread-reveal` (fetches it from GitHub main to compositions/message-thread-reveal.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 21 settings to change.","w":1080,"h":1920,"seconds":25.7667,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["logo","text","pictures"],"line":"Declared variables: contactName, questionMessage, teaserMessage, cardImage, cardTitle, cardDomain, reactionMessage, reactionEmoji and 13 more. 24 hex colors and 2 font stacks are written in the file's CSS.","read":false}},{"id":"hyperframes/block/mk-background","name":"Minimal Gradient Background","kind":"html-video","job":"ground","line":"Procedural soft-blob gradient backdrop in a minimalist presentation style: two radial blobs drifting over a base color, with an animatable rounded-card bar mask and optional frosted-glass mode.","path":"registry/blocks/mk-background","use":"Copy the folder into a project, or `npx hyperframes add mk-background` (fetches it from GitHub main to compositions/mk-background.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":10,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors","type"],"line":"No declared variables. Its colors are custom properties declared in one block in the file (--mk-font, --mk-radius-card, --mk-shadow).","read":false}},{"id":"hyperframes/block/mk-callout-highlight","name":"Word-Sweep Highlight","kind":"html-video","job":"caption","line":"A sentence whose word-by-word emphasis is driven by a single scalar — tween it to sync the highlight with a voiceover.","path":"registry/blocks/mk-callout-highlight","use":"Copy the folder into a project, or `npx hyperframes add mk-callout-highlight` (fetches it from GitHub main to compositions/mk-callout-highlight.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":8,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors","type"],"line":"No declared variables. Its colors are custom properties declared in one block in the file (--mk-font, --mk-ink, --mk-ink-dark, --mk-ink-faint, --mk-ink-faint-dark).","read":false}},{"id":"hyperframes/block/mk-clone-wall-transition","name":"Text Clone Wall Transition","kind":"html-video","job":"transition","line":"Overlay transition: a tiled word wall covers the frame, inverts via difference blending, and clears — hard-cut the content beneath while covered.","path":"registry/blocks/mk-clone-wall-transition","use":"Copy the folder into a project, or `npx hyperframes add mk-clone-wall-transition` (fetches it from GitHub main to compositions/mk-clone-wall-transition.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2.4,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors","type"],"line":"No declared variables. Its colors are custom properties declared in one block in the file (--mk-font, --mk-ink, --mk-paper, --mk-radius-card, --mk-shadow).","read":false}},{"id":"hyperframes/block/mk-line-graph","name":"Minimal Line Graph","kind":"html-video","job":"chart","line":"One or two SVG series draw on with dots popping and value labels riding the draw front; dim baseline axis, x-labels, color-dot legend.","path":"registry/blocks/mk-line-graph","use":"Copy the folder into a project, or `npx hyperframes add mk-line-graph` (fetches it from GitHub main to compositions/mk-line-graph.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":7,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors","type"],"line":"No declared variables. Its colors are custom properties declared in one block in the file (--mk-accent, --mk-font, --mk-ink, --mk-ink-dim, --mk-paper).","read":false}},{"id":"hyperframes/block/mk-placeholder-grid","name":"Rounded Media Grid","kind":"html-video","job":"layout","line":"N-up rounded-corner media grid (2-up, 3-up, 4-up, 3x2, hero plus two): per-cell inside-scale framing, staggered box-in entrance, slow settle.","path":"registry/blocks/mk-placeholder-grid","use":"Copy the folder into a project, or `npx hyperframes add mk-placeholder-grid` (fetches it from GitHub main to compositions/mk-placeholder-grid.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":8,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors","type"],"line":"No declared variables. Its colors are custom properties declared in one block in the file (--mk-accent-dark, --mk-accent-dark-soft, --mk-font, --mk-ink-dim, --mk-paper, 7 in all).","read":false}},{"id":"hyperframes/block/mk-progress-stat","name":"Count-Up Stat Card","kind":"html-video","job":"number","line":"Big-numeral statistic with count-up, label, thin progress track filling to value/max, and caption; light and dark schemes.","path":"registry/blocks/mk-progress-stat","use":"Copy the folder into a project, or `npx hyperframes add mk-progress-stat` (fetches it from GitHub main to compositions/mk-progress-stat.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":7,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors","type"],"line":"No declared variables. Its colors are custom properties declared in one block in the file (--mk-accent, --mk-accent-dark, --mk-font, --mk-ink, --mk-ink-dark, 7 in all).","read":false}},{"id":"hyperframes/block/mk-specs-list","name":"Specs Checklist","kind":"html-video","job":"layout","line":"Left-aligned specs/traits checklist over footage or a board: rows slide in staggered with an accent underline sweep; light and dark schemes.","path":"registry/blocks/mk-specs-list","use":"Copy the folder into a project, or `npx hyperframes add mk-specs-list` (fetches it from GitHub main to compositions/mk-specs-list.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":8,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors","type"],"line":"No declared variables. Its colors are custom properties declared in one block in the file (--mk-accent, --mk-accent-dark, --mk-font, --mk-hairline, --mk-ink, 8 in all).","read":false}},{"id":"hyperframes/block/nebula","name":"Nebula","kind":"html-video","job":"effect","line":"A small world of pink and blue gas swirls inside a sphere on black. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/nebula","use":"Copy the folder into a project, or `npx hyperframes add nebula` (fetches it from GitHub main to compositions/nebula.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/news-ticker","name":"News Ticker","kind":"html-video","job":"lower third","line":"Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl.","path":"registry/blocks/news-ticker","use":"Copy the folder into a project, or `npx hyperframes add news-ticker` (fetches it from GitHub main to compositions/news-ticker.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":7,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","preview":{"video":"assets/asset-library/hyperframes-news-ticker.mp4","poster":"assets/asset-library/hyperframes-news-ticker-poster.jpg","w":1280,"h":720,"seconds":7},"takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 10 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/north-korea-locked-down","name":"North Korea Locked Down","kind":"html-video","job":"map","line":"Realistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash. Credited to Stronkter.","path":"registry/blocks/north-korea-locked-down","use":"Copy the folder into a project, or `npx hyperframes add north-korea-locked-down` (fetches it from GitHub main to compositions/north-korea-locked-down.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":7,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors","type","text","pictures"],"line":"No declared variables. 5 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/notes-reveal","name":"Notes Reveal","kind":"html-video","job":"scene","line":"A personal note is typed character by character in a notes app - caret riding every letter, the page scrolling up on measured settle curves as each line lands - then cuts to a hand-lettered paper card with a marker headline and a… Credited to Miao Yang.","path":"registry/blocks/notes-reveal","use":"Copy the folder into a project, or `npx hyperframes add notes-reveal` (fetches it from GitHub main to compositions/notes-reveal.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 20 settings to change.","w":1080,"h":1920,"seconds":24.85,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["logo","text","pictures"],"line":"Declared variables: titleL1, titleL2, noteLine1, noteLine2, noteLine3, noteLine4, noteLine5, noteLine6 and 12 more. 24 hex colors and 5 font stacks are written in the file's CSS.","read":false}},{"id":"hyperframes/block/notification-cascade","name":"Notification Cascade","kind":"html-video","job":"scene","line":"Phone notifications land one after another and stack up the screen, each banner pushing the pile down as it arrives, before the whole stack lifts away into a closing card. Credited to Miao Yang.","path":"registry/blocks/notification-cascade","use":"Copy the folder into a project, or `npx hyperframes add notification-cascade` (fetches it from GitHub main to compositions/notification-cascade.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 10 settings to change.","w":1080,"h":1920,"seconds":14,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","logo","text","pictures"],"line":"Declared variables: notifTitle, message1, message2, message3, message4, appName, headlineTop, headlineAccent and 2 more. Its colors are custom properties declared in one block in the file (--nc-accent, --nc-endcard-accent, --nc-endcard-ink, --nc-glass, --nc-ink, 7 in all). It also reads its own…","read":false}},{"id":"hyperframes/block/nyc-paris-flight","name":"NYC Paris Flight","kind":"html-video","job":"map","line":"Apple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound effects. Credited to Stronkter.","path":"registry/blocks/nyc-paris-flight","use":"Copy the folder into a project, or `npx hyperframes add nyc-paris-flight` (fetches it from GitHub main to compositions/nyc-paris-flight.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net; bundled sound file).","takes":{"how":"edit the file","what":["colors","type","text","pictures"],"line":"No declared variables. 7 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/obsidian","name":"Obsidian","kind":"html-video","job":"effect","line":"A dark glass orb catches pink and cyan iridescent light on black. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/obsidian","use":"Copy the folder into a project, or `npx hyperframes add obsidian` (fetches it from GitHub main to compositions/obsidian.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/orbit-card","name":"Orbit Card","kind":"three","job":"3d","line":"A single feature card orbits a dot sphere on approved Blender camera motion.","path":"registry/blocks/orbit-card","use":"Copy the folder into a project, or `npx hyperframes add orbit-card` (fetches it from GitHub main to compositions/orbit-card.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":10,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow); three.js","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 8 hex colors and 2 font stacks are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/organic-light-leak-overlay","name":"Organic Light Leak Overlay","kind":"html-video","job":"overlay","line":"Finite CSS light-leak overlay for memory beats and motivated transitions.","path":"registry/blocks/organic-light-leak-overlay","use":"Copy the folder into a project, or `npx hyperframes add organic-light-leak-overlay` (fetches it from GitHub main to compositions/organic-light-leak-overlay.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":4,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":[],"line":"No declared variables and no colors or fonts of its own found; what it shows is set by the markup and script in the file.","read":false}},{"id":"hyperframes/block/oscilloscope-trace","name":"Oscilloscope Trace","kind":"html-video","job":"effect","line":"CRT oscilloscope beam sweeping a waveform across a 10x8 graticule, with closed-form phosphor persistence: the tail decays as exp(-age/tau) and brightens where the beam slows.","path":"registry/blocks/oscilloscope-trace","use":"Copy the folder into a project, or `npx hyperframes add oscilloscope-trace` (fetches it from GitHub main to compositions/oscilloscope-trace.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 7 settings to change.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","text"],"line":"Declared variables: waveform, frequency, amplitude, persistenceMs, phosphorColor, sweepRate, dataSeries. 9 hex colors and 1 font stack are written in the file's CSS.","read":false}},{"id":"hyperframes/block/plasma","name":"Plasma","kind":"html-video","job":"ground","line":"Deep violet plasma folds and churns across the whole frame. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/plasma","use":"Copy the folder into a project, or `npx hyperframes add plasma` (fetches it from GitHub main to compositions/plasma.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/plastic","name":"Plastic","kind":"html-video","job":"effect","line":"A glossy white plastic orb with soft studio reflections, on black. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/plastic","use":"Copy the folder into a project, or `npx hyperframes add plastic` (fetches it from GitHub main to compositions/plastic.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/prism","name":"Prism","kind":"html-video","job":"ground","line":"A white beam of light splits into a slowly turning rainbow. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/prism","use":"Copy the folder into a project, or `npx hyperframes add prism` (fetches it from GitHub main to compositions/prism.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/product-turntable","name":"Product Turntable","kind":"three","job":"3d","line":"A product turns a full revolution on a studio plinth in a seamless loop. Drop in a GLB or glTF model, or keep the built-in drink can with your own label.","path":"registry/blocks/product-turntable","use":"Copy the folder into a project, or `npx hyperframes add product-turntable` (fetches it from GitHub main to compositions/product-turntable.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":6,"needs":"Three.js. Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 3 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/rack-focus","name":"Rack Focus","kind":"html-video","job":"camera","line":"A focus pull with real aperture bokeh: the focal plane travels from a near subject to a far one, so one resolves as the other blows into hard-edged polygon discs that clip to a cat's eye toward the corners. The repo marks it experimental.","path":"registry/blocks/rack-focus","use":"Copy the folder into a project, or `npx hyperframes add rack-focus` (fetches it from GitHub main to compositions/rack-focus.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 22 settings to change.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","text"],"line":"Declared variables: nearfocus, farfocus, focallength, aperture, blades, catseye, pullstart, pullduration and 3 more. 2 hex colors are written in the file's CSS.","read":false}},{"id":"hyperframes/block/reddit-post","name":"Reddit Post Card","kind":"html-video","job":"overlay","line":"Animated Reddit post card overlay with upvotes and comments. Copies the look of Reddit; that brand is theirs.","path":"registry/blocks/reddit-post","use":"Copy the folder into a project, or `npx hyperframes add reddit-post` (fetches it from GitHub main to compositions/reddit-post.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":5,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 8 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/ridged-burn","name":"Ridged Burn","kind":"html-video","job":"transition","line":"Demo card for the ridged-burn shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is not a drop-in; use the shader through the shader-transitions package or lift its GLSL.","path":"registry/blocks/ridged-burn","use":"Copy the folder into a project, or `npx hyperframes add ridged-burn` (fetches it from GitHub main to compositions/ridged-burn.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":4,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 3 hex colors and 4 font stacks are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/ripple-waves","name":"Ripple Waves","kind":"html-video","job":"transition","line":"Demo card for the ripple-waves shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is not a drop-in; use the shader through the shader-transitions package or lift its GLSL.","path":"registry/blocks/ripple-waves","use":"Copy the folder into a project, or `npx hyperframes add ripple-waves` (fetches it from GitHub main to compositions/ripple-waves.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":4,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 3 hex colors and 4 font stacks are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/ripples","name":"Ripples","kind":"html-video","job":"ground","line":"Concentric rings ripple outward from the center, white on black. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/ripples","use":"Copy the folder into a project, or `npx hyperframes add ripples` (fetches it from GitHub main to compositions/ripples.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/sdf-iris","name":"SDF Iris","kind":"html-video","job":"transition","line":"Demo card for the sdf-iris shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is not a drop-in; use the shader through the shader-transitions package or lift its GLSL.","path":"registry/blocks/sdf-iris","use":"Copy the folder into a project, or `npx hyperframes add sdf-iris` (fetches it from GitHub main to compositions/sdf-iris.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":4,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 3 hex colors and 4 font stacks are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/share-sheet-carousel","name":"Share-Sheet Carousel","kind":"html-video","job":"scene","line":"A share sheet springs up from the bottom of the phone and cycles previews inside its card on a fast cut rhythm while the blurred ground swaps behind it, ending on an accept tap. Credited to Miao Yang.","path":"registry/blocks/share-sheet-carousel","use":"Copy the folder into a project, or `npx hyperframes add share-sheet-carousel` (fetches it from GitHub main to compositions/share-sheet-carousel.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 11 settings to change.","w":1080,"h":1920,"seconds":7.2333,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","logo","text","pictures"],"line":"Declared variables: shareTitle, senderName, itemLabel, stripText, acceptLabel, declineLabel, slideImage1, slideImage2 and 3 more. 11 hex colors and 1 font stack are written in the file's CSS. It also reads its own custom properties with fallbacks (--hf-ui-accent); set them on a wrapping element to…","read":false}},{"id":"hyperframes/block/sine-wave","name":"Sine Wave","kind":"html-video","job":"ground","line":"A glowing white sine wave travels across a black frame. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/sine-wave","use":"Copy the folder into a project, or `npx hyperframes add sine-wave` (fetches it from GitHub main to compositions/sine-wave.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/slack-notification-ad","name":"Slack Notification Ad","kind":"html-video","job":"scene","line":"A portrait lock screen fills with escalating Slack video requests before HeyGen delivers the payoff. Copies the look of Slack; that brand is theirs. Credited to HeyGen. Idea only: It is HeyGen's own advert.","path":"registry/blocks/slack-notification-ad","use":"","w":1080,"h":1920,"seconds":12,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","look_only":true},{"id":"hyperframes/block/snow","name":"Snow","kind":"html-video","job":"overlay","line":"Seek-safe falling-snow overlay: sparse or dense flakes drift down with size, speed and opacity correlated per flake for depth, radial-masked so the frame center stays clear.","path":"registry/blocks/snow","use":"Copy the folder into a project, or `npx hyperframes add snow` (fetches it from GitHub main to compositions/snow.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 2 settings to change.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":[],"line":"Declared variables: density, speed. 2 hex colors are written in the file's CSS.","read":false}},{"id":"hyperframes/block/spain-map","name":"Spain Map","kind":"html-video","job":"map","line":"Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection.","path":"registry/blocks/spain-map","use":"Copy the folder into a project, or `npx hyperframes add spain-map` (fetches it from GitHub main to compositions/spain-map.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":12,"needs":"D3. Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 9 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/spiral","name":"Spiral","kind":"html-video","job":"ground","line":"A bold black and white spiral turns in the frame. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/spiral","use":"Copy the folder into a project, or `npx hyperframes add spiral` (fetches it from GitHub main to compositions/spiral.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/spiral-galaxy","name":"Spiral Galaxy","kind":"three","job":"ground","line":"A spiral galaxy seen from outside, turning with real differential rotation: inner stars orbit faster than outer ones, so the arms wind up over the shot instead of spinning rigidly. The repo marks it experimental.","path":"registry/blocks/spiral-galaxy","use":"Copy the folder into a project, or `npx hyperframes add spiral-galaxy` (fetches it from GitHub main to compositions/spiral-galaxy.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 14 settings to change.","w":1920,"h":1080,"seconds":10,"needs":"Three.js. Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors"],"line":"Declared variables: stars, arms, rate, glow, size, core, rim. 4 hex colors are written in the file's CSS.","read":false}},{"id":"hyperframes/block/split-flap-board","name":"Split-Flap Board","kind":"html-video","job":"title","line":"Solari-style departure board: every cell walks its drum forward through the intervening characters of a fixed alphabet until it lands on its target, so the text resolves as a mechanical cascade instead of a fade.","path":"registry/blocks/split-flap-board","use":"Copy the folder into a project, or `npx hyperframes add split-flap-board` (fetches it from GitHub main to compositions/split-flap-board.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 5 settings to change.","w":1920,"h":1080,"seconds":3.5,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["text","numbers"],"line":"Declared variables: boardText, flapAlphabet, flipDuration, cellStagger, cellCount. 10 hex colors and 1 font stack are written in the file's CSS.","read":false}},{"id":"hyperframes/block/spotify-card","name":"Spotify Now Playing","kind":"html-video","job":"overlay","line":"Animated Spotify now-playing card with album art and progress bar. Copies the look of Spotify; that brand is theirs.","path":"registry/blocks/spotify-card","use":"Copy the folder into a project, or `npx hyperframes add spotify-card` (fetches it from GitHub main to compositions/spotify-card.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1080,"h":1920,"seconds":5,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 5 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/starfield","name":"Starfield","kind":"html-video","job":"overlay","line":"Seek-safe night-sky overlay: sparse or dense stars in three size tiers that twinkle and drift in two parallax layers, radial-masked to keep the frame center clear.","path":"registry/blocks/starfield","use":"Copy the folder into a project, or `npx hyperframes add starfield` (fetches it from GitHub main to compositions/starfield.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 3 settings to change.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":[],"line":"Declared variables: density, tone, speed. 6 hex colors are written in the file's CSS.","read":false}},{"id":"hyperframes/block/strands","name":"Strands","kind":"html-video","job":"ground","line":"Thin ribbons of pink and blue light weave across a black field. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/strands","use":"Copy the folder into a project, or `npx hyperframes add strands` (fetches it from GitHub main to compositions/strands.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/stripes","name":"Stripes","kind":"html-video","job":"ground","line":"Bold black and white diagonal stripes slide across the frame. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/stripes","use":"Copy the folder into a project, or `npx hyperframes add stripes` (fetches it from GitHub main to compositions/stripes.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/sun-burst","name":"Sun Burst","kind":"html-video","job":"ground","line":"Cream and black rays fan out from the center and slowly turn. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/sun-burst","use":"Copy the folder into a project, or `npx hyperframes add sun-burst` (fetches it from GitHub main to compositions/sun-burst.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/swirl","name":"Swirl","kind":"html-video","job":"ground","line":"Orange and blue color fields swirl and flow into each other across the whole frame. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/swirl","use":"Copy the folder into a project, or `npx hyperframes add swirl` (fetches it from GitHub main to compositions/swirl.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/swirl-vortex","name":"Swirl Vortex","kind":"html-video","job":"transition","line":"Demo card for the swirl-vortex shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is not a drop-in; use the shader through the shader-transitions package or lift its GLSL.","path":"registry/blocks/swirl-vortex","use":"Copy the folder into a project, or `npx hyperframes add swirl-vortex` (fetches it from GitHub main to compositions/swirl-vortex.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":4,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 3 hex colors and 4 font stacks are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/thermal-distortion","name":"Thermal Distortion","kind":"html-video","job":"transition","line":"Demo card for the thermal-distortion shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is not a drop-in; use the shader through the shader-transitions package or lift its GLSL.","path":"registry/blocks/thermal-distortion","use":"Copy the folder into a project, or `npx hyperframes add thermal-distortion` (fetches it from GitHub main to compositions/thermal-distortion.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":4,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 3 hex colors and 4 font stacks are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/thin-film","name":"Thin Film","kind":"html-video","job":"effect","line":"An orb's rim shimmers with soap-bubble iridescence on black. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/thin-film","use":"Copy the folder into a project, or `npx hyperframes add thin-film` (fetches it from GitHub main to compositions/thin-film.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/thread-message-stack","name":"Thread Message Stack","kind":"html-video","job":"scene","line":"A source-owned editable conversation stack with arbitrary incoming and outgoing messages.","path":"registry/blocks/thread-message-stack","use":"Copy the folder into a project, or `npx hyperframes add thread-message-stack` (fetches it from GitHub main to compositions/thread-message-stack.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":8,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors"],"line":"No declared variables. Its colors are custom properties declared in one block in the file (--tms-in-fill, --tms-in-ink, --tms-out-fill, --tms-out-ink). The words are in the HTML.","read":false}},{"id":"hyperframes/block/tiktok-follow","name":"TikTok Follow","kind":"html-video","job":"overlay","line":"Animated TikTok follow overlay with profile card and follow button. Copies the look of TikTok; that brand is theirs.","path":"registry/blocks/tiktok-follow","use":"Copy the folder into a project, or `npx hyperframes add tiktok-follow` (fetches it from GitHub main to compositions/tiktok-follow.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1080,"h":1920,"seconds":4.5,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text","pictures"],"line":"No declared variables. 8 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/transitions-3d","name":"3D Transitions","kind":"html-video","job":"transition","line":"Showcase of 3D perspective flip and rotate transitions. A reel of several transitions, not one drop-in: lift the one you want.","path":"registry/blocks/transitions-3d","use":"Copy the folder into a project, or `npx hyperframes add transitions-3d` (fetches it from GitHub main to compositions/transitions-3d.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":11,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 6 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/transitions-blur","name":"Blur Transitions","kind":"html-video","job":"transition","line":"Showcase of blur-based transitions between scenes. A reel of several transitions, not one drop-in: lift the one you want.","path":"registry/blocks/transitions-blur","use":"Copy the folder into a project, or `npx hyperframes add transitions-blur` (fetches it from GitHub main to compositions/transitions-blur.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":20,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 6 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/transitions-cover","name":"Cover Transitions","kind":"html-video","job":"transition","line":"Showcase of cover/uncover slide transitions. A reel of several transitions, not one drop-in: lift the one you want.","path":"registry/blocks/transitions-cover","use":"Copy the folder into a project, or `npx hyperframes add transitions-cover` (fetches it from GitHub main to compositions/transitions-cover.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":21,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 10 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/transitions-destruction","name":"Destruction Transitions","kind":"html-video","job":"transition","line":"Showcase of destructive break-apart transitions. A reel of several transitions, not one drop-in: lift the one you want.","path":"registry/blocks/transitions-destruction","use":"Copy the folder into a project, or `npx hyperframes add transitions-destruction` (fetches it from GitHub main to compositions/transitions-destruction.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":14,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 6 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/transitions-dissolve","name":"Dissolve Transitions","kind":"html-video","job":"transition","line":"Showcase of dissolve and fade transitions. A reel of several transitions, not one drop-in: lift the one you want.","path":"registry/blocks/transitions-dissolve","use":"Copy the folder into a project, or `npx hyperframes add transitions-dissolve` (fetches it from GitHub main to compositions/transitions-dissolve.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":24,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 6 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/transitions-distortion","name":"Distortion Transitions","kind":"html-video","job":"transition","line":"Showcase of warp and distortion transitions. A reel of several transitions, not one drop-in: lift the one you want.","path":"registry/blocks/transitions-distortion","use":"Copy the folder into a project, or `npx hyperframes add transitions-distortion` (fetches it from GitHub main to compositions/transitions-distortion.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":21,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 5 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/transitions-grid","name":"Grid Transitions","kind":"html-video","job":"transition","line":"Showcase of grid-based tile transitions. A reel of several transitions, not one drop-in: lift the one you want.","path":"registry/blocks/transitions-grid","use":"Copy the folder into a project, or `npx hyperframes add transitions-grid` (fetches it from GitHub main to compositions/transitions-grid.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":11,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 10 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/transitions-light","name":"Light Transitions","kind":"html-video","job":"transition","line":"Showcase of light-based glow and flash transitions. A reel of several transitions, not one drop-in: lift the one you want.","path":"registry/blocks/transitions-light","use":"Copy the folder into a project, or `npx hyperframes add transitions-light` (fetches it from GitHub main to compositions/transitions-light.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":21,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 5 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/transitions-mechanical","name":"Mechanical Transitions","kind":"html-video","job":"transition","line":"Showcase of mechanical shutter and iris transitions. A reel of several transitions, not one drop-in: lift the one you want.","path":"registry/blocks/transitions-mechanical","use":"Copy the folder into a project, or `npx hyperframes add transitions-mechanical` (fetches it from GitHub main to compositions/transitions-mechanical.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":15,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 7 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/transitions-other","name":"Other Transitions","kind":"html-video","job":"transition","line":"Showcase of miscellaneous creative transitions. A reel of several transitions, not one drop-in: lift the one you want.","path":"registry/blocks/transitions-other","use":"Copy the folder into a project, or `npx hyperframes add transitions-other` (fetches it from GitHub main to compositions/transitions-other.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":20,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 6 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/transitions-push","name":"Push Transitions","kind":"html-video","job":"transition","line":"Showcase of push and slide transitions. A reel of several transitions, not one drop-in: lift the one you want.","path":"registry/blocks/transitions-push","use":"Copy the folder into a project, or `npx hyperframes add transitions-push` (fetches it from GitHub main to compositions/transitions-push.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":24,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 6 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/transitions-radial","name":"Radial Transitions","kind":"html-video","job":"transition","line":"Showcase of radial wipe and reveal transitions. A reel of several transitions, not one drop-in: lift the one you want.","path":"registry/blocks/transitions-radial","use":"Copy the folder into a project, or `npx hyperframes add transitions-radial` (fetches it from GitHub main to compositions/transitions-radial.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":20,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 6 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/transitions-scale","name":"Scale Transitions","kind":"html-video","job":"transition","line":"Showcase of scale and zoom transitions. A reel of several transitions, not one drop-in: lift the one you want.","path":"registry/blocks/transitions-scale","use":"Copy the folder into a project, or `npx hyperframes add transitions-scale` (fetches it from GitHub main to compositions/transitions-scale.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":15,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 6 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/ui-3d-reveal","name":"3D UI Reveal","kind":"html-video","job":"move","line":"Perspective 3D reveal animation for UI elements.","path":"registry/blocks/ui-3d-reveal","use":"Copy the folder into a project, or `npx hyperframes add ui-3d-reveal` (fetches it from GitHub main to compositions/ui-3d-reveal.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":13,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text","pictures"],"line":"No declared variables. 57 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/us-map","name":"US Map","kind":"html-video","job":"map","line":"Animated US choropleth map with staggered state reveals, value labels, and gradient legend — pure inline SVG with GSAP.","path":"registry/blocks/us-map","use":"Copy the folder into a project, or `npx hyperframes add us-map` (fetches it from GitHub main to compositions/us-map.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":12,"needs":"D3. Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 10 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/us-map-bubble","name":"US Bubble Map","kind":"html-video","job":"map","line":"Animated US bubble map with proportional city markers, value callouts, and connection lines — composable with us-map.","path":"registry/blocks/us-map-bubble","use":"Copy the folder into a project, or `npx hyperframes add us-map-bubble` (fetches it from GitHub main to compositions/us-map-bubble.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":12,"needs":"D3. Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 8 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/us-map-flow","name":"US Flow Map","kind":"html-video","job":"map","line":"Animated connection arcs between US cities over a base map — composable origin-destination flow visualization.","path":"registry/blocks/us-map-flow","use":"Copy the folder into a project, or `npx hyperframes add us-map-flow` (fetches it from GitHub main to compositions/us-map-flow.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":12,"needs":"D3. Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 10 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/us-map-hex","name":"US Hex Grid Map","kind":"html-video","job":"map","line":"Animated hexagonal tile grid map — each state as an equal-weight hex with data fill and abbreviation label.","path":"registry/blocks/us-map-hex","use":"Copy the folder into a project, or `npx hyperframes add us-map-hex` (fetches it from GitHub main to compositions/us-map-hex.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":10,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 8 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/vfx-anamorphic-flare","name":"Anamorphic Streak Flare","kind":"html-video","job":"ground","line":"A drifting field of bright points, each one throwing the long horizontal blue-violet streak a real anamorphic cinema lens produces. The repo marks it experimental.","path":"registry/blocks/vfx-anamorphic-flare","use":"Copy the folder into a project, or `npx hyperframes add vfx-anamorphic-flare` (fetches it from GitHub main to compositions/vfx-anamorphic-flare.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 16 settings to change.","w":1920,"h":1080,"seconds":10,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors"],"line":"Declared variables: intensity, threshold, streakLength, tint, bloomRadius, timeScale, emitters, backdrop. 3 hex colors are written in the file's CSS.","read":false}},{"id":"hyperframes/block/vfx-iphone-device","name":"iPhone & MacBook 3D Showcase","kind":"three","job":"3d","line":"Real GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-in-Canvas screen content, morphing glass lens, product review camera choreography, and 360° turntable. The repo marks it experimental. Copies the look of Apple devices; that brand is theirs. The repo does not say where its device models came from.","path":"registry/blocks/vfx-iphone-device","use":"Copy the folder into a project, or `npx hyperframes add vfx-iphone-device` (fetches it from GitHub main to compositions/vfx-iphone-device.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":15,"needs":"Three.js. Loads its libraries from the network when it renders (cdn.jsdelivr.net, www.gstatic.com; 4 MB folder; bundled 3D model (.glb)).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 24 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/vfx-liquid-background","name":"Liquid Background","kind":"three","job":"ground","line":"Organic liquid simulation with vertex displacement on a subdivided plane. HTML content floats above rippling fluid surface with real-time wave dynamics. The repo marks it experimental.","path":"registry/blocks/vfx-liquid-background","use":"Copy the folder into a project, or `npx hyperframes add vfx-liquid-background` (fetches it from GitHub main to compositions/vfx-liquid-background.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 2 settings to change.","w":1920,"h":1080,"seconds":12,"needs":"Three.js. Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 26 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/vfx-liquid-glass","name":"Liquid Glass","kind":"three","job":"effect","line":"A sample landing page (headline and stat cards) seen through a liquid-glass parallax layer, drawn with HTML-in-canvas and WebGL. The repo marks it experimental.","path":"registry/blocks/vfx-liquid-glass","use":"Copy the folder into a project, or `npx hyperframes add vfx-liquid-glass` (fetches it from GitHub main to compositions/vfx-liquid-glass.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 2 settings to change.","w":1920,"h":1080,"seconds":20,"needs":"Three.js. Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 11 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/vfx-magnetic","name":"Magnetic","kind":"html-video","job":"effect","line":"A sample page whose pixels bend toward a moving cursor dot: a magnetic warp shader over HTML-in-canvas. The repo marks it experimental.","path":"registry/blocks/vfx-magnetic","use":"Copy the folder into a project, or `npx hyperframes add vfx-magnetic` (fetches it from GitHub main to compositions/vfx-magnetic.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 2 settings to change.","w":1920,"h":1080,"seconds":15,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 6 hex colors and 2 font stacks are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/vfx-portal","name":"Portal","kind":"three","job":"effect","line":"A sample light-mode page opens through a portal into a second page: an HTML-in-canvas WebGL transition. The repo marks it experimental.","path":"registry/blocks/vfx-portal","use":"Copy the folder into a project, or `npx hyperframes add vfx-portal` (fetches it from GitHub main to compositions/vfx-portal.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 2 settings to change.","w":1920,"h":1080,"seconds":10,"needs":"Three.js. Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 18 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/vfx-shatter","name":"Shatter","kind":"three","job":"effect","line":"A sample page breaks like glass to show the page behind it: HTML-in-canvas panels shattered in WebGL. The repo marks it experimental.","path":"registry/blocks/vfx-shatter","use":"Copy the folder into a project, or `npx hyperframes add vfx-shatter` (fetches it from GitHub main to compositions/vfx-shatter.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":12,"needs":"Three.js. Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 19 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/vfx-text-cursor","name":"VFX Text Cursor","kind":"html-video","job":"title","line":"Dramatic text reveal with cursor glow, chromatic shadow rays, and directional lighting on a black stage. Canvas-based shader post-processing with spectral color edges. The repo marks it experimental.","path":"registry/blocks/vfx-text-cursor","use":"Copy the folder into a project, or `npx hyperframes add vfx-text-cursor` (fetches it from GitHub main to compositions/vfx-text-cursor.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":8,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 7 hex colors and 2 font stacks are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/voronoi","name":"Voronoi","kind":"html-video","job":"ground","line":"Magenta cells with glowing blue centers shift and reshape across the frame. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/voronoi","use":"Copy the folder into a project, or `npx hyperframes add voronoi` (fetches it from GitHub main to compositions/voronoi.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/vpn-youtube-spot","name":"VPN YouTube Spot","kind":"html-video","job":"scene","line":"Snappy Apple-style YouTube insert showing a phone finding and installing a friendly VPN app with sound effects. Credited to Stronkter.","path":"registry/blocks/vpn-youtube-spot","use":"Copy the folder into a project, or `npx hyperframes add vpn-youtube-spot` (fetches it from GitHub main to compositions/vpn-youtube-spot.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":7,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net; bundled sound file).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 18 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/water","name":"Water","kind":"html-video","job":"effect","line":"A sphere of wind-rippled water reflecting a blue sky, on black. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/water","use":"Copy the folder into a project, or `npx hyperframes add water` (fetches it from GitHub main to compositions/water.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/waveform","name":"Waveform","kind":"html-video","job":"effect","line":"Equalizer bars in a blue to pink gradient pulse across the middle of the frame, like an audio visualizer. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/waveform","use":"Copy the folder into a project, or `npx hyperframes add waveform` (fetches it from GitHub main to compositions/waveform.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/week-in-merges","name":"Week in Merges","kind":"html-video","job":"chart","line":"Each author's avatar bounces across their row at a speed set by how many pull requests they merged.","path":"registry/blocks/week-in-merges","use":"Copy the folder into a project, or `npx hyperframes add week-in-merges` (fetches it from GitHub main to compositions/week-in-merges.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 18 settings to change.","w":1080,"h":1350,"seconds":16,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["text"],"line":"Declared variables: eyebrow, title, period, total, footer, source, rows, rows_max and 1 more. 2 hex colors and 1 font stack are written in the file's CSS.","read":false}},{"id":"hyperframes/block/weight-wave","name":"Weight Wave","kind":"html-video","job":"title","line":"A crest of thickness travels along a headline: each character swells from light to black and leans forward as the wave passes, driven by the wght and slnt variable-font axes rather than by transforms. Item license: OFL-1.1.","path":"registry/blocks/weight-wave","use":"Copy the folder into a project, or `npx hyperframes add weight-wave` (fetches it from GitHub main to compositions/weight-wave.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition. 9 settings to change.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","text"],"line":"Declared variables: text, color, background, weightFrom, weightTo, crestWidth, sweepSpeed, slant and 1 more. 3 hex colors and 2 font stacks are written in the file's CSS. It also reads its own custom properties with fallbacks (--background, --color); set them on a wrapping element to re-skin it…","read":false}},{"id":"hyperframes/block/whip-pan","name":"Whip Pan","kind":"html-video","job":"transition","line":"Demo card for the whip-pan shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is not a drop-in; use the shader through the shader-transitions package or lift its GLSL.","path":"registry/blocks/whip-pan","use":"Copy the folder into a project, or `npx hyperframes add whip-pan` (fetches it from GitHub main to compositions/whip-pan.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":4,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","preview":{"video":"assets/asset-library/hyperframes-whip-pan.mp4","poster":"assets/asset-library/hyperframes-whip-pan-poster.jpg","w":1280,"h":720,"seconds":4},"takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 3 hex colors and 4 font stacks are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/wireframe-portal-title","name":"Wireframe Portal Title","kind":"three","job":"title","line":"A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase.","path":"registry/blocks/wireframe-portal-title","use":"Copy the folder into a project, or `npx hyperframes add wireframe-portal-title` (fetches it from GitHub main to compositions/wireframe-portal-title.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":8,"needs":"Three.js. Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 12 hex colors and 2 font stacks are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/world-map","name":"World Map","kind":"html-video","job":"map","line":"Animated world choropleth with country-by-country reveal, tooltip labels, and rotating globe inset — D3 Natural Earth projection.","path":"registry/blocks/world-map","use":"Copy the folder into a project, or `npx hyperframes add world-map` (fetches it from GitHub main to compositions/world-map.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":14,"needs":"D3. Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 10 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/worley-noise","name":"Worley Noise","kind":"html-video","job":"ground","line":"A field of drifting cells, light at their centers and dark at their edges. A WebGPU shader from the Shaders library (shaders.com, MIT).","path":"registry/blocks/worley-noise","use":"Copy the folder into a project, or `npx hyperframes add worley-noise` (fetches it from GitHub main to compositions/worley-noise.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":2,"needs":"WebGPU: a GPU, or PRODUCER_ALLOW_SOFTWARE_WEBGPU=true (slow)","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/block/x-post","name":"X Post Card","kind":"html-video","job":"overlay","line":"Animated X/Twitter post card overlay with engagement metrics. Copies the look of X; that brand is theirs.","path":"registry/blocks/x-post","use":"Copy the folder into a project, or `npx hyperframes add x-post` (fetches it from GitHub main to compositions/x-post.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":5,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 8 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/yt-comment-card","name":"Comment Cards","kind":"html-video","job":"overlay","line":"Social comments typing on over footage: avatar pop, username and time, per-character typewriter, likes row; image avatars or initials chips.","path":"registry/blocks/yt-comment-card","use":"Copy the folder into a project, or `npx hyperframes add yt-comment-card` (fetches it from GitHub main to compositions/yt-comment-card.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":8,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors","type"],"line":"No declared variables. Its colors are custom properties declared in one block in the file (--yt-font, --yt-ink, --yt-ink-dim, --yt-red, --yt-scanline-alpha, 8 in all).","read":false}},{"id":"hyperframes/block/yt-lcd-background","name":"Scanline Board Background","kind":"html-video","job":"ground","line":"Textured paper board: scanlines with slow drift, optional pixel grid, static grain, and display text with a blur-focus entrance and chromatic-fringe title.","path":"registry/blocks/yt-lcd-background","use":"Copy the folder into a project, or `npx hyperframes add yt-lcd-background` (fetches it from GitHub main to compositions/yt-lcd-background.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":10,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors","type"],"line":"No declared variables. Its colors are custom properties declared in one block in the file (--yt-font, --yt-ink, --yt-ink-dark, --yt-paper, --yt-paper-dark, 7 in all).","read":false}},{"id":"hyperframes/block/yt-logo-intro","name":"Logo Intro Sequence","kind":"html-video","job":"logo","line":"Logo stamp pops on a lined board, a kicker line gives way to the title with an accent arrow chip; seeded line distortion.","path":"registry/blocks/yt-logo-intro","use":"Copy the folder into a project, or `npx hyperframes add yt-logo-intro` (fetches it from GitHub main to compositions/yt-logo-intro.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","preview":{"video":"assets/asset-library/hyperframes-yt-logo-intro.mp4","poster":"assets/asset-library/hyperframes-yt-logo-intro-poster.jpg","w":1280,"h":720,"seconds":6},"takes":{"how":"tokens","what":["colors","type"],"line":"No declared variables. Its colors are custom properties declared in one block in the file (--yt-font, --yt-ink, --yt-ink-dark, --yt-line-alpha, --yt-paper, 7 in all).","read":true}},{"id":"hyperframes/block/yt-lower-third","name":"YouTube Lower Third","kind":"html-video","job":"lower third","line":"Animated YouTube subscribe lower third with avatar and channel info. Copies the look of YouTube; that brand is theirs.","path":"registry/blocks/yt-lower-third","use":"Copy the folder into a project, or `npx hyperframes add yt-lower-third` (fetches it from GitHub main to compositions/yt-lower-third.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":4.5,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","preview":{"video":"assets/asset-library/hyperframes-yt-lower-third.mp4","poster":"assets/asset-library/hyperframes-yt-lower-third-poster.jpg","w":1280,"h":720,"seconds":4.5},"takes":{"how":"edit the file","what":["colors","type","text","pictures"],"line":"No declared variables. 4 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/block/yt-prism-title","name":"Chromatic Fringe Title","kind":"html-video","job":"title","line":"Display title on a transparent root: blur-focus entrance, red/blue fringe that settles then breathes, perspective bow, slow scale drift.","path":"registry/blocks/yt-prism-title","use":"Copy the folder into a project, or `npx hyperframes add yt-prism-title` (fetches it from GitHub main to compositions/yt-prism-title.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":6,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 4 hex colors are written in the file's CSS.","read":false}},{"id":"hyperframes/block/yt-vertical-fill","name":"Vertical Media Filler","kind":"html-video","job":"frame","line":"Portrait media filling a widescreen frame via blurred-scale, mirror, or copy side fills; grid texture and foreground contrast lift (images inside the block; keep live footage in the host).","path":"registry/blocks/yt-vertical-fill","use":"Copy the folder into a project, or `npx hyperframes add yt-vertical-fill` (fetches it from GitHub main to compositions/yt-vertical-fill.html). It is a whole page with its own timeline: render it alone, or mount it in a film as a sub-composition.","w":1920,"h":1080,"seconds":8,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 4 hex colors are written in the file's CSS.","read":false}},{"id":"hyperframes/component/agent-cursor","name":"Agent Cursor","kind":"html-video","job":"cursor","line":"An AI agent operating a UI: a cursor with an accent name label that types out each step, clicks each target with a small ring, and ends on a check.","path":"registry/components/agent-cursor","use":"Copy it, or `npx hyperframes add agent-cursor`, to compositions/components/agent-cursor.html and mount it as a sub-composition; it brings its own timeline. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: agent_name, steps, targets, accent. Type come from theme custom properties with fallbacks (--font-body), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/animated-bar-chart","name":"Animated Bar Chart","kind":"html-video","job":"chart","line":"A compact data card with deterministic bar growth and value callouts. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/animated-bar-chart","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors"],"line":"No declared variables. It reads --accent from the theme; its other colors are custom properties declared in one block in the file (--hf-accent, --hf-hair, --hf-ink, --hf-muted, --hf-surface). The words are in the HTML.","read":true}},{"id":"hyperframes/component/arc-motion-path","name":"Arc Motion Path","kind":"html-video","job":"callout","line":"A GSAP MotionPath primitive that flies a callout along a curved arc with autorotation. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/arc-motion-path","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors","type"],"line":"No declared variables. Colors and type come from theme custom properties with fallbacks (--accent, --bg, --fg, --font-body, --radius, --space-1, 8 in all), so a :root block or one of the three themes re-skins it. The words are in the HTML.","read":false}},{"id":"hyperframes/component/ascii-render-pass","name":"ASCII Render Pass","kind":"html-video","job":"effect","line":"A slotted scene renders as live ASCII: a canvas samples the source's luminance grid (rasterized once at mount) and draws glyphs from a density ramp charset.","path":"registry/components/ascii-render-pass","use":"Copy it, or `npx hyperframes add ascii-render-pass`, to compositions/components/ascii-render-pass.html and mount it as a sub-composition; it brings its own timeline. 5 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: charset, grid, resolve_at, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --brand, --fg, --font-mono, 7 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/ascii-trail-reveal","name":"ASCII Trail Reveal","kind":"html-video","job":"effect","line":"An authored S-curve sweeps through a deterministic ASCII grid, flipping cells away to reveal a labeled panel.","path":"registry/components/ascii-trail-reveal","use":"Copy it, or `npx hyperframes add ascii-trail-reveal`, to compositions/components/ascii-trail-reveal.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: label, accent, trail_width. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --brand, --fg, --font-body, --font-display, 7 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/aurora-drift","name":"Aurora Drift","kind":"html-video","job":"ground","line":"Three soft accent-derived aurora fields drift in an exact ambient loop over a deep base and faint vignette.","path":"registry/components/aurora-drift","use":"Copy it, or `npx hyperframes add aurora-drift`, to compositions/components/aurora-drift.html and mount it as a sub-composition; it brings its own timeline. 2 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors"],"line":"Declared variables: accent, mood. Colors come from theme custom properties with fallbacks (--accent, --accent-2, --brand), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/avatar-cloud","name":"Avatar Cloud","kind":"html-video","job":"scene","line":"Lettermark avatars populate a loose elliptical cloud while fine SVG links draw between the community and its central proof label.","path":"registry/components/avatar-cloud","use":"Copy it, or `npx hyperframes add avatar-cloud`, to compositions/components/avatar-cloud.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text","numbers"],"line":"Declared variables: avatarCount, showLinks, label. Colors and type come from theme custom properties with fallbacks (--bg, --border, --fg, --font-body, --font-display, --muted, 10 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/avatar-group-hover","name":"Avatar Group Hover","kind":"html-video","job":"move","line":"A distance-falloff avatar group lift with bouncy hover return. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/avatar-group-hover","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":[],"line":"Declared variables: size, overlap, accent. 5 hex colors and 1 font stack are written in the file's CSS.","read":false}},{"id":"hyperframes/component/badge-pop","name":"Badge Pop","kind":"html-video","job":"move","line":"A transitions.dev-inspired notification badge pop with elastic scale and count reveal. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/badge-pop","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","text"],"line":"Declared variables: count, accent, surface. Colors come from theme custom properties with fallbacks (--accent, --accent-2, --brand), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/beat-accent","name":"Beat Accent","kind":"html-video","job":"effect","line":"A single music-hit sting: impact flash, micro scale-pulse on the subject, immediate decay.","path":"registry/components/beat-accent","use":"Copy it, or `npx hyperframes add beat-accent`, to compositions/components/beat-accent.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: text, flashColor, intensity. Colors and type come from theme custom properties with fallbacks (--accent, --bg, --fg, --font-body, --font-display), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/beat-pulse-background","name":"Beat Pulse Background","kind":"html-video","job":"ground","line":"An accent-derived backdrop pulses its glow intensity and saturation on a deterministic, supplied beat grid.","path":"registry/components/beat-pulse-background","use":"Copy it, or `npx hyperframes add beat-pulse-background`, to compositions/components/beat-pulse-background.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","text"],"line":"Declared variables: beats, accent, intensity. Colors come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --brand), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/beat-timeline","name":"Beat Timeline","kind":"html-video","job":"layout","line":"A paused master-timeline orchestration spine that pins titled beat rows to evenly spaced named labels. Each row enters on its label, holds with the sequence, then exits with the group.","path":"registry/components/beat-timeline","use":"Copy it, or `npx hyperframes add beat-timeline`, to compositions/components/beat-timeline.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text","numbers"],"line":"Declared variables: beatCount, interval, labels. Colors and type come from theme custom properties with fallbacks (--bg, --border, --brand, --fg, --font-body, --font-display, 9 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/before-after-wipe","name":"Before After Wipe","kind":"html-video","job":"compare","line":"Two full-bleed content slots compare before and after states as a persistent divider wipes the after layer over the before layer and rests at a configurable split. Callers fill the named before/after slot panels.","path":"registry/components/before-after-wipe","use":"Copy it, or `npx hyperframes add before-after-wipe`, to compositions/components/before-after-wipe.html and mount it as a sub-composition; it brings its own timeline. 6 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: label_a, label_b, rest_split, wipe_at, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 14 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/blur-in","name":"Blur In","kind":"html-video","job":"title","line":"An Operator Black word-level content reveal that resolves its own text from controlled blur. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/blur-in","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type"],"line":"Declared variables: size, tone, align. Carries its own set of 40 UI custom properties (--_hf-ui-*) declared in the file. It also reads its own custom properties with fallbacks (--hf-ui-accent, --hf-ui-border, --hf-ui-border-strong, --hf-ui-control-border, --hf-ui-control-border-hover, 18 in all);…","read":false}},{"id":"hyperframes/component/blur-out-up","name":"Blur Out Up","kind":"html-video","job":"title","line":"Words arrive clean and depart upward with increasing blur for airy exits. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/blur-out-up","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors"],"line":"Declared variables: direction, distance, blur, tone. Colors come from theme custom properties with fallbacks (--brand), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/bottom-up-letters","name":"Bottom Up Letters","kind":"html-video","job":"title","line":"Splits text into letters and reveals each glyph from below with deterministic staggered timing. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/bottom-up-letters","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":[],"line":"Declared variables: unit, direction, travel.","read":false}},{"id":"hyperframes/component/browser-device-stage","name":"Browser Device Stage","kind":"html-video","job":"frame","line":"A generic app surface in token-native device chrome (browser, window, or phone). The screen is a slot for caller img/video/HTML with a token-styled skeleton default.","path":"registry/components/browser-device-stage","use":"Copy it, or `npx hyperframes add browser-device-stage`, to compositions/components/browser-device-stage.html and mount it as a sub-composition; it brings its own timeline. 5 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text","numbers"],"line":"Declared variables: chrome, title, swap_at, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 14 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/camera-rig-depth-stack","name":"Camera Rig Depth Stack","kind":"html-video","job":"camera","line":"A 3D camera-rig-style card stack with depth, parallax, and focus shift. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/camera-rig-depth-stack","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 4 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/component/camera-scan-gate","name":"Camera Scan Gate","kind":"html-video","job":"scene","line":"A camera and QR recognition moment with a viewfinder sweep, bracket lock, confirmation pulse, and verified next beat.","path":"registry/components/camera-scan-gate","use":"Copy it, or `npx hyperframes add camera-scan-gate`, to compositions/components/camera-scan-gate.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: scanColor, targetLabel, sweepSpeed. Colors and type come from theme custom properties with fallbacks (--bg, --border, --brand, --fg, --font-body, --font-display, 10 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/camera-shake","name":"Camera Shake","kind":"html-video","job":"camera","line":"Procedural handheld, telephoto and rig camera shake for any wrapper: nine measured profiles with per-lens projection, closed-form and seek-safe.","path":"registry/components/camera-shake","use":"Copy it, or `npx hyperframes add camera-shake`, to compositions/components/camera-shake.html and mount it as a sub-composition; it brings its own timeline. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":[],"line":"Declared variables: shakeProfile, shakeIntensity, shakeFrequency, shakeRotation. 16 hex colors and 2 font stacks are written in the file's CSS.","read":false}},{"id":"hyperframes/component/caption-blend-difference","name":"Blend Difference","kind":"html-video","job":"caption","line":"Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/caption-blend-difference","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["pictures"],"line":"No declared variables and no colors or fonts of its own found; what it shows is set by the markup and script in the file.","read":false}},{"id":"hyperframes/component/caption-camera-follow","name":"Camera Follow Captions","kind":"html-video","job":"caption","line":"One sentence written across a world far larger than the frame. Each word is sized against everything already written, so the block grows geometrically and the camera pulls back at a steady rate to keep landing the new word at the…","path":"registry/components/caption-camera-follow","use":"Copy it, or `npx hyperframes add caption-camera-follow`, to compositions/components/caption-camera-follow.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":[],"line":"Declared variables: accent, framing, smear. 5 hex colors and 2 font stacks are written in the file's CSS.","read":false}},{"id":"hyperframes/component/caption-clip-wipe","name":"Clip Wipe","kind":"html-video","job":"caption","line":"Left-to-right clip-path wipe reveal per word.","path":"registry/components/caption-clip-wipe","use":"Copy it, or `npx hyperframes add caption-clip-wipe`, to compositions/components/caption-clip-wipe.html and mount it as a sub-composition; it brings its own timeline.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 2 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/component/caption-editorial-emphasis","name":"Editorial Emphasis","kind":"html-video","job":"caption","line":"Dual-font system with dramatic size contrast for emphasis words.","path":"registry/components/caption-editorial-emphasis","use":"Copy it, or `npx hyperframes add caption-editorial-emphasis`, to compositions/components/caption-editorial-emphasis.html and mount it as a sub-composition; it brings its own timeline.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 1 hex color and 2 font stacks are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/component/caption-emoji-pop","name":"Emoji Pop","kind":"html-video","job":"caption","line":"Emoji integration with stroked text and horizontal squeeze entrance.","path":"registry/components/caption-emoji-pop","use":"Copy it, or `npx hyperframes add caption-emoji-pop`, to compositions/components/caption-emoji-pop.html and mount it as a sub-composition; it brings its own timeline.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 5 hex colors and 2 font stacks are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/component/caption-glitch-rgb","name":"Glitch RGB","kind":"html-video","job":"caption","line":"RGB chromatic aberration with CRT scanline overlay.","path":"registry/components/caption-glitch-rgb","use":"Copy it, or `npx hyperframes add caption-glitch-rgb`, to compositions/components/caption-glitch-rgb.html and mount it as a sub-composition; it brings its own timeline.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 3 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/component/caption-gradient-fill","name":"Gradient Fill","kind":"html-video","job":"caption","line":"Gradient-clipped text with elastic bounce entrance.","path":"registry/components/caption-gradient-fill","use":"Copy it, or `npx hyperframes add caption-gradient-fill`, to compositions/components/caption-gradient-fill.html and mount it as a sub-composition; it brings its own timeline.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 5 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/component/caption-highlight","name":"Highlight","kind":"html-video","job":"caption","line":"Red background sweep behind each active word, TikTok-style.","path":"registry/components/caption-highlight","use":"Copy it, or `npx hyperframes add caption-highlight`, to compositions/components/caption-highlight.html and mount it as a sub-composition; it brings its own timeline.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 3 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/component/caption-kinetic-slam","name":"Kinetic Slam","kind":"html-video","job":"caption","line":"Full-screen single-word display with alternating entrance directions.","path":"registry/components/caption-kinetic-slam","use":"Copy it, or `npx hyperframes add caption-kinetic-slam`, to compositions/components/caption-kinetic-slam.html and mount it as a sub-composition; it brings its own timeline.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 2 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/component/caption-matrix-decode","name":"Matrix Decode","kind":"html-video","job":"caption","line":"Character scramble animation before text reveal.","path":"registry/components/caption-matrix-decode","use":"Copy it, or `npx hyperframes add caption-matrix-decode`, to compositions/components/caption-matrix-decode.html and mount it as a sub-composition; it brings its own timeline.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 1 hex color and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/component/caption-neon-accent","name":"Neon Accent","kind":"html-video","job":"caption","line":"Multi-color neon glow accents with wiggle drift animation.","path":"registry/components/caption-neon-accent","use":"Copy it, or `npx hyperframes add caption-neon-accent`, to compositions/components/caption-neon-accent.html and mount it as a sub-composition; it brings its own timeline.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 4 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/component/caption-neon-glow","name":"Neon Glow","kind":"html-video","job":"caption","line":"Cyan and magenta neon glow with keyword accent colors.","path":"registry/components/caption-neon-glow","use":"Copy it, or `npx hyperframes add caption-neon-glow`, to compositions/components/caption-neon-glow.html and mount it as a sub-composition; it brings its own timeline.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 2 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/component/caption-parallax-layers","name":"Parallax Layers","kind":"html-video","job":"caption","line":"Behind-subject 3D text layering with vertical stretch effect.","path":"registry/components/caption-parallax-layers","use":"Copy it, or `npx hyperframes add caption-parallax-layers`, to compositions/components/caption-parallax-layers.html and mount it as a sub-composition; it brings its own timeline.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 3 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/component/caption-particle-burst","name":"Particle Burst","kind":"html-video","job":"caption","line":"Keyword words trigger colored particle explosions.","path":"registry/components/caption-particle-burst","use":"Copy it, or `npx hyperframes add caption-particle-burst`, to compositions/components/caption-particle-burst.html and mount it as a sub-composition; it brings its own timeline.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 8 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/component/caption-pill-karaoke","name":"Pill Karaoke","kind":"html-video","job":"caption","line":"Pill-shaped container with per-word karaoke color highlight.","path":"registry/components/caption-pill-karaoke","use":"Copy it, or `npx hyperframes add caption-pill-karaoke`, to compositions/components/caption-pill-karaoke.html and mount it as a sub-composition; it brings its own timeline.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 3 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/component/caption-texture","name":"Texture","kind":"html-video","job":"caption","line":"Flowing texture mask over large uppercase text — ships with 6 textures (lava, marble, metal, wood, concrete, rock), configurable via the texture variable.","path":"registry/components/caption-texture","use":"Copy it, or `npx hyperframes add caption-texture`, to compositions/components/caption-texture.html and mount it as a sub-composition; it brings its own timeline. 1 setting to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"props","what":["text"],"line":"Declared variables: texture. 3 hex colors and 1 font stack are written in the file's CSS.","read":false}},{"id":"hyperframes/component/caption-weight-shift","name":"Weight Shift","kind":"html-video","job":"caption","line":"Elegant font-weight transition between caption lines.","path":"registry/components/caption-weight-shift","use":"Copy it, or `npx hyperframes add caption-weight-shift`, to compositions/components/caption-weight-shift.html and mount it as a sub-composition; it brings its own timeline.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 1 hex color and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/component/card-resize","name":"Card Resize","kind":"html-video","job":"move","line":"A transitions.dev-inspired card resize primitive that expands a compact card into a detail panel. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/card-resize","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors"],"line":"Declared variables: surface, accent, elevation. Its colors are custom properties declared in one block in the file (--hf-card-h, --hf-card-hair, --hf-card-l2, --hf-card-l3, --hf-card-w).","read":false}},{"id":"hyperframes/component/caret-swap","name":"Caret Swap","kind":"html-video","job":"title","line":"A gradient caret expands over one phrase, collapses to the left, then types its replacement with a blinking caret. Credited to Remocn. Item license: MIT AND OFL-1.1.","path":"registry/components/caret-swap","use":"Copy it, or `npx hyperframes add caret-swap`, to compositions/components/caret-swap.html and mount it as a sub-composition; it brings its own timeline. 7 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: from_text, to_text, font_size, font_weight, color, caret_color, caret_color_end. Type come from theme custom properties with fallbacks (--font-display), so a :root block or one of the three themes re-skins it. It also reads its own custom properties with fallbacks…","read":false}},{"id":"hyperframes/component/char-slam-explode","name":"Char Slam Explode","kind":"html-video","job":"title","line":"Headline glyphs hold in a deterministic scatter, then reassemble with an overshooting slam and a three-frame landing shake.","path":"registry/components/char-slam-explode","use":"Copy it, or `npx hyperframes add char-slam-explode`, to compositions/components/char-slam-explode.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: text, accent, spread. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --brand, --fg, --font-display), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/chart-story","name":"Chart Story","kind":"html-video","job":"chart","line":"One chart builds from data in reading order and lands the exact supplied values: staggered bars, a left-to-right line with area fill, a sweeping donut, or filling progress bars, with an accented value callout on the emphasized…","path":"registry/components/chart-story","use":"Copy it, or `npx hyperframes add chart-story`, to compositions/components/chart-story.html and mount it as a sub-composition; it brings its own timeline. 7 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text","numbers"],"line":"Declared variables: type, data, labels, emphasize, unit, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 12 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/chat-message","name":"Chat Message","kind":"html-video","job":"scene","line":"One message arrives on the measured entry - scale 0.75, 0.12s, growing from its sender's corner. Credited to Miao Yang.","path":"registry/components/chat-message","use":"Copy it, or `npx hyperframes add chat-message`, to compositions/components/chat-message.html and mount it as a sub-composition; it brings its own timeline. 6 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["type","text"],"line":"Declared variables: type, text, cardTitle, cardDomain, tail, delivered. Type come from theme custom properties with fallbacks (--font-body), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/chat-thread","name":"Chat Thread","kind":"html-video","job":"scene","line":"The measured conversation as one mountable scene at full fidelity: status bar, back badge, avatar and name pill, bubbles with real iMessage tails, a Delivered receipt, large emoji rows, a media placeholder, a link card, and… Copies the look of iMessage; that brand is theirs. Credited to Miao Yang.","path":"registry/components/chat-thread","use":"Copy it, or `npx hyperframes add chat-thread`, to compositions/components/chat-thread.html and mount it as a sub-composition; it brings its own timeline. 6 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["type","text","numbers"],"line":"Declared variables: contact, unread, messages, beat, dots, receipt. Type come from theme custom properties with fallbacks (--font-body), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/chromatic-aberration-wipe","name":"Chromatic Aberration Wipe","kind":"html-video","job":"transition","line":"A fast slide wipe with RGB channel split on peak frames. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/chromatic-aberration-wipe","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors"],"line":"Declared variables: direction, accent, aberration. Its colors are custom properties declared in one block in the file (--hf-accent, --hf-ink, --hf-muted, --hf-surface).","read":false}},{"id":"hyperframes/component/code-terminal-run","name":"Code Terminal Run","kind":"html-video","job":"code","line":"A token-chrome terminal panel runs one command: the prompt line types deterministically behind an integer-cycle caret, executes after a beat, and output lines print one per cue before a fresh prompt appears.","path":"registry/components/code-terminal-run","use":"Copy it, or `npx hyperframes add code-terminal-run`, to compositions/components/code-terminal-run.html and mount it as a sub-composition; it brings its own timeline. 5 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: prompt_glyph, cadence, cues, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 12 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/colorama-wipe","name":"Colorama Wipe","kind":"html-video","job":"title","line":"Headline reveal through a feathered, leaning wipe front that is blurred and color-mapped as it passes, then settles to clean type and wipes off again — the After Effects masked-text + Compound Blur + Colorama 'shiny wipe' as a… Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/colorama-wipe","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 2 hex colors are written in the file's CSS.","read":false}},{"id":"hyperframes/component/comparison-split","name":"Comparison Split","kind":"html-video","job":"compare","line":"Two full-bleed panels compare before and after states as a persistent divider wipes the vivid after layer over the muted before layer and rests at a configurable split.","path":"registry/components/comparison-split","use":"Copy it, or `npx hyperframes add comparison-split`, to compositions/components/comparison-split.html and mount it as a sub-composition; it brings its own timeline. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: split, orientation, labelA, labelB. Colors and type come from theme custom properties with fallbacks (--accent, --bg, --border, --fg, --font-body, --font-display, 11 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/confetti","name":"Confetti","kind":"html-video","job":"effect","line":"A deterministic celebration burst with seeded particles and gravity. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/confetti","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors","type"],"line":"No declared variables. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 12 in all), so a :root block or one of the three themes re-skins it. The words are in the HTML.","read":false}},{"id":"hyperframes/component/conic-progress-ring","name":"Conic Progress Ring","kind":"html-video","job":"number","line":"A token-driven conic progress ring whose angular fill and center count settle together from one registered percentage.","path":"registry/components/conic-progress-ring","use":"Copy it, or `npx hyperframes add conic-progress-ring`, to compositions/components/conic-progress-ring.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text","numbers"],"line":"Declared variables: progress, thickness, label. Colors and type come from theme custom properties with fallbacks (--brand, --fg, --font-display, --surface), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/constellation-hub","name":"Constellation Hub","kind":"html-video","job":"layout","line":"Feature nodes brighten in narration order as real-length SVG connectors draw outward from a fixed central hub, then settle into one lockup.","path":"registry/components/constellation-hub","use":"Copy it, or `npx hyperframes add constellation-hub`, to compositions/components/constellation-hub.html and mount it as a sub-composition; it brings its own timeline. 5 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: hub_label, nodes, cues, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 12 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/count-up","name":"Count Up","kind":"html-video","job":"number","line":"A token-native stat counter that eases between values, counting up or down, and lands with a restrained scale pulse.","path":"registry/components/count-up","use":"Copy it, or `npx hyperframes add count-up`, to compositions/components/count-up.html and mount it as a sub-composition; it brings its own timeline. 7 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text","numbers"],"line":"Declared variables: start, end, prefix, suffix, accent, glow, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --brand, --fg, --font-display), so a :root block or one of the three themes re-skins it.","read":true}},{"id":"hyperframes/component/cta-close","name":"CTA Close","kind":"html-video","job":"end card","line":"A display-scale action line lands per word and fills the frame with air, one generous CTA capsule pops beneath it with a single overshoot, and the finished close holds completely still.","path":"registry/components/cta-close","use":"Copy it, or `npx hyperframes add cta-close`, to compositions/components/cta-close.html and mount it as a sub-composition; it brings its own timeline. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: action_line, button_label, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --brand, --fg, --font-body, 7 in all), so a :root block or one of the three themes re-skins it.","read":true}},{"id":"hyperframes/component/cta-lockup","name":"CTA Lockup","kind":"html-video","job":"end card","line":"A canonical closing lockup that reveals an action line, pops in an accent CTA capsule, settles supporting microcopy, and holds with confidence.","path":"registry/components/cta-lockup","use":"Copy it, or `npx hyperframes add cta-lockup`, to compositions/components/cta-lockup.html and mount it as a sub-composition; it brings its own timeline. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: action_line, button_label, microcopy, accent. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --brand, --fg, --font-body, --font-display, 7 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/cursor-annotate","name":"Annotate Cursor","kind":"html-video","job":"callout","line":"A marker pen glides onto the frame and hand-draws a loose loop, an underline, or an arrow around a region, the ink laid exactly under its nib, then lifts and leaves.","path":"registry/components/cursor-annotate","use":"Copy it, or `npx hyperframes add cursor-annotate`, to compositions/components/cursor-annotate.html and mount it as a sub-composition; it brings its own timeline. 6 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors"],"line":"Declared variables: shape, color, target_x, target_y, target_w, target_h. 5 hex colors are written in the file's CSS.","read":false}},{"id":"hyperframes/component/cursor-context-menu","name":"Context Menu Cursor","kind":"html-video","job":"cursor","line":"A cursor right-clicks a file, a context menu blooms from its tip, the hover highlight tracks the item under it, and the chosen action plays out: duplicate, rename, move to trash, or a confirmation toast.","path":"registry/components/cursor-context-menu","use":"Copy it, or `npx hyperframes add cursor-context-menu`, to compositions/components/cursor-context-menu.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text","numbers"],"line":"Declared variables: items, pick, tone. Type come from theme custom properties with fallbacks (--font-body), so a :root block or one of the three themes re-skins it. Its colors are custom properties declared in one block in the file (--cm-accent, --cm-card, --cm-dim, --cm-ink, --cm-line).","read":false}},{"id":"hyperframes/component/cursor-drag-drop","name":"Drag and Drop Cursor","kind":"html-video","job":"cursor","line":"A cursor grabs a task card, lifts and tilts it into its motion, carries it in lockstep to an empty column, drops it with a small settle, and the list closes the gap behind it.","path":"registry/components/cursor-drag-drop","use":"Copy it, or `npx hyperframes add cursor-drag-drop`, to compositions/components/cursor-drag-drop.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: card_label, accent, tone. Type come from theme custom properties with fallbacks (--font-body), so a :root block or one of the three themes re-skins it. Its colors are custom properties declared in one block in the file (--chip, --dd-accent, --dd-badge-text, --dd-card,…","read":false}},{"id":"hyperframes/component/cursor-glyph-trail","name":"Cursor Glyph Trail","kind":"html-video","job":"cursor","line":"A tutorial cursor path: on a settings screen the arrow clicks through three steps, leaving a dotted trail spaced evenly by distance and a numbered marker at each click; each step's trail fades as the next move begins.","path":"registry/components/cursor-glyph-trail","use":"Copy it, or `npx hyperframes add cursor-glyph-trail`, to compositions/components/cursor-glyph-trail.html and mount it as a sub-composition; it brings its own timeline. 6 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","text"],"line":"Declared variables: glyphs, density, path, fade, accent, exit. Colors come from theme custom properties with fallbacks (--accent, --accent-2, --brand), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/cursor-marquee-select","name":"Marquee Select Cursor","kind":"html-video","job":"cursor","line":"A cursor drags a selection rectangle across a photo grid; each tile rings and pops a check the frame the rectangle touches it, while a pill counts the selection up.","path":"registry/components/cursor-marquee-select","use":"Copy it, or `npx hyperframes add cursor-marquee-select`, to compositions/components/cursor-marquee-select.html and mount it as a sub-composition; it brings its own timeline. 6 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: accent, start_x, start_y, end_x, end_y, pill_label. Type come from theme custom properties with fallbacks (--font-body), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/cursor-text-select","name":"Text Select Cursor","kind":"html-video","job":"cursor","line":"An arrow turns into an I-beam over a document, drags a selection across a phrase character by character, raises a format toolbar, turns back into an arrow and clicks Bold.","path":"registry/components/cursor-text-select","use":"Copy it, or `npx hyperframes add cursor-text-select`, to compositions/components/cursor-text-select.html and mount it as a sub-composition; it brings its own timeline. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: title, text, phrase, accent. Type come from theme custom properties with fallbacks (--font-body), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/cursor-zoom-follow","name":"Zoom Follow Cursor","kind":"html-video","job":"camera","line":"Screen-recording auto-zoom: the camera pushes in toward each upcoming click, trails the cursor on a smooth spring, marks every click with a press and a ring, then eases back out to the full screen as the cursor leaves.","path":"registry/components/cursor-zoom-follow","use":"Copy it, or `npx hyperframes add cursor-zoom-follow`, to compositions/components/cursor-zoom-follow.html and mount it as a sub-composition; it brings its own timeline. 9 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","pictures"],"line":"Declared variables: image, zoom, click1_x, click1_y, click2_x, click2_y, click3_x, click3_y and 1 more. Type come from theme custom properties with fallbacks (--font-body), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/curtain-reveal","name":"Curtain Reveal","kind":"html-video","job":"transition","line":"Two pleated stage curtains gather outward from center, the way real velvet bunches at the tieback, revealing the stage underneath. A static pelmet frames the top; a soft spotlight can bloom in as they part.","path":"registry/components/curtain-reveal","use":"Copy it, or `npx hyperframes add curtain-reveal`, to compositions/components/curtain-reveal.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type"],"line":"Declared variables: tone, pelmet, spotlight. Colors and type come from theme custom properties with fallbacks (--fg, --font-display), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/cut-the-curve","name":"Cut the Curve","kind":"html-video","job":"transition","line":"A velocity-matched directional hard cut: the outgoing subject accelerates with power4.in, swaps at peak velocity, and the incoming subject continues in the same direction with power4.out.","path":"registry/components/cut-the-curve","use":"Copy it, or `npx hyperframes add cut-the-curve`, to compositions/components/cut-the-curve.html and mount it as a sub-composition; it brings its own timeline. 5 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type"],"line":"Declared variables: subject, direction, cutFraction, blurPx, exit. Colors and type come from theme custom properties with fallbacks (--bg, --border, --fg, --font-body, --radius, --space-1, 9 in all), so a :root block or one of the three themes re-skins it. It also reads its own custom properties…","read":false}},{"id":"hyperframes/component/dart-cursor","name":"Dart Cursor","kind":"html-video","job":"cursor","line":"A bold outlined arrowhead that dives in from camera depth, flies nose-first with motion blur along its path, squashes on two clicks, and whips out of frame.","path":"registry/components/dart-cursor","use":"Copy it, or `npx hyperframes add dart-cursor`, to compositions/components/dart-cursor.html and mount it as a sub-composition; it brings its own timeline. 8 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":[],"line":"Declared variables: tone, target_x, target_y, target2_x, target2_y, enter_from, exit_to, blur. 3 hex colors are written in the file's CSS.","read":false}},{"id":"hyperframes/component/decline-chart","name":"Decline Chart","kind":"html-video","job":"chart","line":"A metric line draws downward as its value counts down and the ambient background darkens in lockstep.","path":"registry/components/decline-chart","use":"Copy it, or `npx hyperframes add decline-chart`, to compositions/components/decline-chart.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text","numbers"],"line":"Declared variables: label, start_value, end_value. Colors and type come from theme custom properties with fallbacks (--fg, --font-body, --font-display), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/device-frame-stage","name":"Device Frame Stage","kind":"html-video","job":"frame","line":"A phone or tablet mockup staged as a physical scene prop with a screen slot for arbitrary reconstructed UI, rising onto the stage, settling, and holding an idle float.","path":"registry/components/device-frame-stage","use":"Copy it, or `npx hyperframes add device-frame-stage`, to compositions/components/device-frame-stage.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type"],"line":"Declared variables: device, cutout, body. Colors and type come from theme custom properties with fallbacks (--border, --font-body, --muted, --space-2, --surface), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/directional-wipe","name":"Directional Wipe","kind":"html-video","job":"transition","line":"A directional scene push that slides one panel over another. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/directional-wipe","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 2 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors"],"line":"Declared variables: palette, corner. Colors come from theme custom properties with fallbacks (--accent, --accent-2, --brand), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/drift-hold","name":"Drift Hold","kind":"html-video","job":"camera","line":"A centered content card stays subtly alive through loop-exact rotation, scale breathing, and a slow light sweep.","path":"registry/components/drift-hold","use":"Copy it, or `npx hyperframes add drift-hold`, to compositions/components/drift-hold.html and mount it as a sub-composition; it brings its own timeline. 2 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: text, intensity. Colors and type come from theme custom properties with fallbacks (--accent, --bg, --border, --fg, --font-body, --font-display, 9 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/dynamic-grid","name":"Dynamic Grid","kind":"html-video","job":"ground","line":"A responsive animated grid background driven by CSS variables for SaaS, code, and data scenes. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/dynamic-grid","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors"],"line":"Declared variables: density, weight, tone. Colors come from theme custom properties with fallbacks (--accent, --accent-2, --brand), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/echo-smear","name":"Echo Smear","kind":"html-video","job":"effect","line":"Distance-adaptive streak — records each element's real trajectory (position, rotation, scale, opacity), then trails time-offset copies behind it in proportion to its speed, combined by brightest pixel, so fast moves smear and… Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/echo-smear","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":[],"line":"No declared variables and no colors or fonts of its own found; what it shows is set by the markup and script in the file.","read":false}},{"id":"hyperframes/component/echo-trail","name":"Echo Trail","kind":"html-video","job":"effect","line":"A moving element renders with N ghosted copies of itself at t minus i times delta, opacity stepped down per ghost; one traversal, echoes collapsing into the settled element at rest.","path":"registry/components/echo-trail","use":"Copy it, or `npx hyperframes add echo-trail`, to compositions/components/echo-trail.html and mount it as a sub-composition; it brings its own timeline. 5 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type"],"line":"Declared variables: echoes, delta, path, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 11 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/extended-keyframe","name":"Extended Keyframe","kind":"html-video","job":"move","line":"The never-fully-lands arrival: an element covers most of its move in the first fifth of the duration and creeps the rest to the last frame, exits along its arrival vector, and carries shutter motion blur — from any side or by… Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/extended-keyframe","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":[],"line":"No declared variables and no colors or fonts of its own found; what it shows is set by the markup and script in the file.","read":false}},{"id":"hyperframes/component/facet-morph","name":"Facet Morph","kind":"html-video","job":"effect","line":"A faceted low-poly mass of 36 triangles continuously reshapes between three authored silhouettes (blob, mark, badge) with per-facet flat shading that recomputes as the vertices move. Light reads from the upper left.","path":"registry/components/facet-morph","use":"Copy it, or `npx hyperframes add facet-morph`, to compositions/components/facet-morph.html and mount it as a sub-composition; it brings its own timeline. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: forms, hold_last, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --brand, --fg, --font-body, 7 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/fade-through","name":"Fade Through","kind":"html-video","job":"transition","line":"A calm transition primitive that fades one layer out, passes through a wash, and reveals the next layer. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/fade-through","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors"],"line":"Declared variables: wash, strength, shape. Colors come from theme custom properties with fallbacks (--accent), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/filmed-screen","name":"Filmed Screen","kind":"html-video","job":"effect","line":"Your scene, filmed off a screen: perspective, depth of field that follows an element you name, LED sub-pixels and per-shot color grades. The repo marks it experimental.","path":"registry/components/filmed-screen","use":"Copy it, or `npx hyperframes add filmed-screen`, to compositions/components/filmed-screen.html and mount it as a sub-composition; it brings its own timeline.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/component/focus-blur-resolve","name":"Focus Blur Resolve","kind":"html-video","job":"title","line":"A premium focus pull from heavy blur to crisp text, then a soft blur-out exit. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/focus-blur-resolve","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors"],"line":"Declared variables: tone, size, blur. Colors come from theme custom properties with fallbacks (--brand), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/focus-rack","name":"Focus Rack","kind":"html-video","job":"camera","line":"Focus shifts once between two cards at different apparent depths through synchronized blur, dimming, scale, and parallax.","path":"registry/components/focus-rack","use":"Copy it, or `npx hyperframes add focus-rack`, to compositions/components/focus-rack.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: label_a, label_b, accent. Colors and type come from theme custom properties with fallbacks (--bg, --fg, --font-body, --font-display, --font-mono, --surface), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/focus-swap","name":"Focus Swap","kind":"html-video","job":"move","line":"Moves attention between two side-by-side cards as one recedes with scale, blur, and dimming while the other advances to full focus.","path":"registry/components/focus-swap","use":"Copy it, or `npx hyperframes add focus-swap`, to compositions/components/focus-swap.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type"],"line":"Declared variables: focus, blurPx, dim. Colors and type come from theme custom properties with fallbacks (--bg, --border, --fg, --font-body, --font-display, --font-mono, 11 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/gesture-tap","name":"Gesture Tap","kind":"html-video","job":"cursor","line":"A contact circle taps a mobile pill button, releases it into a new labeled accent state, and lifts away.","path":"registry/components/gesture-tap","use":"Copy it, or `npx hyperframes add gesture-tap`, to compositions/components/gesture-tap.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","text"],"line":"Declared variables: tap_label, response_label, accent. Colors come from theme custom properties with fallbacks (--accent, --accent-2, --brand), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/gloss-sweep","name":"Gloss Sweep","kind":"html-video","job":"effect","line":"A card lands with a restrained slam, catches one diagonal specular gloss, and holds perfectly still.","path":"registry/components/gloss-sweep","use":"Copy it, or `npx hyperframes add gloss-sweep`, to compositions/components/gloss-sweep.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: text, accent, sweep_angle. Colors and type come from theme custom properties with fallbacks (--bg, --fg, --font-display), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/grade-split-reveal","name":"Grade Split Reveal","kind":"html-video","job":"compare","line":"The same picture twice, one flat and one finished, with a hard edge sweeping between them. It stops in the middle long enough to compare, then commits and the graded look takes the frame.","path":"registry/components/grade-split-reveal","use":"Copy it, or `npx hyperframes add grade-split-reveal`, to compositions/components/grade-split-reveal.html and mount it as a sub-composition; it brings its own timeline. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":[],"line":"Declared variables: look, split, edge, labels. 19 hex colors and 1 font stack are written in the file's CSS.","read":false}},{"id":"hyperframes/component/grain-field","name":"Grain Field","kind":"html-video","job":"ground","line":"A clearly visible accent-tinted dot field drifts over a subtle luminance gradient in an exact ambient loop.","path":"registry/components/grain-field","use":"Copy it, or `npx hyperframes add grain-field`, to compositions/components/grain-field.html and mount it as a sub-composition; it brings its own timeline. 2 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors"],"line":"Declared variables: density, accent. Colors come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --brand), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/grain-overlay","name":"Grain Overlay","kind":"html-video","job":"overlay","line":"Animated film grain texture overlay using CSS keyframes — adds warmth and analog character to any composition. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/grain-overlay","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":[],"line":"No declared variables and no colors or fonts of its own found; what it shows is set by the markup and script in the file.","read":false}},{"id":"hyperframes/component/grid-card-assemble","name":"Grid Card Assemble","kind":"html-video","job":"layout","line":"N capability cards (thin-line icon that draws on, mono label, optional muted body) stagger-assemble into a grid or vertical list with a fade plus short slide into slot, then hold perfectly still.","path":"registry/components/grid-card-assemble","use":"Copy it, or `npx hyperframes add grid-card-assemble`, to compositions/components/grid-card-assemble.html and mount it as a sub-composition; it brings its own timeline. 6 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: items, layout, columns, cues, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 12 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/grid-pixelate-wipe","name":"Grid Pixelate Wipe","kind":"html-video","job":"transition","line":"Transition effect where the screen dissolves into a grid of squares that fade out with staggered timing — use between scenes. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/grid-pixelate-wipe","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":[],"line":"No declared variables and no colors or fonts of its own found; what it shows is set by the markup and script in the file.","read":false}},{"id":"hyperframes/component/halftone-dissolve","name":"Halftone Dissolve","kind":"html-video","job":"transition","line":"Scene A dissolves into scene B through a growing halftone dot field: accent ink dots pop onto a fixed grid smallest-first, each opens into a window onto B, until the windows merge and B fully replaces A.","path":"registry/components/halftone-dissolve","use":"Copy it, or `npx hyperframes add halftone-dissolve`, to compositions/components/halftone-dissolve.html and mount it as a sub-composition; it brings its own timeline. 5 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type"],"line":"Declared variables: dot_size, direction, dissolve_at, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 10 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/headline-slam","name":"Headline Slam","kind":"html-video","job":"title","line":"A heavyweight headline scales down into frame, lands with a deterministic three-frame shake, holds with subtle drift, and whips upward on exit.","path":"registry/components/headline-slam","use":"Copy it, or `npx hyperframes add headline-slam`, to compositions/components/headline-slam.html and mount it as a sub-composition; it brings its own timeline. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text","numbers"],"line":"Declared variables: text, accent_word_index, accent, shadow. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --brand, --fg, --font-display), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/hw-arrow","name":"Hand-Drawn Arrow","kind":"html-video","job":"callout","line":"Wobbled draw-on arrow with straight, gentle, and swoop curve poses, a four-way stroke texture matrix (plain/soft/sharp/spray), and a travel-aligned head-arrival stretch pulse with spring recovery; boils while on screen.","path":"registry/components/hw-arrow","use":"Copy it, or `npx hyperframes add hw-arrow`, to compositions/components/hw-arrow.html and mount it as a sub-composition; it brings its own timeline.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors","type"],"line":"No declared variables. 3 hex colors and 1 font stack are written in the file's CSS. It also reads its own custom properties with fallbacks (--hw-arrow-color, --hw-font-print, --hw-ink); set them on a wrapping element to re-skin it without editing. The words are in the HTML.","read":true}},{"id":"hyperframes/component/hw-boil","name":"Hand-Drawn Boil","kind":"html-video","job":"effect","line":"Hand-drawn jitter that re-poses every N frames, as seek-safe helpers: pose derives from quantized timeline time through a seeded hash.","path":"registry/components/hw-boil","use":"Copy it, or `npx hyperframes add hw-boil`, to compositions/components/hw-boil.html and mount it as a sub-composition; it brings its own timeline.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors","type"],"line":"No declared variables. Its colors are custom properties declared in one block in the file (--hw-accent, --hw-font-print, --hw-font-script, --hw-ink). The words are in the HTML.","read":false}},{"id":"hyperframes/component/hw-box-label","name":"Hand-Drawn Box Label","kind":"html-video","job":"callout","line":"Wobbled rounded rectangle draws on — across the authored stroke matrix (plain/soft/sharp/spray) — or drops in and lands with a volume-true contact squash and bouncy spring recovery, with a handwritten label above or centered.","path":"registry/components/hw-box-label","use":"Copy it, or `npx hyperframes add hw-box-label`, to compositions/components/hw-box-label.html and mount it as a sub-composition; it brings its own timeline.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors","type"],"line":"No declared variables. 3 hex colors and 1 font stack are written in the file's CSS. It also reads its own custom properties with fallbacks (--hw-box-ink, --hw-font-print, --hw-ink); set them on a wrapping element to re-skin it without editing.","read":false}},{"id":"hyperframes/component/hw-callout-circle","name":"Scribble Callout Circle","kind":"html-video","job":"callout","line":"Wobbled ellipse draws around a target with optional scribble fill and curved connector; the handwritten label pops in WITH momentum and the drawn shapes absorb the arrival with a volume-preserving contact squash.","path":"registry/components/hw-callout-circle","use":"Copy it, or `npx hyperframes add hw-callout-circle`, to compositions/components/hw-callout-circle.html and mount it as a sub-composition; it brings its own timeline.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors","type"],"line":"No declared variables. 3 hex colors and 2 font stacks are written in the file's CSS. It also reads its own custom properties with fallbacks (--hw-accent, --hw-co-accent, --hw-co-ink, --hw-font-print, --hw-ink); set them on a wrapping element to re-skin it without editing. The words are in the HTML.","read":false}},{"id":"hyperframes/component/hw-underline","name":"Squiggle Marks","kind":"html-video","job":"callout","line":"Hand-drawn squiggle underline, double-pass strikethrough, and bracket marks that draw on.","path":"registry/components/hw-underline","use":"Copy it, or `npx hyperframes add hw-underline`, to compositions/components/hw-underline.html and mount it as a sub-composition; it brings its own timeline.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors","type"],"line":"No declared variables. 2 hex colors and 1 font stack are written in the file's CSS. It also reads its own custom properties with fallbacks (--hw-accent-warm, --hw-font-print, --hw-mark-color); set them on a wrapping element to re-skin it without editing. The words are in the HTML.","read":false}},{"id":"hyperframes/component/icon-morph-beat","name":"Icon Morph Beat","kind":"html-video","job":"move","line":"An icon morphs between authored state silhouettes, shifts to an accent color, and marks completion with one restrained pulse.","path":"registry/components/icon-morph-beat","use":"Copy it, or `npx hyperframes add icon-morph-beat`, to compositions/components/icon-morph-beat.html and mount it as a sub-composition; it brings its own timeline. 2 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors"],"line":"Declared variables: pair, accent. Colors come from theme custom properties with fallbacks (--bg, --border, --fg, --surface), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/icon-swap","name":"Icon Swap","kind":"html-video","job":"move","line":"A scale-and-blur icon swap primitive for toolbar and action state changes. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/icon-swap","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors"],"line":"Declared variables: tone, size, shape, blur. Colors come from theme custom properties with fallbacks (--brand), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/ink-bleed-reveal","name":"Ink Bleed Reveal","kind":"html-video","job":"effect","line":"Liquid ink blooms through paper under a gooey blur-plus-threshold filter, merges, then contracts as a crisp slotted mark resolves beneath it, with static seeded paper grain riding the result.","path":"registry/components/ink-bleed-reveal","use":"Copy it, or `npx hyperframes add ink-bleed-reveal`, to compositions/components/ink-bleed-reveal.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type"],"line":"Declared variables: blobs, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --brand, --fg, --font-display), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/inline-highlight","name":"Inline Highlight","kind":"html-video","job":"callout","line":"A clean marker-style inline highlight that animates behind text using a CSS scale variable. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/inline-highlight","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors"],"line":"Declared variables: tint, thickness, origin. Colors come from theme custom properties with fallbacks (--accent, --accent-2, --brand), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/input-feedback","name":"Input Feedback","kind":"html-video","job":"move","line":"A transitions.dev-inspired input feedback primitive with shake, clear affordance, and success state. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/input-feedback","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","text"],"line":"Declared variables: status, value, hint. Its colors are custom properties declared in one block in the file (--hf-fb-border, --hf-fb-chip-bg, --hf-fb-chip-fg).","read":false}},{"id":"hyperframes/component/iris-reveal","name":"Iris Reveal","kind":"html-video","job":"transition","line":"A circle clip-path opens from an authored origin revealing state B over state A in one confident pass, then holds on B. Classic register dims and desaturates the before state so the after state lands in full color.","path":"registry/components/iris-reveal","use":"Copy it, or `npx hyperframes add iris-reveal`, to compositions/components/iris-reveal.html and mount it as a sub-composition; it brings its own timeline. 6 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type"],"line":"Declared variables: iris_x, iris_y, open_at, register, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 12 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/keyframe-scrub-stack","name":"Keyframe Scrub Stack","kind":"html-video","job":"layout","line":"A keyframe-sequenced stack of cards with offset timing and easing presets. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/keyframe-scrub-stack","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors"],"line":"No declared variables. Colors come from theme custom properties with fallbacks (--accent), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/kinetic-center-build","name":"Kinetic Center Build","kind":"html-video","job":"title","line":"Words enter from the right and push the growing phrase left until the final line locks centered. Credited to Remocn. Item license: MIT.","path":"registry/components/kinetic-center-build","use":"Copy it, or `npx hyperframes add kinetic-center-build`, to compositions/components/kinetic-center-build.html and mount it as a sub-composition; it brings its own timeline. 5 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: text, font_size, entry_offset, color, font_weight. Type come from theme custom properties with fallbacks (--font-display), so a :root block or one of the three themes re-skins it. It also reads its own custom properties with fallbacks (--color); set them on a wrapping element…","read":false}},{"id":"hyperframes/component/kinetic-type-swap","name":"Kinetic Type Swap","kind":"html-video","job":"title","line":"A held sentence keeps its fixed text in place while one widest-word masked slot rolls through alternatives and settles on the final option.","path":"registry/components/kinetic-type-swap","use":"Copy it, or `npx hyperframes add kinetic-type-swap`, to compositions/components/kinetic-type-swap.html and mount it as a sub-composition; it brings its own timeline. 6 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: prefix, options, suffix, cues, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --brand, --fg, --font-display), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/light-sweep-pass","name":"Light Sweep Pass","kind":"html-video","job":"overlay","line":"A traveling key light re-shades a slotted scene: a soft diagonal gradient band crosses the frame once while every per-element highlight and shadow shifts in lockstep (all driven by one --light-x property), then the light settles…","path":"registry/components/light-sweep-pass","use":"Copy it, or `npx hyperframes add light-sweep-pass`, to compositions/components/light-sweep-pass.html and mount it as a sub-composition; it brings its own timeline. 5 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type"],"line":"Declared variables: angle, sweep_at, strength, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 13 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/line-by-line-slide","name":"Line-by-Line Slide","kind":"html-video","job":"title","line":"Each line enters from the left with staggered slide and exits to the right. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/line-by-line-slide","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors"],"line":"Declared variables: size, tone, density, direction. Colors come from theme custom properties with fallbacks (--brand), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/line-swap","name":"Line Swap","kind":"html-video","job":"title","line":"A masked full-line beat replacement: line A holds center then exits up through an overflow-hidden mask as line B enters bottom-up on the same beat, with an optional accent underline drawing beneath one word of line B.","path":"registry/components/line-swap","use":"Copy it, or `npx hyperframes add line-swap`, to compositions/components/line-swap.html and mount it as a sub-composition; it brings its own timeline. 6 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: line_a, line_b, swap_at, underline_word, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --brand, --fg, --font-display), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/locked-nucleus-orbit","name":"Locked Nucleus Orbit","kind":"html-video","job":"layout","line":"A fixed center nucleus anchors deterministic satellite orbits that settle into a composed lockup.","path":"registry/components/locked-nucleus-orbit","use":"Copy it, or `npx hyperframes add locked-nucleus-orbit`, to compositions/components/locked-nucleus-orbit.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: label, accent, satellites. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 9 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/logo-brand-close","name":"Logo Brand Close","kind":"html-video","job":"end card","line":"A display-scale wordmark cascades letter by letter into a centered lockup, the accent brand period lands last, an optional tagline and wide-tracked mono URL settle beneath, and the finished identity holds dead still to the end of…","path":"registry/components/logo-brand-close","use":"Copy it, or `npx hyperframes add logo-brand-close`, to compositions/components/logo-brand-close.html and mount it as a sub-composition; it brings its own timeline. 5 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: wordmark, tagline, url, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --brand, --fg, --font-body, 11 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/logo-sting","name":"Logo Sting","kind":"html-video","job":"logo","line":"A wordmark slams into its final scale, fires one accent ring and one white impact frame, then holds completely still.","path":"registry/components/logo-sting","use":"Copy it, or `npx hyperframes add logo-sting`, to compositions/components/logo-sting.html and mount it as a sub-composition; it brings its own timeline. 2 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","preview":{"video":"assets/asset-library/hyperframes-logo-sting.mp4","poster":"assets/asset-library/hyperframes-logo-sting-poster.jpg","w":1280,"h":720,"seconds":2.2},"takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: wordmark, accent. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --brand, --fg, --font-display), so a :root block or one of the three themes re-skins it.","read":true}},{"id":"hyperframes/component/logo-wall","name":"Logo Wall","kind":"html-video","job":"logo","line":"A trusted-by wall of placeholder lettermark logos that fades and scales into place with a deterministic per-cell stagger.","path":"registry/components/logo-wall","use":"Copy it, or `npx hyperframes add logo-wall`, to compositions/components/logo-wall.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","preview":{"video":"assets/asset-library/hyperframes-logo-wall.mp4","poster":"assets/asset-library/hyperframes-logo-wall-poster.jpg","w":1280,"h":720,"seconds":5},"takes":{"how":"props","what":["colors","type"],"line":"Declared variables: rows, cols, stagger. Colors and type come from theme custom properties with fallbacks (--bg, --border, --fg, --font-body, --font-display, --muted, 10 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/magnetic-cursor","name":"Magnetic Cursor","kind":"html-video","job":"cursor","line":"A soft dot pointer glides across an editor toolbar, is pulled into each button and morphs into its rounded hover plate while the icon leans toward it, presses one, and leaves as a dot.","path":"registry/components/magnetic-cursor","use":"Copy it, or `npx hyperframes add magnetic-cursor`, to compositions/components/magnetic-cursor.html and mount it as a sub-composition; it brings its own timeline. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: accent, tone, visits, press. Type come from theme custom properties with fallbacks (--font-body), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/marker-checklist-card","name":"Marker Checklist Card","kind":"html-video","job":"layout","line":"A hand-lettered paper card: marker headline with an underline and a drawn ellipse around one word, then three checklist rows whose checks draw themselves on - typewriter labels, marker values. Credited to Miao Yang.","path":"registry/components/marker-checklist-card","use":"Copy it, or `npx hyperframes add marker-checklist-card`, to compositions/components/marker-checklist-card.html and mount it as a sub-composition; it brings its own timeline. 10 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","text"],"line":"Declared variables: top, mid, circled, rest, l1, v1, l2, v2 and 2 more. Colors come from theme custom properties with fallbacks (--bg), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/marker-highlight","name":"Marker Highlight","kind":"html-video","job":"callout","line":"Display text settles in, then one hand-drawn marker stroke (highlight, circle, underline, or scribble) draws over the emphasized word on cue.","path":"registry/components/marker-highlight","use":"Copy it, or `npx hyperframes add marker-highlight`, to compositions/components/marker-highlight.html and mount it as a sub-composition; it brings its own timeline. 6 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: text, emphasis_word, style, draw_at, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --brand, --fg, --font-display), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/match-cut","name":"Match Cut","kind":"html-video","job":"transition","line":"A circle accelerates into a hard single-frame scene swap, matches the incoming circle exactly, and continues into a smaller resting pose.","path":"registry/components/match-cut","use":"Copy it, or `npx hyperframes add match-cut`, to compositions/components/match-cut.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["text"],"line":"Declared variables: accent, label_a, label_b. 9 hex colors and 2 font stacks are written in the file's CSS.","read":false}},{"id":"hyperframes/component/matrix-decode","name":"Matrix Decode","kind":"html-video","job":"title","line":"Random scramble resolves left-to-right into the target text. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/matrix-decode","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["text"],"line":"Declared variables: text, accent, size, glow. 4 hex colors and 1 font stack are written in the file's CSS.","read":false}},{"id":"hyperframes/component/menu-morph","name":"Menu Morph","kind":"html-video","job":"move","line":"A transitions.dev-inspired hamburger and plus-menu morph primitive for compact action menus. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/menu-morph","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","text"],"line":"Declared variables: actions, tone, size. Colors come from theme custom properties with fallbacks (--accent, --accent-2, --brand), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/mesh-gradient-bg","name":"Mesh Gradient Background","kind":"html-video","job":"ground","line":"A render-safe mesh gradient using animated radial layers. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/mesh-gradient-bg","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors"],"line":"No declared variables. Its colors are custom properties declared in one block in the file (--hf-accent, --hf-ink, --hf-muted, --hf-surface). The words are in the HTML.","read":true}},{"id":"hyperframes/component/micro-transitions","name":"Micro Transitions","kind":"html-video","job":"move","line":"A transitions.dev-inspired pack of badge, dropdown, modal, tabs, tooltip, and success-check micro transitions. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/micro-transitions","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","text"],"line":"Declared variables: badge, tooltip, tone, travel. Colors come from theme custom properties with fallbacks (--accent-2), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/mk-emphasis-type","name":"Background Emphasis Type","kind":"html-video","job":"title","line":"Oversized low-contrast background word drifting slowly behind the subject — typography as texture.","path":"registry/components/mk-emphasis-type","use":"Copy it, or `npx hyperframes add mk-emphasis-type`, to compositions/components/mk-emphasis-type.html and mount it as a sub-composition; it brings its own timeline.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["text"],"line":"No declared variables and no colors or fonts of its own found; what it shows is set by the markup and script in the file. The words are in the HTML.","read":false}},{"id":"hyperframes/component/mk-usage-arc","name":"Hairline Arc Gauge","kind":"html-video","job":"number","line":"Thin circular gauge that draws on while its percentage counts up; one helper call drives both.","path":"registry/components/mk-usage-arc","use":"Copy it, or `npx hyperframes add mk-usage-arc`, to compositions/components/mk-usage-arc.html and mount it as a sub-composition; it brings its own timeline.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors","type"],"line":"No declared variables. Its colors are custom properties declared in one block in the file (--mk-accent, --mk-arc-color, --mk-font, --mk-hairline, --mk-ink, 6 in all). The words are in the HTML.","read":true}},{"id":"hyperframes/component/modal-morph","name":"Modal Morph","kind":"html-video","job":"move","line":"A small card expands into a full panel, shared-element style: both layouts measured once at mount, the container morphs by transform only (never width/height tweens) while keyed children counter-scale and re-flow onto their own…","path":"registry/components/modal-morph","use":"Copy it, or `npx hyperframes add modal-morph`, to compositions/components/modal-morph.html and mount it as a sub-composition; it brings its own timeline. 5 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type"],"line":"Declared variables: from_scale, expand_at, register, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 13 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/morph-swap","name":"Morph Swap","kind":"html-video","job":"transition","line":"Two slotted siblings stacked at one shared center: A holds, then condenses or reshapes into B on a shared 50% 50% transform origin. Condense shrink-fades A exactly as B scales up.","path":"registry/components/morph-swap","use":"Copy it, or `npx hyperframes add morph-swap`, to compositions/components/morph-swap.html and mount it as a sub-composition; it brings its own timeline. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type"],"line":"Declared variables: swap_at, register, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 12 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/morph-text","name":"Morph Text","kind":"html-video","job":"title","line":"Gooey text morph — cycles through an editable word list using SVG threshold + GSAP-driven blur for a fluid, satisfying transition effect.","path":"registry/components/morph-text","use":"Copy it, or `npx hyperframes add morph-text`, to compositions/components/morph-text.html and mount it as a sub-composition; it brings its own timeline.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"tokens","what":["colors","type"],"line":"No declared variables. Colors and type come from theme custom properties with fallbacks (--bg, --fg, --font-display), so a :root block or one of the three themes re-skins it. The words are in the HTML.","read":false}},{"id":"hyperframes/component/motion-blur","name":"Motion Blur","kind":"html-video","job":"effect","line":"After Effects-style motion blur — integrates each element over a shutter window (shutter angle, phase, samples per frame) by sampling the GSAP timeline at sub-frame times and averaging equal-weight additive copies of the element…","path":"registry/components/motion-blur","use":"Copy it, or `npx hyperframes add motion-blur`, to compositions/components/motion-blur.html and mount it as a sub-composition; it brings its own timeline.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":[],"line":"No declared variables and no colors or fonts of its own found; what it shows is set by the markup and script in the file.","read":false}},{"id":"hyperframes/component/multi-device-splay","name":"Multi Device Splay","kind":"html-video","job":"frame","line":"Phone, tablet, and desktop product mockups fan from a centered stack into a proud splayed arrangement with a subtle idle float.","path":"registry/components/multi-device-splay","use":"Copy it, or `npx hyperframes add multi-device-splay`, to compositions/components/multi-device-splay.html and mount it as a sub-composition; it brings its own timeline. 1 setting to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors"],"line":"Declared variables: accent. Colors come from theme custom properties with fallbacks (--accent, --accent-2, --brand), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/multiplayer-cursors","name":"Multiplayer Cursors","kind":"html-video","job":"cursor","line":"Labeled collaborator cursors with token-derived colors and soft glows drift from spread positions into a shared center zone, proving live multiplayer presence.","path":"registry/components/multiplayer-cursors","use":"Copy it, or `npx hyperframes add multiplayer-cursors`, to compositions/components/multiplayer-cursors.html and mount it as a sub-composition; it brings its own timeline. 2 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text","numbers"],"line":"Declared variables: cursorCount, labels. Colors and type come from theme custom properties with fallbacks (--accent, --bg, --border, --brand, --fg, --font-body, 11 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/native-notification-pop","name":"Native Notification Pop","kind":"html-video","job":"overlay","line":"One system-faithful notification banner (iOS or macOS) drops in over any scene on an accurate interruptible spring: fast arrival, soft overshoot, settled mass, backdrop blur, app dot, title, one body line. Holds. Copies the look of iOS and macOS notifications; that brand is theirs.","path":"registry/components/native-notification-pop","use":"Copy it, or `npx hyperframes add native-notification-pop`, to compositions/components/native-notification-pop.html and mount it as a sub-composition; it brings its own timeline. 7 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: title, body, app_label, os, at, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 12 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/notes-typing","name":"Notes Typing","kind":"html-video","job":"scene","line":"The notes-app confession as a mountable scene: a bold title, then body lines typed character by character on the measured human keystroke rhythm, the caret riding every landed character and jumping down at each paragraph. Credited to Miao Yang.","path":"registry/components/notes-typing","use":"Copy it, or `npx hyperframes add notes-typing`, to compositions/components/notes-typing.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["type","text"],"line":"Declared variables: title, lines, speed. Type come from theme custom properties with fallbacks (--font-body), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/notification-pileup","name":"Notification Pileup","kind":"html-video","job":"scene","line":"Mobile notification cards arrive faster and faster, each new alert pushing the existing stack downward into a dense, anxious tower.","path":"registry/components/notification-pileup","use":"Copy it, or `npx hyperframes add notification-pileup`, to compositions/components/notification-pileup.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","numbers"],"line":"Declared variables: count, speed, showBadges. Colors and type come from theme custom properties with fallbacks (--accent, --bg, --border, --brand, --fg, --font-body, 12 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/notification-stack","name":"Notification Stack","kind":"html-video","job":"scene","line":"1 to 5 token notification cards slide-settle into a vertical stack on cues, newest on top; one card grows slightly and brightens as the focus while the rest dim by position.","path":"registry/components/notification-stack","use":"Copy it, or `npx hyperframes add notification-stack`, to compositions/components/notification-stack.html and mount it as a sub-composition; it brings its own timeline. 6 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text","numbers"],"line":"Declared variables: titles, bodies, expand, cues, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 11 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/number-pop-in","name":"Number Pop In","kind":"html-video","job":"number","line":"A transitions.dev-inspired digit pop-in with blur, lift, and staggered value reveal. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/number-pop-in","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","text"],"line":"Declared variables: value, unit, lift, tone. Colors come from theme custom properties with fallbacks (--brand), so a :root block or one of the three themes re-skins it.","read":true}},{"id":"hyperframes/component/number-wheel","name":"Number Wheel","kind":"html-video","job":"number","line":"A rolling digit counter primitive for metrics, prices, counts, and scoreboards. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/number-wheel","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors"],"line":"Declared variables: spin, spacing, tone. Colors come from theme custom properties with fallbacks (--brand), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/offset-path-traveler","name":"Offset Path Traveler","kind":"html-video","job":"move","line":"A slotted traveler follows an authored path with tangent rotation, curved entry, and curved exit.","path":"registry/components/offset-path-traveler","use":"Copy it, or `npx hyperframes add offset-path-traveler`, to compositions/components/offset-path-traveler.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: path, traveler_label, accent. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 12 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/onboarding-stepper-flow","name":"Onboarding Stepper Flow","kind":"html-video","job":"scene","line":"A composed onboarding flow with milestone rail, active step card, and next-action button. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/onboarding-stepper-flow","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 4 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/component/ordered-dither-pass","name":"Ordered Dither Pass","kind":"html-video","job":"effect","line":"Bayer-matrix ordered dithering quantizes a slotted scene (rasterized once at mount): the image emerges from pure 2-tone noise to clean, or dissolves the reverse. Stateless per frame, never error diffusion.","path":"registry/components/ordered-dither-pass","use":"Copy it, or `npx hyperframes add ordered-dither-pass`, to compositions/components/ordered-dither-pass.html and mount it as a sub-composition; it brings its own timeline. 5 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type"],"line":"Declared variables: matrix, direction, levels, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --brand, --fg, --font-display, 8 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/outline-draw","name":"Outline Draw","kind":"html-video","job":"callout","line":"A rounded outline that proves a callout by drawing clockwise as a hollow conic-gradient border with a clean closure.","path":"registry/components/outline-draw","use":"Copy it, or `npx hyperframes add outline-draw`, to compositions/components/outline-draw.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors"],"line":"Declared variables: progress, thickness, radius. Colors come from theme custom properties with fallbacks (--accent, --fg), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/oversized-cursor","name":"Oversized Cursor","kind":"html-video","job":"cursor","line":"The look-here pointer for a video: the macOS arrow at 3.5x its normal size lands its tip on one control, clicks it on, settles just below it so the result stays in view, then exits off-screen.","path":"registry/components/oversized-cursor","use":"Copy it, or `npx hyperframes add oversized-cursor`, to compositions/components/oversized-cursor.html and mount it as a sub-composition; it brings its own timeline. 5 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: cursor_variant, target_x, target_y, click_label, exit. Colors and type come from theme custom properties with fallbacks (--border, --brand, --fg, --font-body, --radius, --space-2, 8 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/overwhelm-surround","name":"Overwhelm Surround","kind":"html-video","job":"scene","line":"Tasks, tabs, pings, and notification bubbles accelerate inward around a calm central subject, turning overload into visible spatial pressure.","path":"registry/components/overwhelm-surround","use":"Copy it, or `npx hyperframes add overwhelm-surround`, to compositions/components/overwhelm-surround.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text","numbers"],"line":"Declared variables: count, centerLabel, intensity. Colors and type come from theme custom properties with fallbacks (--accent, --bg, --border, --brand, --fg, --font-body, 11 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/page-slide","name":"Page Slide","kind":"html-video","job":"transition","line":"A transitions.dev-inspired page slide primitive with outgoing and incoming panels. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/page-slide","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["text"],"line":"Declared variables: label_a, label_b, accent, corner. 10 hex colors and 1 font stack are written in the file's CSS.","read":false}},{"id":"hyperframes/component/pan-stations","name":"Pan Stations","kind":"html-video","job":"camera","line":"A lateral camera move across a continuous row of labeled feature stations, with a steady dwell at each stop before the next pan.","path":"registry/components/pan-stations","use":"Copy it, or `npx hyperframes add pan-stations`, to compositions/components/pan-stations.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text","numbers"],"line":"Declared variables: stationCount, labels, dwell. Colors and type come from theme custom properties with fallbacks (--accent, --bg, --border, --brand, --fg, --font-body, 11 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/panel-reveal","name":"Panel Reveal","kind":"html-video","job":"move","line":"A panel reveal primitive with height expansion and content fade. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/panel-reveal","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["text"],"line":"Declared variables: title, width, tone, reveal. 7 hex colors and 1 font stack are written in the file's CSS.","read":false}},{"id":"hyperframes/component/paper-collage-reveal","name":"Paper Collage Reveal","kind":"html-video","job":"transition","line":"A scrapbook patchwork of torn paper scraps, each with its own texture and tilt, flutters away in a staggered scatter to reveal the content underneath.","path":"registry/components/paper-collage-reveal","use":"Copy it, or `npx hyperframes add paper-collage-reveal`, to compositions/components/paper-collage-reveal.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","numbers"],"line":"Declared variables: panels, tone, spread. Colors and type come from theme custom properties with fallbacks (--accent-2, --bg, --fg, --font-display, --surface), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/parallax-device-dive","name":"Parallax Device Dive","kind":"html-video","job":"transition","line":"A canonical phone rises into view before the camera pushes through its screen and layered app UI expands to fill the frame.","path":"registry/components/parallax-device-dive","use":"Copy it, or `npx hyperframes add parallax-device-dive`, to compositions/components/parallax-device-dive.html and mount it as a sub-composition; it brings its own timeline. 2 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","text"],"line":"Declared variables: accent, app_title. Colors come from theme custom properties with fallbacks (--accent, --accent-2, --brand), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/parallax-unzoom","name":"Parallax Unzoom","kind":"html-video","job":"transition","line":"Reveal transition — focus card scales down from full frame as siblings parallax in to form a grid (reverse of parallax-zoom). Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/parallax-unzoom","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":[],"line":"No declared variables and no colors or fonts of its own found; what it shows is set by the markup and script in the file.","read":false}},{"id":"hyperframes/component/parallax-zoom","name":"Parallax Zoom","kind":"html-video","job":"transition","line":"Center card scales up to fill the frame while siblings parallax outward — inspired by the eBay Playbook hero transition. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/parallax-zoom","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"edit the file","what":[],"line":"No declared variables and no colors or fonts of its own found; what it shows is set by the markup and script in the file.","read":false}},{"id":"hyperframes/component/particle-image-reveal","name":"Particle Image Reveal","kind":"html-video","job":"effect","line":"A seeded deterministic particle field converges and settles while a slotted image reveals beneath it, the trail thinning until the image holds clean.","path":"registry/components/particle-image-reveal","use":"Copy it, or `npx hyperframes add particle-image-reveal`, to compositions/components/particle-image-reveal.html and mount it as a sub-composition; it brings its own timeline. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type"],"line":"Declared variables: density, direction, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 9 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/particle-text-dissolve","name":"Particle Text Dissolve","kind":"html-video","job":"title","line":"Text assembles from a seeded particle cloud (or dissolves into it): per-particle targets sampled once from the rendered text bitmap at mount, table-driven particles, zero per-particle tweens, one onUpdate painter.","path":"registry/components/particle-text-dissolve","use":"Copy it, or `npx hyperframes add particle-text-dissolve`, to compositions/components/particle-text-dissolve.html and mount it as a sub-composition; it brings its own timeline. 5 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: text, direction, density, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --brand, --fg, --font-display), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/pendulum-swing","name":"Pendulum Swing","kind":"html-video","job":"move","line":"Content hangs from a fixed pivot and swings into rest with gravity-damped oscillation, like a hanging sign settling on its hook. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/pendulum-swing","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors"],"line":"Declared variables: pivot, amplitude, direction, tone. Colors come from theme custom properties with fallbacks (--brand), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/per-word-crossfade","name":"Per-Word Crossfade","kind":"html-video","job":"title","line":"Words gently fade into place with a short vertical drift for calm keynote rhythm. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/per-word-crossfade","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","text"],"line":"Declared variables: text, drift, blur, tone. Colors come from theme custom properties with fallbacks (--brand), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/per-word-rise","name":"Per Word Rise","kind":"html-video","job":"title","line":"Words or characters rise into place in a controlled blur-to-sharp cascade, settle softly on landing, and hold still until the cut (optional fade or up exit).","path":"registry/components/per-word-rise","use":"Copy it, or `npx hyperframes add per-word-rise`, to compositions/components/per-word-rise.html and mount it as a sub-composition; it brings its own timeline. 5 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: text, split, cues, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --brand, --fg, --font-display, 8 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/perspective-marquee","name":"Perspective Marquee","kind":"html-video","job":"title","line":"A 3D tilted marquee with depth feel as items roll toward the horizon. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/perspective-marquee","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","text"],"line":"Declared variables: tilt, travel, tone, words. Colors come from theme custom properties with fallbacks (--brand), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/physical-exit","name":"Physical Exit","kind":"html-video","job":"move","line":"A card exits with physical momentum in toss, drop, or slide mode, carrying acceleration and rotation through the final offscreen pose without fading.","path":"registry/components/physical-exit","use":"Copy it, or `npx hyperframes add physical-exit`, to compositions/components/physical-exit.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: mode, text, accent. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --brand, --fg, --font-body, --font-display), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/press-ripple","name":"Press Ripple","kind":"html-video","job":"cursor","line":"A cursor decel-arrives from off-stage, lands slightly off-center on a caller-positioned target, compresses with it in lockstep, releases with two small click rings while the label swaps to a check, then exits off-stage while the…","path":"registry/components/press-ripple","use":"Copy it, or `npx hyperframes add press-ripple`, to compositions/components/press-ripple.html and mount it as a sub-composition; it brings its own timeline. 8 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: label, done_label, target_x, target_y, press_at, cursor, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 9 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/pull-back-reveal","name":"Pull Back Reveal","kind":"html-video","job":"camera","line":"A tight stat detail holds, then one decelerating camera pull-back reveals the headline and supporting cards that recontextualize it.","path":"registry/components/pull-back-reveal","use":"Copy it, or `npx hyperframes add pull-back-reveal`, to compositions/components/pull-back-reveal.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: detail_text, headline, accent. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 11 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/pull-to-refresh","name":"Pull to Refresh","kind":"html-video","job":"cursor","line":"A mobile list pulls through nonlinear rubber-band resistance, arms at a threshold, commits to a bounded loading indicator, then snaps exactly back to rest.","path":"registry/components/pull-to-refresh","use":"Copy it, or `npx hyperframes add pull-to-refresh`, to compositions/components/pull-to-refresh.html and mount it as a sub-composition; it brings its own timeline. 2 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type"],"line":"Declared variables: pullDistance, spinnerStyle. Colors and type come from theme custom properties with fallbacks (--bg, --border, --brand, --fg, --font-body, --font-display, 8 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/push-in","name":"Push In","kind":"html-video","job":"camera","line":"A centered headline gains focus through one slow, continuous camera push and a gentle fade out.","path":"registry/components/push-in","use":"Copy it, or `npx hyperframes add push-in`, to compositions/components/push-in.html and mount it as a sub-composition; it brings its own timeline. 2 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: text, intensity. Colors and type come from theme custom properties with fallbacks (--bg, --fg, --font-display, --surface), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/radial-surround","name":"Radial Surround","kind":"html-video","job":"layout","line":"Labeled hairline chips assemble around a centered subject on an elliptical ring, then optionally converge inward with a subtle edge dim. The center never moves: surrounded, not zoomed.","path":"registry/components/radial-surround","use":"Copy it, or `npx hyperframes add radial-surround`, to compositions/components/radial-surround.html and mount it as a sub-composition; it brings its own timeline. 6 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: center_label, chips, close_in, cues, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 12 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/rgb-glitch-text","name":"RGB Glitch Text","kind":"html-video","job":"title","line":"RGB-offset text copies jitter briefly for a controlled glitch window. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/rgb-glitch-text","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","text"],"line":"Declared variables: text, intensity, tone. Colors come from theme custom properties with fallbacks (--brand), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/rubber-band-bumper","name":"Rubber Band Bumper","kind":"html-video","job":"transition","line":"An outgoing panel pulls against increasing resistance, holds at tension, then snaps past an edge with overshoot as the incoming panel settles behind it.","path":"registry/components/rubber-band-bumper","use":"Copy it, or `npx hyperframes add rubber-band-bumper`, to compositions/components/rubber-band-bumper.html and mount it as a sub-composition; it brings its own timeline. 2 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type"],"line":"Declared variables: direction, accent. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --brand, --fg, --font-body, 8 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/scan-band","name":"Scan Band","kind":"html-video","job":"logo","line":"A diagonal distortion band sweeps once across a clean wordmark, revealing clipped red and cyan offsets only inside the moving band.","path":"registry/components/scan-band","use":"Copy it, or `npx hyperframes add scan-band`, to compositions/components/scan-band.html and mount it as a sub-composition; it brings its own timeline. 2 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","preview":{"video":"assets/asset-library/hyperframes-scan-band.mp4","poster":"assets/asset-library/hyperframes-scan-band-poster.jpg","w":1280,"h":720,"seconds":3.5},"takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: wordmark, band_angle. Colors and type come from theme custom properties with fallbacks (--bg, --fg, --font-display), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/scramble-reveal","name":"Scramble Reveal","kind":"html-video","job":"title","line":"A deterministic hacker-style text reveal that cycles fixed glyph rows and locks the target string from left to right.","path":"registry/components/scramble-reveal","use":"Copy it, or `npx hyperframes add scramble-reveal`, to compositions/components/scramble-reveal.html and mount it as a sub-composition; it brings its own timeline. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: text, accent, style, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 12 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/screen-flow-carousel","name":"Screen Flow Carousel","kind":"html-video","job":"layout","line":"Two to five app screens ride a horizontal rail: one primary at center, neighbors receded, advancing on cues with a velocity-matched throw and a smooth long-tail catch while a mono caption swaps with each advance.","path":"registry/components/screen-flow-carousel","use":"Copy it, or `npx hyperframes add screen-flow-carousel`, to compositions/components/screen-flow-carousel.html and mount it as a sub-composition; it brings its own timeline. 5 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text","numbers"],"line":"Declared variables: screens, captions, cues, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 14 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/scroll-camera-story","name":"Scroll Camera Story","kind":"html-video","job":"camera","line":"A compressed forced-scroll cinematic pass: a tall scene of slotted sections travels past the camera top to bottom, depth layers parallax at different rates, each section rises as the camera reaches it, and the pass decelerates…","path":"registry/components/scroll-camera-story","use":"Copy it, or `npx hyperframes add scroll-camera-story`, to compositions/components/scroll-camera-story.html and mount it as a sub-composition; it brings its own timeline. 5 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text","numbers"],"line":"Declared variables: sections, travel, cues, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 13 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/scroll-feed","name":"Scroll Feed","kind":"html-video","job":"scene","line":"A loop-friendly column of varied skeleton post cards scrolls upward with subtle motion trails and an agitated pace.","path":"registry/components/scroll-feed","use":"Copy it, or `npx hyperframes add scroll-feed`, to compositions/components/scroll-feed.html and mount it as a sub-composition; it brings its own timeline. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text","numbers"],"line":"Declared variables: speed, card_count, cues, exit. Colors and type come from theme custom properties with fallbacks (--bg, --border, --fg, --font-body, --muted, --radius, 9 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/segmentation-flood","name":"Segmentation Flood","kind":"html-video","job":"effect","line":"Machine-vision read of a slotted subject: translucent accent segmentation masks flood on in quantized scanline steps, each region gets a thin bracket and mono label chip, a deterministic 2-frame HUD flicker rides the pass, then…","path":"registry/components/segmentation-flood","use":"Copy it, or `npx hyperframes add segmentation-flood`, to compositions/components/segmentation-flood.html and mount it as a sub-composition; it brings its own timeline. 5 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: regions, flood_at, flicker, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 11 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/separator","name":"Separator","kind":"html-video","job":"layout","line":"A one-pixel structural separator with horizontal and vertical variants plus a seek-safe progress reveal. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/separator","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type"],"line":"Declared variables: orientation, thickness, tone. Carries its own set of 40 UI custom properties (--_hf-ui-*) declared in the file. It also reads its own custom properties with fallbacks (--hf-ui-accent, --hf-ui-border, --hf-ui-border-strong, --hf-ui-control-border, --hf-ui-control-border-hover,…","read":false}},{"id":"hyperframes/component/settings-toggle-flow","name":"Settings Toggle Flow","kind":"html-video","job":"scene","line":"A composed settings flow with preference rows, toggle switches, and active-state feedback. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/settings-toggle-flow","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 6 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/component/shared-axis-y","name":"Shared Axis Y","kind":"html-video","job":"title","line":"Per-word vertical shared-axis transition for sharp editorial swaps. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/shared-axis-y","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors"],"line":"Declared variables: direction, distance, tone. Colors come from theme custom properties with fallbacks (--brand), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/shared-axis-z","name":"Shared Axis Z","kind":"html-video","job":"title","line":"Scale-based shared-axis transition for focus shifts and context depth. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/shared-axis-z","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors"],"line":"Declared variables: direction, depth, tone. Colors come from theme custom properties with fallbacks (--brand), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/sheet-spring-up","name":"Sheet Spring-Up","kind":"html-video","job":"overlay","line":"A bottom sheet rushes up from below the frame on a real spring sampled frame by frame from reference footage, overshooting its resting place and settling back without an approximated ease. Paste-in snippet: it registers no timeline, you wire it into your own. Credited to Miao Yang.","path":"registry/components/sheet-spring-up","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type"],"line":"Declared variables: width, radius, tone. Carries its own set of 40 UI custom properties (--_hf-ui-*) declared in the file. It also reads its own custom properties with fallbacks (--hf-ui-accent, --hf-ui-border, --hf-ui-border-strong, --hf-ui-control-border, --hf-ui-control-border-hover, 18 in…","read":false}},{"id":"hyperframes/component/shimmer-sweep","name":"Shimmer Sweep","kind":"html-video","job":"title","line":"Animated light sweep across text or elements using a CSS gradient mask — ideal for AI accents and premium reveals. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/shimmer-sweep","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":[],"line":"No declared variables and no colors or fonts of its own found; what it shows is set by the markup and script in the file.","read":false}},{"id":"hyperframes/component/shutter-slam","name":"Shutter Slam","kind":"html-video","job":"effect","line":"One word thrown through six single-property beats under integrated shutter blur — two translate slams, a scale punch, then a full turn about each axis — on the measured easing of the After Effects export the shutter model was…","path":"registry/components/shutter-slam","use":"Copy it, or `npx hyperframes add shutter-slam`, to compositions/components/shutter-slam.html and mount it as a sub-composition; it brings its own timeline.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors","type"],"line":"No declared variables. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --brand, --font-display), so a :root block or one of the three themes re-skins it. The words are in the HTML.","read":false}},{"id":"hyperframes/component/signup-flow","name":"Signup Flow","kind":"html-video","job":"scene","line":"A composed signup flow with social action, email field, password field, and submit button. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/signup-flow","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 4 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/component/skeleton-reveal","name":"Skeleton Reveal","kind":"html-video","job":"move","line":"A skeleton loader transition that pulses, then cross-fades into content. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/skeleton-reveal","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["text"],"line":"Declared variables: name, detail, tone. 5 hex colors and 1 font stack are written in the file's CSS.","read":false}},{"id":"hyperframes/component/slit-scan-reveal","name":"Slit Scan Reveal","kind":"html-video","job":"effect","line":"The frame's rows sample an authored subject at offset times: a canvas painter draws row slices of one pure position function evaluated at t minus offset(row), smearing arrival through time until the offsets collapse to zero and…","path":"registry/components/slit-scan-reveal","use":"Copy it, or `npx hyperframes add slit-scan-reveal`, to compositions/components/slit-scan-reveal.html and mount it as a sub-composition; it brings its own timeline. 5 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type"],"line":"Declared variables: axis, spread, resolve_at, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --brand, --fg, --font-display, 7 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/slot-machine-roll","name":"Slot Machine Roll","kind":"html-video","job":"number","line":"A vertical reel scrolls characters from one value to another. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/slot-machine-roll","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","text"],"line":"Declared variables: result, direction, size, tone. Colors come from theme custom properties with fallbacks (--brand), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/social-proof-card","name":"Social Proof Card","kind":"html-video","job":"end card","line":"The app-store close as one mountable scene: wordmark, five stars, a proof line, three feature icons and a CTA capsule build in a quiet stagger and hold - measured from reference ad footage. Credited to Miao Yang.","path":"registry/components/social-proof-card","use":"Copy it, or `npx hyperframes add social-proof-card`, to compositions/components/social-proof-card.html and mount it as a sub-composition; it brings its own timeline. 6 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: brand, proof, cta, f1, f2, f3. Colors and type come from theme custom properties with fallbacks (--accent, --brand, --fg, --font-body, --font-display, --surface), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/soft-blob-touch","name":"Soft Blob Touch","kind":"html-video","job":"effect","line":"A granular soft blob idles with slow internal drift; a scripted touch dot decel-arrives, the blob deforms toward it with an attraction bulge, then recovers with a velocity-preserving spring. No hard edges anywhere.","path":"registry/components/soft-blob-touch","use":"Copy it, or `npx hyperframes add soft-blob-touch`, to compositions/components/soft-blob-touch.html and mount it as a sub-composition; it brings its own timeline. 6 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type"],"line":"Declared variables: touch_x, touch_y, touch_at, grain, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --brand, --fg, --font-body), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/soft-blur-in","name":"Soft Blur In","kind":"html-video","job":"title","line":"A soft opacity, blur, and lift reveal for headlines, captions, and product UI callouts. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/soft-blur-in","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":[],"line":"Declared variables: distance, direction, blur.","read":false}},{"id":"hyperframes/component/split-tilt-cards","name":"Split Tilt Cards","kind":"html-video","job":"compare","line":"Two equal-weight cards arrive from opposite wings with mirrored rotateY book-open tilts under one shared perspective, pill badges spring-pop at each inner edge, and the pair holds with a barely-there phase-opposed idle float.","path":"registry/components/split-tilt-cards","use":"Copy it, or `npx hyperframes add split-tilt-cards`, to compositions/components/split-tilt-cards.html and mount it as a sub-composition; it brings its own timeline. 6 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: label_a, label_b, badge_a, badge_b, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 14 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/spotlight-card","name":"Spotlight Card","kind":"html-video","job":"effect","line":"A card with a scripted cursor spotlight and lit border. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/spotlight-card","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors"],"line":"No declared variables. It reads --accent from the theme; its other colors are custom properties declared in one block in the file (--hf-accent, --hf-ink, --hf-muted, --hf-surface). The words are in the HTML.","read":false}},{"id":"hyperframes/component/spring-pop","name":"Spring Pop","kind":"html-video","job":"move","line":"A badge pops in from a visible near-rest scale, overshoots full size once, and settles cleanly.","path":"registry/components/spring-pop","use":"Copy it, or `npx hyperframes add spring-pop`, to compositions/components/spring-pop.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: overshoot, fromScale, text. Colors and type come from theme custom properties with fallbacks (--bg, --border, --brand, --fg, --font-body, --font-display, 10 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/spring-stack-shuffle","name":"Spring Stack Shuffle","kind":"html-video","job":"layout","line":"A stack of 3 to 5 slotted cards reshuffles on cues: the back card throws over the top and lands at the front with real mass, the rest compress and resettle.","path":"registry/components/spring-stack-shuffle","use":"Copy it, or `npx hyperframes add spring-stack-shuffle`, to compositions/components/spring-stack-shuffle.html and mount it as a sub-composition; it brings its own timeline. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text","numbers"],"line":"Declared variables: cards, cues, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 13 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/stagger-cascade","name":"Stagger Cascade","kind":"html-video","job":"layout","line":"A responsive grid of tile cards that fades and travels into place with an evenly spaced per-item GSAP stagger. The ordered cascade is the only visual mechanic.","path":"registry/components/stagger-cascade","use":"Copy it, or `npx hyperframes add stagger-cascade`, to compositions/components/stagger-cascade.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","numbers"],"line":"Declared variables: itemCount, stagger, direction. Colors and type come from theme custom properties with fallbacks (--bg, --border, --brand, --fg, --font-body, --font-display, 7 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/stagger-lattice","name":"Stagger Lattice","kind":"html-video","job":"layout","line":"A staggered grid reveal inspired by Anime.js v4 stagger utilities, implemented with GSAP for HyperFrames. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/stagger-lattice","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors"],"line":"No declared variables. Colors come from theme custom properties with fallbacks (--accent), so a :root block or one of the three themes re-skins it. It also reads its own custom properties with fallbacks (--hf-card-opacity, --hf-card-scale, --hf-card-y); set them on a wrapping element to re-skin it…","read":false}},{"id":"hyperframes/component/staggered-fade-up","name":"Staggered Fade Up","kind":"html-video","job":"title","line":"Words fade in and slide up one after another with configurable delay. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/staggered-fade-up","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: direction, distance, tone, words. Colors and type come from theme custom properties with fallbacks (--brand, --fg, --font-display, --space-1), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/star-rating-fill","name":"Star Rating Fill","kind":"html-video","job":"number","line":"A token-driven star row whose colored layer sweeps to a rating, preserves the fractional final star, and can count the value in sync.","path":"registry/components/star-rating-fill","use":"Copy it, or `npx hyperframes add star-rating-fill`, to compositions/components/star-rating-fill.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","numbers"],"line":"Declared variables: rating, starCount, showValue. Colors and type come from theme custom properties with fallbacks (--bg, --brand, --fg, --font-display, --muted, --space-2, 7 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/state-chip-rail","name":"State Chip Rail","kind":"html-video","job":"layout","line":"A rail of mono status chips advances a seek-safe data-state snap machine on a cue schedule: active chip ink on surface, done chips dim, pending chips hollow, optional badges pop beside one state.","path":"registry/components/state-chip-rail","use":"Copy it, or `npx hyperframes add state-chip-rail`, to compositions/components/state-chip-rail.html and mount it as a sub-composition; it brings its own timeline. 6 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text","numbers"],"line":"Declared variables: states, times, badge_state, badges, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 9 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/sticky-mock-swap","name":"Sticky Mock Swap","kind":"html-video","job":"layout","line":"A pinned product mock cross-fades through accent-tinted feature states while matching captions rise, hold, and exit beside it.","path":"registry/components/sticky-mock-swap","use":"Copy it, or `npx hyperframes add sticky-mock-swap`, to compositions/components/sticky-mock-swap.html and mount it as a sub-composition; it brings its own timeline. 2 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: captions, accent. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 10 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/stitched-text-draw","name":"Stitched Text Draw","kind":"html-video","job":"title","line":"Text drawn as thread stitches: a single-stroke display alphabet draws via attribute-driven dashoffset with stitch-tuned dash patterns, seeded angle jitter, needle-hole dots, a leading needle, and a thread-tail overshoot per…","path":"registry/components/stitched-text-draw","use":"Copy it, or `npx hyperframes add stitched-text-draw`, to compositions/components/stitched-text-draw.html and mount it as a sub-composition; it brings its own timeline. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: text, stitch, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --brand, --fg, --font-display), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/stop-motion-cadence","name":"Stop Motion Cadence","kind":"html-video","job":"effect","line":"The stepped-time law as a demo primitive: one driver quantizes timeline time to floor(t * fps) / fps and feeds ALL motion.","path":"registry/components/stop-motion-cadence","use":"Copy it, or `npx hyperframes add stop-motion-cadence`, to compositions/components/stop-motion-cadence.html and mount it as a sub-composition; it brings its own timeline. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type"],"line":"Declared variables: fps, boil, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --brand, --fg, --font-display), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/store-badge-lockup","name":"Store Badge Lockup","kind":"html-video","job":"end card","line":"Settles a short headline above equal-size App Store and Google Play badges as a token-driven mobile end-card call to action. Copies the look of the App Store and Google Play badges; that brand is theirs.","path":"registry/components/store-badge-lockup","use":"Copy it, or `npx hyperframes add store-badge-lockup`, to compositions/components/store-badge-lockup.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: headline, showApple, showGoogle. Colors and type come from theme custom properties with fallbacks (--bg, --border, --brand, --fg, --font-body, --font-display, 12 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/streaming-text","name":"Streaming Text","kind":"html-video","job":"title","line":"Words arrive the way an AI answer streams - in uneven bursts on a measured token rhythm, each word landing gray and inking to full color - rather than the even tick of a typewriter. Paste-in snippet: it registers no timeline, you wire it into your own. Credited to Miao Yang.","path":"registry/components/streaming-text","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 2 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type"],"line":"Declared variables: size, tone. Carries its own set of 40 UI custom properties (--_hf-ui-*) declared in the file. It also reads its own custom properties with fallbacks (--hf-ui-accent, --hf-ui-border, --hf-ui-border-strong, --hf-ui-control-border, --hf-ui-control-border-hover, 18 in all); set…","read":false}},{"id":"hyperframes/component/strikethrough-replace","name":"Strikethrough Replace","kind":"html-video","job":"title","line":"Draw a strike line across old text, then reveal the replacement. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/strikethrough-replace","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors"],"line":"Declared variables: origin, thickness, tint, tone. Colors come from theme custom properties with fallbacks (--accent, --accent-2), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/success-check","name":"Success Check","kind":"html-video","job":"move","line":"A success check primitive with ring pop, path draw, and subtle rotate blur. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/success-check","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors"],"line":"Declared variables: tint, size, ring, spin. Colors come from theme custom properties with fallbacks (--accent, --accent-2), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/svg-line-draw-loader","name":"SVG Line Draw Loader","kind":"html-video","job":"move","line":"An Anime.js-style path drawing loader implemented as a seekable GSAP stroke timeline. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/svg-line-draw-loader","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors","type"],"line":"No declared variables. Colors and type come from theme custom properties with fallbacks (--accent, --border, --fg, --font-body, --radius, --space-1, 8 in all), so a :root block or one of the three themes re-skins it. It also reads its own custom properties with fallbacks (--hf-card-opacity,…","read":false}},{"id":"hyperframes/component/svg-mask-reveal","name":"SVG Mask Reveal","kind":"html-video","job":"logo","line":"A soft token-colored sweep reveals media only through an editable SVG wordmark mask.","path":"registry/components/svg-mask-reveal","use":"Copy it, or `npx hyperframes add svg-mask-reveal`, to compositions/components/svg-mask-reveal.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","preview":{"video":"assets/asset-library/hyperframes-svg-mask-reveal.mp4","poster":"assets/asset-library/hyperframes-svg-mask-reveal-poster.jpg","w":1280,"h":720,"seconds":4},"takes":{"how":"props","what":["colors","type","text","numbers"],"line":"Declared variables: text, revealProgress, featherPx. Colors and type come from theme custom properties with fallbacks (--accent, --bg, --border, --brand, --fg, --font-body, 7 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/svg-stroke-trace","name":"SVG Stroke Trace","kind":"html-video","job":"move","line":"An authored SVG path draws from its measured length, holds with subtle drift, and optionally fills when the path is closed.","path":"registry/components/svg-stroke-trace","use":"Copy it, or `npx hyperframes add svg-stroke-trace`, to compositions/components/svg-stroke-trace.html and mount it as a sub-composition; it brings its own timeline. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","text"],"line":"Declared variables: path, stroke_width, accent, exit. Colors come from theme custom properties with fallbacks (--accent, --accent-2, --brand), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/swipe-rail","name":"Swipe Rail","kind":"html-video","job":"cursor","line":"A contact circle leads a horizontal card rail through a fast drag, momentum carry, and settled snap to the next card.","path":"registry/components/swipe-rail","use":"Copy it, or `npx hyperframes add swipe-rail`, to compositions/components/swipe-rail.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","text","numbers"],"line":"Declared variables: card_count, accent, card_label_prefix. Colors come from theme custom properties with fallbacks (--accent, --accent-2, --brand), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/tabs-slide-indicator","name":"Tabs Slide Indicator","kind":"html-video","job":"move","line":"A pill indicator transition that slides between active tabs. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/tabs-slide-indicator","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","text"],"line":"Declared variables: accent, width, shape, labels. Colors come from theme custom properties with fallbacks (--accent, --accent-2, --brand), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/telemetry-hud","name":"Telemetry HUD","kind":"html-video","job":"overlay","line":"Quiet mono debug-HUD readouts frame a slotted subject: corner brackets draw on, label:value lines tick their values on cues, one readout emphasized in accent. The subject never moves; the HUD breathes zero.","path":"registry/components/telemetry-hud","use":"Copy it, or `npx hyperframes add telemetry-hud`, to compositions/components/telemetry-hud.html and mount it as a sub-composition; it brings its own timeline. 5 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: readouts, emphasize, cues, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 12 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/terminal-simulator","name":"Terminal Simulator","kind":"html-video","job":"code","line":"A terminal window types commands and streams log output. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/terminal-simulator","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors"],"line":"No declared variables. It reads --accent from the theme; its other colors are custom properties declared in one block in the file (--hf-accent, --hf-ink, --hf-muted, --hf-surface). The words are in the HTML.","read":false}},{"id":"hyperframes/component/testimonial-card","name":"Testimonial Card","kind":"html-video","job":"quote","line":"Reveals a customer quote at reading pace, then settles its avatar, author name, and handle beneath as a clean proof beat.","path":"registry/components/testimonial-card","use":"Copy it, or `npx hyperframes add testimonial-card`, to compositions/components/testimonial-card.html and mount it as a sub-composition; it brings its own timeline. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text","numbers"],"line":"Declared variables: quote, author, handle, rating. Colors and type come from theme custom properties with fallbacks (--bg, --border, --fg, --font-body, --font-display, --font-mono, 9 in all), so a :root block or one of the three themes re-skins it.","read":true}},{"id":"hyperframes/component/testimonial-proof-card","name":"Testimonial Proof Card","kind":"html-video","job":"quote","line":"A quote card whose testimonial reveals per-line through a soft mask, with an avatar disc (initials default, image slot), mono name and role, an optional company text mark, and one emphasis substring underlined in accent ink after…","path":"registry/components/testimonial-proof-card","use":"Copy it, or `npx hyperframes add testimonial-proof-card`, to compositions/components/testimonial-proof-card.html and mount it as a sub-composition; it brings its own timeline. 7 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: quote, name, role, company, emphasis, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 11 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/text-match-cut","name":"Text Match Cut","kind":"html-video","job":"transition","line":"One line of text becomes another mid-move: both ride a single 85 % easy-ease curve and hard-swap at the speed peak, as scale, tracking, or a same-direction slide.","path":"registry/components/text-match-cut","use":"Copy it, or `npx hyperframes add text-match-cut`, to compositions/components/text-match-cut.html and mount it as a sub-composition; it brings its own timeline. 5 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["text"],"line":"Declared variables: text_a, text_b, mode, sweep, background. 6 hex colors and 1 font stack are written in the file's CSS.","read":false}},{"id":"hyperframes/component/text-shimmer","name":"Text Shimmer","kind":"html-video","job":"title","line":"A static headline receives one clean specular gradient sweep through its glyphs, then returns to its ordinary text color.","path":"registry/components/text-shimmer","use":"Copy it, or `npx hyperframes add text-shimmer`, to compositions/components/text-shimmer.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: text, accent, sweep_at. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --brand, --fg, --font-display, 8 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/text-stagger","name":"Text Stagger","kind":"html-video","job":"title","line":"A transitions.dev-inspired text stagger primitive with enter, shimmer, and exit-ready words. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/text-stagger","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["text"],"line":"Declared variables: text, size, tone, accent. 5 hex colors are written in the file's CSS.","read":false}},{"id":"hyperframes/component/text-state-swap","name":"Text State Swap","kind":"html-video","job":"title","line":"A text state swap primitive with outgoing blur and incoming lift. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/text-state-swap","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","text"],"line":"Declared variables: from-text, to-text, distance, tone. Colors come from theme custom properties with fallbacks (--brand), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/texture-mask-text","name":"Texture Mask Text","kind":"html-video","job":"title","line":"CSS luminance masks that cut holes through letterforms - 66 pre-built texture masks from ambientCG PBR color maps. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/texture-mask-text","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running.","needs":"6 MB folder","takes":{"how":"edit the file","what":["colors"],"line":"No declared variables. 1 hex color is written in the file's CSS.","read":false}},{"id":"hyperframes/component/three-orbiting-cards","name":"Three Orbiting Cards","kind":"three","job":"3d","line":"A Three.js-powered orbit scene driven by a paused GSAP timeline for deterministic renders. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/three-orbiting-cards","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running.","needs":"Three.js. Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 3 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/component/ticker-takeover","name":"Ticker Takeover","kind":"html-video","job":"title","line":"A mono ticker rolls through options, locks on a final word with an accent flash, and promotes it into a full-frame headline.","path":"registry/components/ticker-takeover","use":"Copy it, or `npx hyperframes add ticker-takeover`, to compositions/components/ticker-takeover.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: options, final_word, accent. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --brand, --fg, --font-body, 10 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/tilt-card","name":"Tilt Card","kind":"html-video","job":"move","line":"A transitions.dev-inspired tilt card primitive with depth layers and hover-style parallax. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/tilt-card","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["text"],"line":"Declared variables: eyebrow, headline, glow, accent. 8 hex colors and 1 font stack are written in the file's CSS.","read":false}},{"id":"hyperframes/component/titlecard-calm","name":"Titlecard Calm","kind":"html-video","job":"title","line":"A restrained title card where a mono kicker and generous grotesque headline fade upward, drift almost imperceptibly, and exit cleanly.","path":"registry/components/titlecard-calm","use":"Copy it, or `npx hyperframes add titlecard-calm`, to compositions/components/titlecard-calm.html and mount it as a sub-composition; it brings its own timeline. 2 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: headline, kicker. Colors and type come from theme custom properties with fallbacks (--fg, --font-display, --font-mono, --muted), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/titlecard-lockup","name":"Titlecard Lockup","kind":"html-video","job":"title","line":"The calm breather titlecard: an optional mono kicker fades up, the wordmark settles dead-center with one restrained move, a hairline rule draws left to right, a mono label fades beneath, and the lockup holds truly still.","path":"registry/components/titlecard-lockup","use":"Copy it, or `npx hyperframes add titlecard-lockup`, to compositions/components/titlecard-lockup.html and mount it as a sub-composition; it brings its own timeline. 6 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: wordmark, label, kicker, rule, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --brand, --fg, --font-display, 8 in all), so a :root block or one of the three themes re-skins it.","read":true}},{"id":"hyperframes/component/toggle-flip","name":"Toggle Flip","kind":"html-video","job":"scene","line":"An oversized UI toggle switch that flips with real physicality: thumb overshoot, track color crossfade, and a soft press-compress before release. The reference prop of the ui-props family.","path":"registry/components/toggle-flip","use":"Copy it, or `npx hyperframes add toggle-flip`, to compositions/components/toggle-flip.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: direction, label, size. Colors and type come from theme custom properties with fallbacks (--accent, --bg, --border, --brand, --fg, --font-body, 10 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/top-down-letters","name":"Top-Down Letters","kind":"html-video","job":"title","line":"Letters descend from above in a pronounced staircase with zero blur. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/top-down-letters","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","text"],"line":"Declared variables: text, distance, tone. Colors come from theme custom properties with fallbacks (--brand), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/torn-paper-rip","name":"Torn Paper Rip","kind":"html-video","job":"transition","line":"A fibrous paper tear runs across the frame: the torn sheet shows its white paper core along the edge and lifts away on a soft shadow, leaving the next scene standing.","path":"registry/components/torn-paper-rip","use":"Copy it, or `npx hyperframes add torn-paper-rip`, to compositions/components/torn-paper-rip.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type"],"line":"Declared variables: direction, tone, roughness. Colors and type come from theme custom properties with fallbacks (--bg, --fg, --font-display), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/touch-indicator","name":"Touch Indicator","kind":"html-video","job":"cursor","line":"A translucent contact-circle gesture actor for mobile UI scenes: it touches the glass on the frame the host target responds, then lifts. Tap or swipe, picked by variable.","path":"registry/components/touch-indicator","use":"Copy it, or `npx hyperframes add touch-indicator`, to compositions/components/touch-indicator.html and mount it as a sub-composition; it brings its own timeline. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":[],"line":"Declared variables: gesture, polarity, targetX, targetY.","read":false}},{"id":"hyperframes/component/tracing-beam","name":"Tracing Beam","kind":"html-video","job":"callout","line":"A glowing dash follows one SVG path through three UI elements, lifting and brightening each element in sequence.","path":"registry/components/tracing-beam","use":"Copy it, or `npx hyperframes add tracing-beam`, to compositions/components/tracing-beam.html and mount it as a sub-composition; it brings its own timeline. 2 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: labels, accent. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 12 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/tracking-in","name":"Tracking In","kind":"html-video","job":"title","line":"A precise letter-spacing reveal for premium headings and interface labels. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/tracking-in","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors"],"line":"Declared variables: tracking, rise, tone. Colors come from theme custom properties with fallbacks (--brand), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/trust-strip","name":"Trust Strip","kind":"html-video","job":"logo","line":"A monochrome trust row of wide-tracked mono wordmarks that fade in with an opacity-only left-to-right stagger, then hold dead still.","path":"registry/components/trust-strip","use":"Copy it, or `npx hyperframes add trust-strip`, to compositions/components/trust-strip.html and mount it as a sub-composition; it brings its own timeline. 5 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","preview":{"video":"assets/asset-library/hyperframes-trust-strip.mp4","poster":"assets/asset-library/hyperframes-trust-strip-poster.jpg","w":1280,"h":720,"seconds":3.5},"takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: marks, tone, cues, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --brand, --fg, --font-mono, 9 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/type-match-cut","name":"Type Match Cut","kind":"html-video","job":"transition","line":"A headline splits vertically around an incoming panel, which grows from the negative space and takes the frame as the words exit through opposite edges.","path":"registry/components/type-match-cut","use":"Copy it, or `npx hyperframes add type-match-cut`, to compositions/components/type-match-cut.html and mount it as a sub-composition; it brings its own timeline. 2 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: text, accent. Colors and type come from theme custom properties with fallbacks (--bg, --fg, --font-display), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/typed-prompt","name":"Typed Prompt","kind":"html-video","job":"code","line":"A prompt line types itself in chunked human cadence behind a deterministic blinking caret, with optional backspace-and-retype correction of the final word.","path":"registry/components/typed-prompt","use":"Copy it, or `npx hyperframes add typed-prompt`, to compositions/components/typed-prompt.html and mount it as a sub-composition; it brings its own timeline. 8 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: text, prompt_glyph, cadence, caret, correction, cues, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 11 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/typewriter","name":"Typewriter","kind":"html-video","job":"title","line":"Character-by-character text reveal with a deterministic blinking cursor. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/typewriter","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","text"],"line":"Declared variables: text, tone, caret. Colors come from theme custom properties with fallbacks (--brand), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/typing-indicator","name":"Typing Indicator","kind":"html-video","job":"overlay","line":"The three-dot chat bubble that says someone is writing: it pops in at the thread's edge exactly as messaging apps do, holds while the reply is coming, and vanishes when the message lands. Paste-in snippet: it registers no timeline, you wire it into your own. Credited to Miao Yang.","path":"registry/components/typing-indicator","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type"],"line":"Declared variables: size, tone, tail. Carries its own set of 40 UI custom properties (--_hf-ui-*) declared in the file. It also reads its own custom properties with fallbacks (--hf-ui-accent, --hf-ui-border, --hf-ui-border-strong, --hf-ui-control-border, --hf-ui-control-border-hover, 18 in all);…","read":false}},{"id":"hyperframes/component/ui-focus-zoom","name":"UI Focus Zoom","kind":"html-video","job":"camera","line":"A full app surface establishes with one settle, then the camera zooms and pans to an anchored region on its cue and holds the zoomed state, with an optional soft focus halo at the anchor.","path":"registry/components/ui-focus-zoom","use":"Copy it, or `npx hyperframes add ui-focus-zoom`, to compositions/components/ui-focus-zoom.html and mount it as a sub-composition; it brings its own timeline. 7 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","numbers"],"line":"Declared variables: anchor_x, anchor_y, zoom, zoom_at, halo, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 12 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/variable-axis-type","name":"Variable Axis Type","kind":"html-video","job":"title","line":"A locked one-line headline whose weight or width axis morphs into a decisive emphasis beat.","path":"registry/components/variable-axis-type","use":"Copy it, or `npx hyperframes add variable-axis-type`, to compositions/components/variable-axis-type.html and mount it as a sub-composition; it brings its own timeline. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com).","takes":{"how":"props","what":["colors","type","text","numbers"],"line":"Declared variables: text, axis, fromValue, toValue. Colors and type come from theme custom properties with fallbacks (--bg, --fg, --font-display), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/variable-font-flex","name":"Variable Font Flex","kind":"html-video","job":"title","line":"A word lands while its variable-font weight and width axes flex from hairline-condensed to black-wide with per-character stagger; font-size eases inversely so the letterforms gain mass while the box holds.","path":"registry/components/variable-font-flex","use":"Copy it, or `npx hyperframes add variable-font-flex`, to compositions/components/variable-font-flex.html and mount it as a sub-composition; it brings its own timeline. 5 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","text"],"line":"Declared variables: text, axis, stagger, accent, exit. Colors come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --brand, --fg), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/vector-editor-rig","name":"Vector Editor Rig","kind":"html-video","job":"scene","line":"A dark design-tool app chrome with a live vector pen path, sequential anchor points, bezier handles, a selection frame, and theme-driven blue accents.","path":"registry/components/vector-editor-rig","use":"Copy it, or `npx hyperframes add vector-editor-rig`, to compositions/components/vector-editor-rig.html and mount it as a sub-composition; it brings its own timeline. 2 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: tool, pathLabel. Colors and type come from theme custom properties with fallbacks (--bg, --border, --brand, --fg, --font-body, --font-display, 8 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/velocity-throw-snap","name":"Velocity Throw Snap","kind":"html-video","job":"layout","line":"A five-shot rail whips past on a fast decaying curve, then overshoots and snaps the selected hero shot exactly to center.","path":"registry/components/velocity-throw-snap","use":"Copy it, or `npx hyperframes add velocity-throw-snap`, to compositions/components/velocity-throw-snap.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text","numbers"],"line":"Declared variables: hero_index, accent, card_label_prefix. Colors and type come from theme custom properties with fallbacks (--bg, --border, --fg, --font-body, --font-display, --font-mono, 9 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/vignette","name":"Vignette","kind":"html-video","job":"overlay","line":"Cinematic radial vignette overlay using a pure-CSS gradient — darkens the edges to pull focus toward the center. Paste-in snippet: it registers no timeline, you wire it into your own.","path":"registry/components/vignette","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":[],"line":"No declared variables and no colors or fonts of its own found; what it shows is set by the markup and script in the file.","read":false}},{"id":"hyperframes/component/vox-annotate","name":"Vox Annotate","kind":"html-video","job":"callout","line":"The Vox-style annotate gesture: a keyword in a held sentence gets a hand-drawn marker while a thin connector draws up to a mono callout label, all as one choreographed beat on the cue.","path":"registry/components/vox-annotate","use":"Copy it, or `npx hyperframes add vox-annotate`, to compositions/components/vox-annotate.html and mount it as a sub-composition; it brings its own timeline. 7 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: text, keyword, note, style, draw_at, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --brand, --fg, --font-display, 7 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/whip-pan-cut","name":"Whip Pan Cut","kind":"html-video","job":"transition","line":"A full-frame whip pan: scene A whips off laterally with capped directional motion blur while scene B enters in the same direction at matched velocity, on a speed-ramp profile with a decelerating catch.","path":"registry/components/whip-pan-cut","use":"Copy it, or `npx hyperframes add whip-pan-cut`, to compositions/components/whip-pan-cut.html and mount it as a sub-composition; it brings its own timeline. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type"],"line":"Declared variables: direction, whip_at, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --border, --brand, --fg, 12 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/whiteboard-ink","name":"Whiteboard Ink","kind":"html-video","job":"diagram","line":"A whiteboard sketch draws one measured stroke at a time while a pen nib follows the active tip. Preset sketches (bulb, flow, rocket) or your own multi-stroke SVG paths via the strokes slot.","path":"registry/components/whiteboard-ink","use":"Copy it, or `npx hyperframes add whiteboard-ink`, to compositions/components/whiteboard-ink.html and mount it as a sub-composition; it brings its own timeline. 5 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: sketch, caption, pen, accent, exit. Colors and type come from theme custom properties with fallbacks (--accent, --accent-2, --bg, --brand, --fg, --font-body, 10 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/wordmark-tiles","name":"Wordmark Tiles","kind":"html-video","job":"logo","line":"A wordmark resolves from deterministic color noise into correctly cropped glyph tiles through a spatially modulated GSAP wave.","path":"registry/components/wordmark-tiles","use":"Copy it, or `npx hyperframes add wordmark-tiles`, to compositions/components/wordmark-tiles.html and mount it as a sub-composition; it brings its own timeline. 3 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","preview":{"video":"assets/asset-library/hyperframes-wordmark-tiles.mp4","poster":"assets/asset-library/hyperframes-wordmark-tiles-poster.jpg","w":1280,"h":720,"seconds":6.5},"takes":{"how":"props","what":["colors","type","text"],"line":"Declared variables: text, columns, waveStagger. Colors and type come from theme custom properties with fallbacks (--accent, --bg, --border, --brand, --fg, --font-body, 10 in all), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/component/x-follow-card","name":"X Follow Card","kind":"html-video","job":"overlay","line":"A social follow card with avatar, handle, and follower motion. Paste-in snippet: it registers no timeline, you wire it into your own. Copies the look of X; that brand is theirs.","path":"registry/components/x-follow-card","use":"Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors"],"line":"No declared variables. It reads --accent from the theme; its other colors are custom properties declared in one block in the file (--hf-accent, --hf-ink, --hf-muted, --hf-surface). The words are in the HTML.","read":false}},{"id":"hyperframes/component/yt-camera-move","name":"Camera Punch-In","kind":"html-video","job":"camera","line":"Dynamic zoom, slide, and 3D tilt-pan helpers for any wrapper (video, include, card) with cubic-easing defaults and an edge-defocus pulse overlay.","path":"registry/components/yt-camera-move","use":"Copy it, or `npx hyperframes add yt-camera-move`, to compositions/components/yt-camera-move.html and mount it as a sub-composition; it brings its own timeline.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors","type","text"],"line":"No declared variables. 3 hex colors and 1 font stack are written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/component/yt-circle-pointer","name":"Pointer Circle + Countdown","kind":"html-video","job":"callout","line":"Draw-on annotation ellipse around a target plus a countdown chip that pulses each tick.","path":"registry/components/yt-circle-pointer","use":"Copy it, or `npx hyperframes add yt-circle-pointer`, to compositions/components/yt-circle-pointer.html and mount it as a sub-composition; it brings its own timeline.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"tokens","what":["colors","type"],"line":"No declared variables. 4 hex colors and 1 font stack are written in the file's CSS. It also reads its own custom properties with fallbacks (--yt-count-bg, --yt-ptr-color); set them on a wrapping element to re-skin it without editing. The words are in the HTML.","read":false}},{"id":"hyperframes/component/yt-feather-highlight","name":"Feathered Spotlight","kind":"html-video","job":"callout","line":"Dims the frame except a feathered ellipse; the hole's position and size are CSS variables, so helpers glide the spotlight between targets.","path":"registry/components/yt-feather-highlight","use":"Copy it, or `npx hyperframes add yt-feather-highlight`, to compositions/components/yt-feather-highlight.html and mount it as a sub-composition; it brings its own timeline.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["colors","type"],"line":"No declared variables. 2 hex colors and 1 font stack are written in the file's CSS.","read":false}},{"id":"hyperframes/component/yt-screen-warp","name":"On-Screen Display Effect","kind":"html-video","job":"overlay","line":"Grid, scanline, vignette, and sheen overlay plus a 3D-warp wrapper class that makes footage read as if playing on a physical display.","path":"registry/components/yt-screen-warp","use":"Copy it, or `npx hyperframes add yt-screen-warp`, to compositions/components/yt-screen-warp.html and mount it as a sub-composition; it brings its own timeline.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"edit the file","what":["type","text"],"line":"No declared variables. 1 font stack is written in the file's CSS. The words are in the HTML.","read":false}},{"id":"hyperframes/component/zoom-through-transition","name":"Zoom Through Transition","kind":"html-video","job":"transition","line":"A transition that zooms through a focal card into the next scene.","path":"registry/components/zoom-through-transition","use":"Copy it, or `npx hyperframes add zoom-through-transition`, to compositions/components/zoom-through-transition.html and mount it as a sub-composition; it brings its own timeline. 4 settings to change.","needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net).","takes":{"how":"props","what":["colors","text"],"line":"Declared variables: from-label, to-label, depth, accent. Colors come from theme custom properties with fallbacks (--accent, --accent-2, --brand), so a :root block or one of the three themes re-skins it.","read":false}},{"id":"hyperframes/example/decision-tree","name":"Decision Tree","kind":"template","job":"scene","line":"Starter project: animated flowchart with branching paths.","path":"registry/examples/decision-tree","use":"`npx hyperframes init <folder> --example decision-tree`. Not inside the npm package; the CLI fetches it.","w":1920,"h":1080,"seconds":10,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com)."},{"id":"hyperframes/example/kinetic-type","name":"Kinetic Type","kind":"template","job":"scene","line":"Starter project: bold kinetic typography promo.","path":"registry/examples/kinetic-type","use":"`npx hyperframes init <folder> --example kinetic-type`. Not inside the npm package; the CLI fetches it.","w":1920,"h":1080,"seconds":15,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com, gen-os-static.s3.us-east-2.amazonaws.com)."},{"id":"hyperframes/example/nyt-graph","name":"NYT Graph","kind":"template","job":"scene","line":"Starter project: animated data chart in print editorial style.","path":"registry/examples/nyt-graph","use":"`npx hyperframes init <folder> --example nyt-graph`. Not inside the npm package; the CLI fetches it.","w":1920,"h":1080,"seconds":15,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com)."},{"id":"hyperframes/example/play-mode","name":"Play Mode","kind":"template","job":"scene","line":"Starter project: playful elastic animations.","path":"registry/examples/play-mode","use":"`npx hyperframes init <folder> --example play-mode`. Not inside the npm package; the CLI fetches it.","w":1920,"h":1080,"seconds":10,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com)."},{"id":"hyperframes/example/product-promo","name":"Product Promo","kind":"template","job":"scene","line":"Starter project: multi-scene product showcase with SVG assets.","path":"registry/examples/product-promo","use":"`npx hyperframes init <folder> --example product-promo`. Not inside the npm package; the CLI fetches it.","w":1920,"h":1080,"seconds":20,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, fonts.googleapis.com)."},{"id":"hyperframes/example/swiss-grid","name":"Swiss Grid","kind":"template","job":"scene","line":"Starter project: structured grid layout.","path":"registry/examples/swiss-grid","use":"`npx hyperframes init <folder> --example swiss-grid`. Not inside the npm package; the CLI fetches it.","w":1920,"h":1080,"seconds":10,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net)."},{"id":"hyperframes/example/vignelli","name":"Vignelli","kind":"template","job":"scene","line":"Starter project: bold typography with red accents.","path":"registry/examples/vignelli","use":"`npx hyperframes init <folder> --example vignelli`. Not inside the npm package; the CLI fetches it.","w":1080,"h":1920,"seconds":10,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net)."},{"id":"hyperframes/example/warm-grain","name":"Warm Grain","kind":"template","job":"scene","line":"Starter project: cream aesthetic with grain texture.","path":"registry/examples/warm-grain","use":"`npx hyperframes init <folder> --example warm-grain`. This one ships inside the npm package.","w":1920,"h":1080,"seconds":10,"needs":"Loads its libraries from the network when it renders (cdn.jsdelivr.net, www.transparenttextures.com)."},{"id":"hyperframes/skill/hyperframes","name":"hyperframes (core skill)","kind":"skill","job":"plan","line":"The main skill, 78 files: the render contract (HTML plus one paused, seekable GSAP timeline), the work loop, and references for story, motion, look, captions, overlays and review, plus 13 frame presets and two scripts. Good craft; starts with a usage beacon and asks the agent to read its own plan usage.","path":"skills/hyperframes","use":"Install is the owner's step: `npx hyperframes skills update` (core set) or `npx hyperframes skills update hyperframes`. Read hyperframes-core-skills-read.md first.","needs":"The hyperframes CLI; the quiet switches set"},{"id":"hyperframes/skill/hyperframes-cli","name":"hyperframes-cli (core skill)","kind":"skill","job":"render","line":"The CLI by job, 13 files: scaffold, check, snapshot, preview, render locally or in HeyGen's cloud, publish. Asks for a feedback report after every render and makes cloud render the default on a paid plan.","path":"skills/hyperframes-cli","use":"Install is the owner's step: `npx hyperframes skills update` (core set) or `npx hyperframes skills update hyperframes-cli`. Read hyperframes-core-skills-read.md first.","needs":"The hyperframes CLI"},{"id":"hyperframes/skill/hyperframes-registry","name":"hyperframes-registry (core skill)","kind":"skill","job":"catalog","line":"How to search and install the registry, 13 files: catalog --query, add, wiring a component, and the bar a new component has to meet. Reports search misses to HeyGen unless telemetry is off.","path":"skills/hyperframes-registry","use":"Install is the owner's step: `npx hyperframes skills update` (core set) or `npx hyperframes skills update hyperframes-registry`. Read hyperframes-core-skills-read.md first.","needs":"The hyperframes CLI"},{"id":"hyperframes/skill/media-use","name":"media-use (core skill)","kind":"skill","job":"media","line":"Get or make any media for a video, 122 files: music, sound effects, images, logos, voice, avatar video, transcripts, cutouts, color looks, and audio mixing, with HeyGen or local tools. The one skill that tells the agent not to mention prices, and it can run pip install silently.","path":"skills/media-use","use":"Install is the owner's step: `npx hyperframes skills update` (core set) or `npx hyperframes skills update media-use`. Read hyperframes-core-skills-read.md first.","needs":"Ffmpeg; python3 for some scripts; a HeyGen sign-in or other keys for anything generated"},{"id":"hyperframes/skill/figma","name":"figma (on demand)","kind":"skill","job":"import","line":"Bring a Figma file into a HyperFrames film: layers as SVG or PNG, brand tokens as variables, frames as editable HTML, and storyboard frames read as keyframes to animate between, not slides. SKILL.md read; its one script (verify-motion.mjs) not read.","path":"skills/figma","use":"Install is the owner's step: `npx hyperframes skills update` (core set) or `npx hyperframes skills update figma`. Read hyperframes-core-skills-read.md first.","needs":"A FIGMA_TOKEN the owner makes; a Figma connector for motion data"},{"id":"hyperframes/skill/remotion-to-hyperframes","name":"remotion-to-hyperframes (on demand)","kind":"skill","job":"port","line":"Moves a Remotion composition OUT of Remotion and into HyperFrames. It is instructions for an agent plus a source linter, not a converter: lint the source, translate by hand with an API map (interpolate to gsap.fromTo, Sequence to a sub-composition, spring approximated), then score the result against the original render frame by frame. It refuses pieces driven by useState, useEffect with deps, async calculateMetadata or React UI kits. 76 files; SKILL.md, limitations.md and the linter read; linter run on its own samples.","path":"skills/remotion-to-hyperframes","use":"Run `python3 scripts/lint_source.py <remotion src>` to count which Remotion pieces are plain enough to move, and read references/api-map.md backwards as a crib when porting a registry block into Remotion by hand.","needs":"Python3 for the linter; Remotion and the hyperframes CLI to do a real translation and compare"},{"id":"hyperframes/skill/reverse-any-video","name":"reverse-any-video (on demand, Pro)","kind":"skill","job":"rebuild","line":"Rebuild any video file as an editable HyperFrames project and check it against the original frame by frame. A paid HyperFrames Pro feature: it opens with a sign-in check, re-shoots people on screen with HeyGen, and renders in HeyGen's cloud by default. SKILL.md read only.","path":"skills/reverse-any-video","use":"Not usable without a HeyGen sign-in and a Pro plan. Its measuring steps (`measure cuts`, `measure frames`, `diff`) are plain CLI commands.","needs":"HeyGen account on a paid plan"},{"id":"hyperframes/skill/slideshow","name":"slideshow (on demand)","kind":"skill","job":"slides","line":"Build a live deck from a composition: each slide is a scene, one JSON block lists slides, fragment reveals, hotspots and speaker notes, and hyperframes present serves it. The output is a running deck, not an MP4. SKILL.md read only.","path":"skills/slideshow","use":"Install is the owner's step: `npx hyperframes skills update` (core set) or `npx hyperframes skills update slideshow`. Read hyperframes-core-skills-read.md first.","needs":"The hyperframes CLI"},{"id":"hyperframes/skill/style-sampling","name":"style-sampling (on demand, Pro)","kind":"skill","job":"plan","line":"Make a new episode in one of five styles modeled on named channels (Vox, 小Lin说, Kurzgesagt, Fern). A paid HyperFrames Pro feature: the templates are not in the repo, the CLI pulls them after a plan check. SKILL.md read only.","path":"skills/style-sampling","use":"","needs":"HeyGen account on a paid plan","look_only":true},{"id":"hyperframes/tool/cli","name":"hyperframes CLI","kind":"tool","job":"render","line":"The command-line tool (npm hyperframes 0.9.23): scaffold a project, lint, take stills, preview in a local Studio, and render HTML to MP4, WebM, MOV with alpha, GIF or a PNG sequence with headless Chrome and FFmpeg. Tried: a 6 s 1280×720 film rendered in 16 s on our machine with the browser already there.","path":"packages/cli","use":"In a project folder: `npm install hyperframes@0.9.23 --ignore-scripts`, then run it with DO_NOT_TRACK=1 HYPERFRAMES_NO_TELEMETRY=1 HYPERFRAMES_NO_UPDATE_CHECK=1 HYPERFRAMES_NO_AUTO_INSTALL=1 HYPERFRAMES_SKIP_SKILLS=1 and HYPERFRAMES_BROWSER_PATH pointed at a Chrome headless shell. `hyperframes init <name> --example blank --non-interactive --skip-skills`, edit index.html, `hyperframes render . -o out.mp4`.","needs":"Node 22+; FFmpeg; a Chrome headless shell (it downloads a pinned one on first render unless HYPERFRAMES_BROWSER_PATH is set); network at render for GSAP and fonts unless they are made local; 120 MB installed","preview":{"video":"assets/asset-library/hyperframes-cli-render-test.mp4","poster":"assets/asset-library/hyperframes-cli-render-test-poster.jpg","w":1280,"h":720,"seconds":6}},{"id":"hyperframes/package/shader-transitions","name":"@hyperframes/shader-transitions","kind":"tool","job":"transition","line":"A small library of 14 WebGL scene-to-scene transitions driven by a GSAP timeline: domain-warp, ridged-burn, whip-pan, sdf-iris, ripple-waves, gravitational-lens, cinematic-zoom, chromatic-split, glitch, swirl-vortex, thermal-distortion, flash-through-white, cross-warp-morph, light-leak. One call, init({scenes, transitions:[{time, shader, duration}]}). README read; not tried through the package (one demo block rendered).","path":"packages/shader-transitions","use":"`npm install @hyperframes/shader-transitions`, or the script tag from jsDelivr, then `init({...})` in the composition. The 14 matching registry blocks are demo cards of the same shaders.","needs":"WebGL in the render browser (software GL worked for the demo block)"},{"id":"hyperframes/package/player","name":"@hyperframes/player","kind":"tool","job":"publish","line":"A web component that plays a HyperFrames composition inside any web page, with no dependencies.","path":"packages/player","use":"`npm install @hyperframes/player` or the jsDelivr module tag.","needs":"A browser page"},{"id":"hyperframes/package/producer","name":"@hyperframes/producer","kind":"tool","job":"render","line":"The full render pipeline as a library: capture frames with Chrome, encode with FFmpeg, mix audio, in one call. It also has the split-up plan, renderChunk, assemble functions the cloud examples use. README head read; used only through the CLI.","path":"packages/producer","use":"`npm install @hyperframes/producer`.","needs":"Node 22+, FFmpeg, Chrome headless shell"},{"id":"hyperframes/package/engine","name":"@hyperframes/engine","kind":"tool","job":"render","line":"The lower layer under the producer: turns a seekable web page into frames with Puppeteer and FFmpeg. Package description read only.","path":"packages/engine","use":"Used through the CLI or producer.","needs":"Node 22+, FFmpeg, Chrome"},{"id":"hyperframes/package/studio","name":"@hyperframes/studio","kind":"tool","job":"edit","line":"The browser editor behind hyperframes preview: timeline, code editor and live preview. README head read; not started.","path":"packages/studio","use":"`hyperframes preview` starts it on a local port.","needs":"A local server left running; stop it with preview --stop"},{"id":"hyperframes/package/sdk","name":"@hyperframes/sdk","kind":"tool","job":"edit","line":"A headless engine for editing compositions from code, with no framework tied to it. Package description read only.","path":"packages/sdk","use":"`npm install @hyperframes/sdk`."},{"id":"hyperframes/package/aws-lambda","name":"@hyperframes/aws-lambda","kind":"tool","job":"render","line":"Adapter that splits a render into chunks on AWS Lambda with Step Functions: handler, client and CDK construct. Package description and the example README read.","path":"packages/aws-lambda","use":"See examples/aws-lambda.","needs":"An AWS account; costs money"},{"id":"hyperframes/package/gcp-cloud-run","name":"@hyperframes/gcp-cloud-run","kind":"tool","job":"render","line":"The same split render on Google Cloud Run with Workflows, plus a Terraform module. Package description and the example README read.","path":"packages/gcp-cloud-run","use":"See examples/gcp-cloud-run.","needs":"A Google Cloud account; costs money"},{"id":"hyperframes/package/share","name":"@hyperframes/share","kind":"tool","job":"publish","line":"Shared code for review identity, version upload and sharing between HyperFrames hosts: the part behind publish and share links. Package description read only.","path":"packages/share","use":"Not something to call directly.","needs":"A HeyGen sign-in for anything it uploads"},{"id":"hyperframes/package/internal","name":"internal packages (core, lint, parsers, inspector, studio-server, sdk-playground","kind":"tool","job":"render","line":"Six packages with no description of their own: the shared runtime and composition contract (core), the linter behind hyperframes lint, parsers, an inspector, the Studio's server, and a private playground. Only their names and package.json were read.","path":"packages","use":"Pulled in by the CLI; nothing to install by hand."},{"id":"hyperframes/script/lint_source","name":"lint_source.py (Remotion source linter)","kind":"tool","job":"port","line":"Scans a Remotion project and lists what blocks a move to HyperFrames (useState, useEffect with deps, async calculateMetadata, React UI kits), what only warns (Lambda config, delayRender) and what just needs a note (staticFile). 370 lines, Python standard library only, no network. Tried on the skill's sample projects: 0 blockers on the three plain ones, the right blocker on each refusal case.","path":"skills/remotion-to-hyperframes/scripts/lint_source.py","use":"`python3 lint_source.py <remotion project or file> [--json]`.","needs":"Python3"},{"id":"hyperframes/script/bake-basemap","name":"bake-basemap.mjs","kind":"tool","job":"map","line":"Records a map camera move to MP4 with headless Chrome and MapLibre, plus country outlines as JSON. Fetches map tiles (Esri or Carto) and libraries from jsDelivr.","path":"skills/hyperframes/scripts/bake-basemap.mjs","use":"`node bake-basemap.mjs` with its options; read the tile provider's terms first.","needs":"Chrome (it starts it with --no-sandbox), ffmpeg, network"},{"id":"hyperframes/script/locate","name":"locate.mjs","kind":"tool","job":"review","line":"Finds a point in an image by drawing numbered grids over it with ffmpeg. Its auto mode posts the image to Google if GEMINI_API_KEY is set.","path":"skills/hyperframes/scripts/locate.mjs","use":"`node locate.mjs` on a still; avoid `auto` unless a Google key is meant to be used.","needs":"Ffmpeg; writes /tmp/locate-font.ttf"},{"id":"hyperframes/script/dither","name":"dither.mjs","kind":"tool","job":"effect","line":"Error-diffusion dither for an image or an MP4, with 16 named palettes. No network.","path":"skills/media-use/scripts/dither.mjs","use":"`node dither.mjs <in> <out>` with a palette.","needs":"Ffmpeg"},{"id":"hyperframes/script/transcript-cut","name":"transcript-cut.mjs","kind":"tool","job":"edit","line":"Cuts a video or audio file by word timestamps from a transcript. Sends one telemetry event unless the switches are set to 1.","path":"skills/media-use/scripts/transcript-cut.mjs","use":"`node transcript-cut.mjs` with a transcript and a cut list.","needs":"Ffmpeg; the quiet switches"},{"id":"hyperframes/script/audio-duck","name":"audio-duck.mjs","kind":"tool","job":"audio","line":"Prints a volume lane that ducks music under speech, for a composition's audio element. Sends one telemetry event unless the switches are set.","path":"skills/media-use/scripts/audio-duck.mjs","use":"`node audio-duck.mjs` with the speech timings.","needs":"The quiet switches"},{"id":"hyperframes/script/carve","name":"carve.mjs","kind":"tool","job":"audio","line":"Carves room for speech in a music bed and rewrites the audio attributes in the composition HTML. Loads @hyperframes/core from the project's node_modules.","path":"skills/media-use/audio/scripts/carve.mjs","use":"`node carve.mjs` inside a project that has the CLI installed.","needs":"Ffmpeg; the CLI installed in the project"},{"id":"hyperframes/script/transcribe","name":"transcribe.mjs","kind":"tool","job":"caption","line":"Local transcription with word times: Parakeet if present, else the CLI's whisper. Downloads a model on first use (about 640 MB for Parakeet) and sends one telemetry event unless the switches are set.","path":"skills/media-use/scripts/transcribe.mjs","use":"`node transcribe.mjs <media>`.","needs":"A speech model download; the quiet switches"},{"id":"hyperframes/script/extract-audio-data","name":"extract-audio-data.py","kind":"tool","job":"audio","line":"Writes per-frame loudness and frequency-band data for an audio file, for beat-driven motion. No network.","path":"skills/media-use/audio/scripts/extract-audio-data.py","use":"`python3 extract-audio-data.py <audio>`.","needs":"Ffmpeg, numpy"},{"id":"hyperframes/script/audio","name":"audio.mjs (audio engine)","kind":"tool","job":"audio","line":"One request file in, voice, music and sound effects out, by provider: HeyGen, ElevenLabs, Kokoro, Gemini, Google Lyria, local MusicGen, Openverse. The music path can run pip install silently and leave a Python process running.","path":"skills/media-use/audio/scripts/audio.mjs","use":"Only with HYPERFRAMES_PYTHON pointed at a throwaway venv and no .env files in parent folders.","needs":"Provider keys or a HeyGen sign-in for most paths; python3"},{"id":"hyperframes/script/verify-motion","name":"verify-motion.mjs","kind":"tool","job":"review","line":"Compares the motion in a render against a reference export (Figma's own MP4) and fails under 15 dB. Described in the figma SKILL.md; the script itself was not read.","path":"skills/figma/scripts/verify-motion.mjs","use":"`node verify-motion.mjs --reference a.mp4 --render b.mp4 --crop WxH+X+Y`.","needs":"Ffmpeg (not confirmed)"},{"id":"hyperframes/media/sfx-pack","name":"bundled sound effects (19)","kind":"skill","job":"audio","line":"19 short MP3 effects that ship in the media skill: chime, click, click-soft, error, glitch-1, glitch-2, glitch-3, impact-bass-1, impact-bass-2, key-press, notification, ping, pop, riser, sparkle, typing, whoosh, whoosh-cinematic, whoosh-short. Their own CREDITS.md puts them under the Pixabay Content License. Listed by name and size in part 1; not played.","path":"skills/media-use/audio/assets/sfx","use":"Copy the file into a project's assets folder. Read the Pixabay licence terms before shipping them in a product.","needs":"None"},{"id":"hyperframes/media/lut-looks","name":"colour looks (teal-orange-blockbuster, bleach-bypass, film-fade)","kind":"skill","job":"grade","line":"Three named color grades in a small catalog. No .cube files are in the repo: each look is downloaded from HeyGen's CDN when asked for, or built offline from numbers with --local-only.","path":"skills/media-use/luts","use":"`npx hyperframes media-use resolve -t lut --local-only` with the look's id builds it without the network.","needs":"The hyperframes CLI"},{"id":"hyperframes/media/treatments","name":"media treatment recipes","kind":"skill","job":"effect","line":"About 18 written recipes for changing how footage or a still looks or reveals (freeze frame, cutout, light leak, camcorder, dither and so on), each pointing at a registry overlay or an ffmpeg step.","path":"skills/media-use/references/media-treatments.md","use":"Read as a recipe list; the overlays it names are registry blocks.","needs":"Ffmpeg"},{"id":"hyperframes/theme/bold","name":"theme: bold","kind":"html-video","job":"look","line":"Dark purple-black ground, hot pink brand color, violet and cyan accents, Impact display type, quick 0.32 s beat with an overshoot ease. One 20-line CSS file that sets the 18 tokens the newer components read (palette, three fonts, radius, spacing, beat length, two eases). Read in full.","path":"themes/bold.css","use":"Copy the :root block into a composition; components that read var(--bg), var(--brand) and so on pick it up. themes/CONTRACT.md lists the tokens.","needs":"System fonts only","takes":{"how":"tokens","what":["colors","type"],"line":"The token file itself: the same 18 custom properties as the neutral theme in one :root block (eight colors, three font stacks, radius, spacings, beat length, easings) with different values.","read":false}},{"id":"hyperframes/theme/editorial","name":"theme: editorial","kind":"html-video","job":"look","line":"Warm paper ground, dark green-black ink, teal brand color, Georgia and Palatino serifs, slow 0.48 s beat. One 20-line CSS file that sets the 18 tokens the newer components read (palette, three fonts, radius, spacing, beat length, two eases). Read in full.","path":"themes/editorial.css","use":"Copy the :root block into a composition; components that read var(--bg), var(--brand) and so on pick it up. themes/CONTRACT.md lists the tokens.","needs":"System fonts only","takes":{"how":"tokens","what":["colors","type"],"line":"The token file itself: the same 18 custom properties as the neutral theme in one :root block (eight colors, three font stacks, radius, spacings, beat length, easings) with different values.","read":false}},{"id":"hyperframes/theme/neutral","name":"theme: neutral","kind":"html-video","job":"look","line":"Light gray ground, near-black ink, blue brand color, Inter throughout, 0.4 s beat. One 20-line CSS file that sets the 18 tokens the newer components read (palette, three fonts, radius, spacing, beat length, two eases). Read in full.","path":"themes/neutral.css","use":"Copy the :root block into a composition; components that read var(--bg), var(--brand) and so on pick it up. themes/CONTRACT.md lists the tokens.","needs":"System fonts only","takes":{"how":"tokens","what":["colors","type"],"line":"The token file itself: 18 custom properties in one :root block. Eight colors (--bg, --fg, --muted, --surface, --border, --brand, --accent, --accent-2), three font stacks (--font-display, --font-body, --font-mono), a radius, three spacings, a beat length and two easings. Copy the block and change…","read":true}},{"id":"hyperframes/frame-preset/biennale-yellow","name":"frame preset: biennale-yellow","kind":"template","job":"look","line":"Warm parchment, one deep indigo ink, solar yellow as bloom or panel, Instrument Serif with Archivo and JetBrains Mono, hairline rules, no shadows. A written design spec (FRAME.md) with a caption skin and a static showcase page.","path":"skills/hyperframes/assets/frame-presets/biennale-yellow","use":"Read FRAME.md as the look for a film; caption-skin.html is a working caption style in that look; frame-showcase.html shows sample frames.","needs":"Google Fonts for the named faces; GSAP from jsDelivr for the caption skin"},{"id":"hyperframes/frame-preset/blockframe","name":"frame preset: blockframe","kind":"template","job":"look","line":"4 px black borders, hard offset shadows, five candy pastels, Inter 800 uppercase with Space Grotesk labels, square corners, star bursts. A written design spec (FRAME.md) with a caption skin and a static showcase page.","path":"skills/hyperframes/assets/frame-presets/blockframe","use":"Read FRAME.md as the look for a film; caption-skin.html is a working caption style in that look; frame-showcase.html shows sample frames.","needs":"Google Fonts for the named faces; GSAP from jsDelivr for the caption skin"},{"id":"hyperframes/frame-preset/blue-professional","name":"frame preset: blue-professional","kind":"template","job":"look","line":"Warm cream canvas, one saturated cobalt accent, Space Grotesk and Inter, soft cobalt-tinted cards, pill labels, no shadows. A written design spec (FRAME.md) with a caption skin and a static showcase page.","path":"skills/hyperframes/assets/frame-presets/blue-professional","use":"Read FRAME.md as the look for a film; caption-skin.html is a working caption style in that look; frame-showcase.html shows sample frames.","needs":"Google Fonts for the named faces; GSAP from jsDelivr for the caption skin"},{"id":"hyperframes/frame-preset/bold-poster","name":"frame preset: bold-poster","kind":"template","job":"look","line":"White, brown-black, tomato red and off-white; Shrikhand display tilted at poster scale, Libre Baskerville body, double-border grid. A written design spec (FRAME.md) with a caption skin and a static showcase page.","path":"skills/hyperframes/assets/frame-presets/bold-poster","use":"Read FRAME.md as the look for a film; caption-skin.html is a working caption style in that look; frame-showcase.html shows sample frames.","needs":"Google Fonts for the named faces; GSAP from jsDelivr for the caption skin"},{"id":"hyperframes/frame-preset/broadside","name":"frame preset: broadside","kind":"template","job":"look","line":"Ink black and fire orange, huge lowercase Barlow 900, IBM Plex Mono labels, flat, hairline dividers. A written design spec (FRAME.md) with a caption skin and a static showcase page.","path":"skills/hyperframes/assets/frame-presets/broadside","use":"Read FRAME.md as the look for a film; caption-skin.html is a working caption style in that look; frame-showcase.html shows sample frames.","needs":"Google Fonts for the named faces; GSAP from jsDelivr for the caption skin"},{"id":"hyperframes/frame-preset/capsule","name":"frame preset: capsule","kind":"template","job":"look","line":"Pill shapes with a 2 px ink outline, sun-bleached cream, nine candy colors, Bodoni Moda with Space Grotesk, grain overlay. A written design spec (FRAME.md) with a caption skin and a static showcase page.","path":"skills/hyperframes/assets/frame-presets/capsule","use":"Read FRAME.md as the look for a film; caption-skin.html is a working caption style in that look; frame-showcase.html shows sample frames.","needs":"Google Fonts for the named faces; GSAP from jsDelivr for the caption skin"},{"id":"hyperframes/frame-preset/cartesian","name":"frame preset: cartesian","kind":"template","job":"look","line":"Five warm stone tones, Playfair Display with Inter, one taupe hairline as the only structure, compass-drawn rings, no fills. A written design spec (FRAME.md) with a caption skin and a static showcase page.","path":"skills/hyperframes/assets/frame-presets/cartesian","use":"Read FRAME.md as the look for a film; caption-skin.html is a working caption style in that look; frame-showcase.html shows sample frames.","needs":"Google Fonts for the named faces; GSAP from jsDelivr for the caption skin"},{"id":"hyperframes/frame-preset/cobalt-grid","name":"frame preset: cobalt-grid","kind":"template","job":"look","line":"Cream paper, electric cobalt as the only ink, a permanent graph-paper grid, Newsreader serif with DM Mono, pixel-glitch marks. A written design spec (FRAME.md) with a caption skin and a static showcase page.","path":"skills/hyperframes/assets/frame-presets/cobalt-grid","use":"Read FRAME.md as the look for a film; caption-skin.html is a working caption style in that look; frame-showcase.html shows sample frames.","needs":"Google Fonts for the named faces; GSAP from jsDelivr for the caption skin"},{"id":"hyperframes/frame-preset/code-editorial","name":"frame preset: code-editorial","kind":"template","job":"look","line":"Warm cream paper, a scarce terracotta coral, EB Garamond display, JetBrains Mono on a warm navy code surface, a coral spike mark. Very close to one well-known AI lab's house style; do not ship it as your own look. A written design spec (FRAME.md) with a caption skin and a static showcase page.","path":"skills/hyperframes/assets/frame-presets/code-editorial","use":"Read FRAME.md as the look for a film; caption-skin.html is a working caption style in that look; frame-showcase.html shows sample frames.","needs":"Google Fonts for the named faces; GSAP from jsDelivr for the caption skin"},{"id":"hyperframes/frame-preset/coral","name":"frame preset: coral","kind":"template","job":"look","line":"Coral, ink black and warm cream in hard splits, Bebas Neue uppercase, 45° hatch, big wallpaper numerals, no shadow, no radius. A written design spec (FRAME.md) with a caption skin and a static showcase page.","path":"skills/hyperframes/assets/frame-presets/coral","use":"Read FRAME.md as the look for a film; caption-skin.html is a working caption style in that look; frame-showcase.html shows sample frames.","needs":"Google Fonts for the named faces; GSAP from jsDelivr for the caption skin"},{"id":"hyperframes/frame-preset/creative-mode","name":"frame preset: creative-mode","kind":"template","job":"look","line":"Warm cream, 4 px ink borders, hard offset shadows, Archivo Black uppercase, JetBrains Mono labels, four accents. A written design spec (FRAME.md) with a caption skin and a static showcase page.","path":"skills/hyperframes/assets/frame-presets/creative-mode","use":"Read FRAME.md as the look for a film; caption-skin.html is a working caption style in that look; frame-showcase.html shows sample frames.","needs":"Google Fonts for the named faces; GSAP from jsDelivr for the caption skin"},{"id":"hyperframes/frame-preset/daisy-days","name":"frame preset: daisy-days","kind":"template","job":"look","line":"Sunny pastel garden palette with a coral accent, charcoal 3 px outlines, hard offset shadows, Fredoka with Quicksand, hand-drawn ornaments. A written design spec (FRAME.md) with a caption skin and a static showcase page.","path":"skills/hyperframes/assets/frame-presets/daisy-days","use":"Read FRAME.md as the look for a film; caption-skin.html is a working caption style in that look; frame-showcase.html shows sample frames.","needs":"Google Fonts for the named faces; GSAP from jsDelivr for the caption skin"},{"id":"hyperframes/frame-preset/editorial-forest","name":"frame preset: editorial-forest","kind":"template","job":"look","line":"Green, pink and cream, Source Serif 4 display with JetBrains Mono uppercase labels, flat paper, 2 px rules, a monogram stamp. A written design spec (FRAME.md) with a caption skin and a static showcase page.","path":"skills/hyperframes/assets/frame-presets/editorial-forest","use":"Read FRAME.md as the look for a film; caption-skin.html is a working caption style in that look; frame-showcase.html shows sample frames.","needs":"Google Fonts for the named faces; GSAP from jsDelivr for the caption skin"},{"id":"hyperframes/example/path-traced-3d","name":"Path-Traced 3D","kind":"three","job":"3d","line":"A three.js scene with a fast raster preview and an opt-in path-traced export, with three-gpu-pathtracer vendored beside it. In the examples folder but missing from registry.json. Manifest read; not run (path tracing wants a GPU).","path":"registry/examples/path-traced-3d","use":"`npx hyperframes init <folder> --example path-traced-3d`, or copy the folder.","needs":"Three.js; a GPU for the path-traced export; 1920×1080, 6 s"},{"id":"hyperframes/example/blank","name":"blank (starter)","kind":"template","job":"scene","line":"The default starter: one black 1920×1080 page with a title and an empty paused timeline. Ships inside the npm package. Tried: init --example blank made it, plus AGENTS.md and CLAUDE.md that point agents at the skills.","path":"packages/cli","use":"`npx hyperframes init <folder> --example blank --non-interactive --skip-skills`.","needs":"GSAP 3.15.0 from jsDelivr at render"},{"id":"hyperframes/deploy/aws-lambda","name":"deploy example: AWS Lambda + Step Functions","kind":"template","job":"render","line":"A SAM template that puts chunked rendering on AWS: one Lambda in three roles (plan, render chunk, assemble) run by a Step Functions map.","path":"examples/aws-lambda","use":"Follow its README with the `sam` CLI and bun.","needs":"An AWS account; bun; costs money"},{"id":"hyperframes/deploy/gcp-cloud-run","name":"deploy example: Google Cloud Run","kind":"template","job":"render","line":"Deploy and parity-test scripts for chunked rendering on Cloud Run with Cloud Workflows; the Terraform lives in the package.","path":"examples/gcp-cloud-run","use":"Follow its README.","needs":"A Google Cloud account; costs money"},{"id":"hyperframes/deploy/k8s-jobs","name":"deploy example: Dockerfile for Kubernetes, Cloud Run Jobs or ECS","kind":"template","job":"render","line":"A reference Dockerfile that bakes Node 22, bun, a Chrome headless shell, ffmpeg and the producer, about 2.8 GB unpacked. They do not publish the image; you build it. README head read; not built.","path":"examples/k8s-jobs","use":"`docker build -f examples/k8s-jobs/Dockerfile.example .` from the repo root.","needs":"Docker; 2.8 GB"}]},{"id":"remotion-skills","name":"Remotion Agent Skills","repo":"remotion-dev/skills","url":"https://github.com/remotion-dev/skills","commit":"a2824c67f8b4585c294a8101db9f9f0ad3c643f8","commit_date":"2026-11-05","licence":{"name":"No license stated (link only)","basis":"The repo has no LICENSE file, package.json has no license field and is marked private, the README has no license line, and none of the 13 SKILL.md front matters has a license field (they carry name, description and version 4.0.541 only).…","note":"No license is stated anywhere in the repo, so it is here by link only."},"kind":"skill","line":"Remotion's own thirteen agent skills: how to start, write, preview, caption, map, render and upgrade a Remotion video, written by the team that makes Remotion.","look_only":true,"get":{"command":"","note":"No license is stated anywhere in this repo, and Remotion's own license page does not mention it. So we describe it and link to it. Ask the Remotion team before you copy from it."},"needs":"A Remotion 4 project to use what they teach. Many of the rule files add another Remotion package. Maps need a Mapbox, MapTiler or Google key, and voiceover assumes an ElevenLabs key.","sends":"The files are text and send nothing. What they tell an agent to do does reach out: start Remotion Studio, search Remotion's docs online, add npm packages, and run Remotion's upgrade command, which also rewrites the installed skills.","seen":[{"line":"We tested its rule that motion must come from the frame number. It holds: a box moved by the frame sat exactly where it belonged on every frame, and the same move as a CSS animation had already finished by frame 6.","preview":{"video":"assets/asset-library/remotion-skills-frame-vs-css.mp4","poster":"assets/asset-library/remotion-skills-frame-vs-css-poster.jpg","w":1280,"h":720,"seconds":2}},{"line":"Every API its timing rule teaches is in Remotion 4.0.539."}],"not_seen":"Nothing was installed. The map techniques, Remotion Studio, voiceover and transcription were read, not run.","count":13,"kinds":{"skill":13},"assets":[{"id":"remotion-skills/remotion-best-practices","name":"remotion-best-practices","kind":"skill","job":"plan","line":"The router: one short page that sends an agent to the right Remotion skill for the task (new video, markup, maps, media, captions, app building, docs, license, upgrade). It also carries its own standing orders: do not overwrite edits the user made outside the chat, open Remotion Studio and keep it open before building, and do not render unless the user asks in so many words. Its folder holds a full copy of the other twelve skills as reference pages, which is why it is 147 of the repo's 299 files.","path":"skills/remotion-best-practices/SKILL.md","use":"","look_only":true},{"id":"remotion-skills/remotion-create","name":"remotion-create","kind":"skill","job":"scene","line":"Starting a new Remotion project or composition: scaffold with the create-video starter (blank, no Tailwind), open Studio straight away, then build. Rule files: video-layout (design for a video, not a web page: one thing to notice per scene, safe margins, minimum text sizes for a 1080-wide frame) and tailwind (only if Tailwind is already installed; never its transition or animate classes).","path":"skills/remotion-create/SKILL.md","use":"","look_only":true},{"id":"remotion-skills/remotion-markup","name":"remotion-markup","kind":"skill","job":"move","line":"The big one: how to write the React that makes the picture. Its own page covers driving all motion from the frame number with interpolate() and easing (CSS transitions and CSS animations do not render correctly), keeping the frame hook in the smallest component that needs it, working in seconds times fps, the media components, and a list of about ninety built-in visual effects. 33 rule files, notably: timing (spring and bezier easing inside interpolate, clamping, a scale option that looks even to the eye, several keyframes, reduced frame rate on purpose), timing-props and sequencing (start, trim, length, speed, loop, and the order they apply), transitions (TransitionSeries, overlays at a…","path":"skills/remotion-markup/SKILL.md","use":"","look_only":true,"preview":{"video":"assets/asset-library/remotion-skills-frame-vs-css.mp4","poster":"assets/asset-library/remotion-skills-frame-vs-css-poster.jpg","w":1280,"h":720,"seconds":2}},{"id":"remotion-skills/remotion-studio","name":"remotion-studio","kind":"skill","job":"review","line":"Launching Remotion Studio to preview a video: when to let it open the browser itself and when to print the address for an in-app browser, plus three useful flags (log level, port, force a second instance). It tells the agent to start Studio before building and keep it running.","path":"skills/remotion-studio/SKILL.md","use":"","look_only":true},{"id":"remotion-skills/remotion-render","name":"remotion-render","kind":"skill","job":"render","line":"Exporting: the commands for a video, a still, and several chosen frames as images in one call. It tells the agent to use the browser Remotion ships and let Remotion download or update it, and not to point at another browser unless asked. Rule file: transparent-videos (settings for ProRes 4444 with alpha for an editing program, and WebM with alpha for a web page).","path":"skills/remotion-render/SKILL.md","use":"","look_only":true},{"id":"remotion-skills/remotion-maps","name":"remotion-maps","kind":"skill","job":"map","line":"Map animation, with five techniques to choose one from: a static map image with things drawn over it; Mapbox (needs a key; globe and 3D buildings); MapLibre (no key); MapTiler (needs a key; borders, rivers and labels drawn as annotations, with a prepared river-reveal example and a geography prep script); and CesiumJS fly-throughs over terrain or Google's photorealistic 3D cities (needs MapTiler or Google keys with billing). Shared rules: keep the map camera still or move a fixed map plate, hold each frame until the map is idle, check the rendered pixels and not just the preview, keep the provider's attribution on screen.","path":"skills/remotion-maps/SKILL.md","use":"","look_only":true},{"id":"remotion-skills/remotion-captions","name":"remotion-captions","kind":"skill","job":"caption","line":"Captions and subtitles around one JSON shape for a caption (text, start, end, optional confidence). Rule files: transcribe-captions (run Whisper locally on a GPU through Remotion's own package; it says this does not work on Linux arm64), display-captions (fetch Remotion's ready-made Basic Captions element from its site and copy it in unchanged), import-srt-captions (read an existing .srt file).","path":"skills/remotion-captions/SKILL.md","use":"","look_only":true},{"id":"remotion-skills/remotion-interactivity","name":"remotion-interactivity","kind":"skill","job":"edit","line":"How to write Remotion code so a person can select, move, trim, restyle and keyframe things by hand in Remotion Studio and have the change written back to the source. It asks for named interactive wrappers around elements, every style and every interpolate() written inline with literal values, no shared constants, no spreading, no maths on variables, separate scale, translate and rotate properties, and composition settings written inline. Rule files: timeline-structure (what should be one editable unit; tracks against a transition series against a shared sequence) and inline-effects.","path":"skills/remotion-interactivity/SKILL.md","use":"","look_only":true},{"id":"remotion-skills/remotion-saas","name":"remotion-saas","kind":"skill","job":"publish","line":"Building an app on Remotion. Rule files: framework (which of Remotion's starter templates to begin from), player (embedding a live preview in a React app), rendering (choosing between a Node render server, AWS Lambda with its nine set-up steps, Vercel, GitHub Actions, Azure and Cloudflare; never ask the user to paste secrets into chat).","path":"skills/remotion-saas/SKILL.md","use":"","look_only":true},{"id":"remotion-skills/remotion-docs","name":"remotion-docs","kind":"skill","job":"reference","line":"How to look things up in Remotion's documentation: a search request to the docs' hosted search service (the page includes that service's public search key), then fetch any docs page as plain Markdown by adding .md to its address. It tells the agent to build from the current docs and not from memory.","path":"skills/remotion-docs/SKILL.md","use":"","look_only":true},{"id":"remotion-skills/remotion-license","name":"remotion-license","kind":"skill","job":"reference","line":"Four links: Remotion's license page, its license FAQ, its terms, and where to buy a company license. It states no terms itself and says nothing about the license of the skills.","path":"skills/remotion-license/SKILL.md","use":"","look_only":true},{"id":"remotion-skills/remotion-upgrade","name":"remotion-upgrade","kind":"skill","job":"maintain","line":"Upgrading Remotion: run Remotion's own upgrade command, which also updates the installed skills; or, by hand, move every Remotion package to one exact version, line up the helper packages Remotion Studio expects, and then update all thirteen skills by name.","path":"skills/remotion-upgrade/SKILL.md","use":"","look_only":true},{"id":"remotion-skills/remotion-multimedia","name":"remotion-multimedia","kind":"skill","job":"edit","line":"Reading facts about media files with the Mediabunny library, in a browser, Node or Bun. Rule files: get-audio-duration, get-video-duration, get-video-dimensions (each a short helper), plus a pointer to Mediabunny's own summary page.","path":"skills/remotion-multimedia/SKILL.md","use":"","look_only":true}]},{"id":"openmontage","name":"OpenMontage","repo":"OpenMontageInc/OpenMontage","url":"https://github.com/OpenMontageInc/OpenMontage","commit":"356b5fa92474998c9f9a0782fd5547d05837d284","commit_date":"2026-11-07","licence":{"name":"AGPL-3.0","basis":"LICENSE file: the full text of the GNU Affero General Public License version 3. README: 'GNU AGPLv3', with a badge. CONTRIBUTING.md: no contributor agreement; contributions must be compatible with AGPLv3 and stay under it. The LICENSE…","note":"You are free to run it. Code built on it has to be shared under the same license, so it is here by link only."},"kind":"tool","line":"A whole video production system with no engine of its own. A coding agent reads its pipeline manifests and stage skills, calls its 163 Python tools, checks its own work and stops for your approval, from research to a rendered video.","look_only":true,"get":{"command":"","note":"You are free to run it. Code you build on it has to be shared under the same license, so we describe it and link to it, and copy none of it."},"needs":"Python 3.10, FFmpeg, Node 22 and a coding agent to drive it. Nearly everything generative needs a key: its example settings file names about 50 keys and settings across image, video, voice and music services.","sends":"We found no telemetry. It reads a .env file, starts a local web board and opens your browser, and calls whichever outside services you have given it keys for. That is the point of 125 of its 163 tools.","seen":[{"line":"With no keys at all, its own registry reported 36 of 163 tools available."},{"line":"Its zero-key Remotion demo rendered: a title card, a big-number card, a bar chart and a pie chart."},{"line":"Its slideshow check told eight identical text cards to revise and scored a varied plan strong."}],"not_seen":"No pipeline was run end to end. The 125 keyed tools were read, not run.","count":526,"kinds":{"skill":238,"tool":196,"template":30,"remotion":28,"html-video":15,"three":11,"gsap":8},"assets":[{"id":"openmontage/pipeline-animated-explainer","name":"animated-explainer","kind":"skill","job":"whole video","line":"An explainer made from a topic alone: researched, scripted, narrated, illustrated, scored and rendered. Stages: research, proposal (waits for approval), script (waits for approval), scene_plan (waits for approval), assets (waits for approval), edit, compose, publish (waits for approval). Needs a speech provider and an image source at the assets stage. Free route: Piper speech (installed by make setup) plus a free stock key; otherwise paid image and voice keys. Its 10 stage-director skills are in skills/pipelines/explainer/.","path":"pipeline_defs/animated-explainer.yaml","use":"","needs":"Needs a speech provider and an image source at the assets stage. Free route: Piper speech (installed by make setup) plus a free stock key; otherwise paid image and voice keys.","look_only":true},{"id":"openmontage/pipeline-animation","name":"animation","kind":"skill","job":"whole video","line":"Motion graphics: kinetic type, diagram-led explainers, maths visuals, three.js worlds, stylized sequences. Stages: research, proposal (waits for approval), script (waits for approval), scene_plan (waits for approval), assets (waits for approval), edit, compose, publish (waits for approval). No asset tool is required, so it can run with only the local render paths (Remotion or HyperFrames); narration, generated images, Manim, 3D and music are optional extras that need their own keys or installs. Its 10 stage-director skills are in skills/pipelines/animation/.","path":"pipeline_defs/animation.yaml","use":"","needs":"No asset tool is required, so it can run with only the local render paths (Remotion or HyperFrames); narration, generated images, Manim, 3D and music are optional extras that need their own keys or installs.","look_only":true},{"id":"openmontage/pipeline-avatar-spokesperson","name":"avatar-spokesperson","kind":"skill","job":"whole video","line":"A presenter-led video with a digital presenter and simple support graphics. Stages: idea (waits for approval), script (waits for approval), scene_plan (waits for approval), assets (waits for approval), edit, compose, publish (waits for approval). Needs an avatar source: a HeyGen key, or the local talking-head and lip-sync tools on a GPU. Nothing in it runs presenter-free. Its 8 stage-director skills are in skills/pipelines/avatar-spokesperson/.","path":"pipeline_defs/avatar-spokesperson.yaml","use":"","needs":"Needs an avatar source: a HeyGen key, or the local talking-head and lip-sync tools on a GPU. Nothing in it runs presenter-free.","look_only":true},{"id":"openmontage/pipeline-character-animation","name":"character-animation","kind":"skill","job":"whole video","line":"Reusable 2D cartoon characters: character design, rig, pose library, action timeline, rendered in a browser. Marked beta. Stages: research, proposal (waits for approval), script (waits for approval), character_design (waits for approval), rig_plan, scene_plan (waits for approval), assets (waits for approval), edit, compose, publish (waits for approval). Its six character tools are local and were available on our trial box with no keys. Voice and music are optional. Its 11 stage-director skills are in skills/pipelines/character-animation/.","path":"pipeline_defs/character-animation.yaml","use":"","needs":"Its six character tools are local and were available on our trial box with no keys. Voice and music are optional.","look_only":true},{"id":"openmontage/pipeline-cinematic","name":"cinematic","kind":"skill","job":"whole video","line":"Trailers, brand films, montages and 3D fly-throughs, led by mood. Stages: research, proposal (waits for approval), script (waits for approval), scene_plan (waits for approval), assets (waits for approval), edit, compose, publish (waits for approval). Works from footage and stills you supply with local tools only; generated inserts, 3D and music generation need keys. Its 10 stage-director skills are in skills/pipelines/cinematic/.","path":"pipeline_defs/cinematic.yaml","use":"","needs":"Works from footage and stills you supply with local tools only; generated inserts, 3D and music generation need keys.","look_only":true},{"id":"openmontage/pipeline-clip-factory","name":"clip-factory","kind":"skill","job":"whole video","line":"Many short clips cut from one long recording, ranked and captioned. Marked beta. Stages: idea (waits for approval), script (waits for approval), scene_plan (waits for approval), assets (waits for approval), edit, compose, publish (waits for approval). Local once the transcriber's speech-to-text package is installed (make setup does not install it; it was unavailable on our trial box), or with a cloud transcription key. Its 8 stage-director skills are in skills/pipelines/clip-factory/.","path":"pipeline_defs/clip-factory.yaml","use":"","needs":"Local once the transcriber's speech-to-text package is installed (make setup does not install it; it was unavailable on our trial box), or with a cloud transcription key.","look_only":true},{"id":"openmontage/pipeline-documentary-montage","name":"documentary-montage","kind":"skill","job":"whole video","line":"A montage cut from real footage found in free stock and open archives, chosen by meaning with CLIP. Marked beta. Stages: idea (waits for approval), scene_plan (waits for approval), assets (waits for approval), edit (waits for approval), compose. No paid keys: Archive.org, NASA and Wikimedia need none; Pexels, Pixabay and Unsplash keys are free. Needs the network, and the CLIP search needs a model download and extra Python packages that were missing on our trial box. Its 6 stage-director skills are in skills/pipelines/documentary-montage/.","path":"pipeline_defs/documentary-montage.yaml","use":"","needs":"No paid keys: Archive.org, NASA and Wikimedia need none; Pexels, Pixabay and Unsplash keys are free. Needs the network, and the CLIP search needs a model download and extra Python packages that were missing on our trial box.","look_only":true},{"id":"openmontage/pipeline-framework-smoke","name":"framework-smoke","kind":"skill","job":"whole video","line":"A two-stage test manifest that exercises the pipeline machinery. Not for making a video. Stages: research (waits for approval), script (waits for approval).","path":"pipeline_defs/framework-smoke.yaml","use":"","look_only":true},{"id":"openmontage/pipeline-hybrid","name":"hybrid","kind":"skill","job":"whole video","line":"Your own footage combined with designed or generated support graphics. Stages: idea (waits for approval), script (waits for approval), scene_plan (waits for approval), assets (waits for approval), edit, compose, publish (waits for approval). Local with supplied footage; narration, generated images and music need keys. Its 8 stage-director skills are in skills/pipelines/hybrid/.","path":"pipeline_defs/hybrid.yaml","use":"","needs":"Local with supplied footage; narration, generated images and music need keys.","look_only":true},{"id":"openmontage/pipeline-localization-dub","name":"localization-dub","kind":"skill","job":"whole video","line":"Translated subtitles and dubbed audio for an existing video, optionally with lips re-synced. Marked beta. Stages: idea (waits for approval), script (waits for approval), scene_plan (waits for approval), assets (waits for approval), edit, compose, publish (waits for approval). Needs the transcriber and a speech provider. Piper is free but limited; other languages want a cloud voice key. Lip sync needs a GPU or a paid service. Its 8 stage-director skills are in skills/pipelines/localization-dub/.","path":"pipeline_defs/localization-dub.yaml","use":"","needs":"Needs the transcriber and a speech provider. Piper is free but limited; other languages want a cloud voice key. Lip sync needs a GPU or a paid service.","look_only":true},{"id":"openmontage/pipeline-podcast-repurpose","name":"podcast-repurpose","kind":"skill","job":"whole video","line":"Audiograms, caption-led clips and quote cards from a podcast episode. Marked beta. Stages: idea (waits for approval), script (waits for approval), scene_plan (waits for approval), assets (waits for approval), edit, compose, publish (waits for approval). Local once the transcriber is installed; images and music are optional and keyed. Its 8 stage-director skills are in skills/pipelines/podcast-repurpose/.","path":"pipeline_defs/podcast-repurpose.yaml","use":"","needs":"Local once the transcriber is installed; images and music are optional and keyed.","look_only":true},{"id":"openmontage/pipeline-screen-demo","name":"screen-demo","kind":"skill","job":"whole video","line":"A polished software demo, from a real screen capture or from fake terminal scenes that need no capture at all. Stages: idea (waits for approval), script (waits for approval), scene_plan (waits for approval), assets (waits for approval), edit, compose, publish (waits for approval). Local. Real capture uses FFmpeg or the Cap app; the script stage wants the transcriber for recorded narration. Its 8 stage-director skills are in skills/pipelines/screen-demo/.","path":"pipeline_defs/screen-demo.yaml","use":"","needs":"Local. Real capture uses FFmpeg or the Cap app; the script stage wants the transcriber for recorded narration.","look_only":true},{"id":"openmontage/pipeline-talking-head","name":"talking-head","kind":"skill","job":"whole video","line":"An edit of someone speaking to camera: transcribed, cut, captioned, mixed. Marked beta. Stages: idea (waits for approval), script (waits for approval), scene_plan (waits for approval), assets (waits for approval), edit, compose, publish (waits for approval). Local once the transcriber is installed. The optional face tools need MediaPipe. Its 8 stage-director skills are in skills/pipelines/talking-head/.","path":"pipeline_defs/talking-head.yaml","use":"","needs":"Local once the transcriber is installed. The optional face tools need MediaPipe.","look_only":true},{"id":"openmontage/director-animation-asset-director","name":"animation/asset-director","kind":"skill","job":"scene","line":"How the agent runs the assets stage of the animation pipeline. The stage hands on the list of assets made or found. Stops for the person's approval.","path":"skills/pipelines/animation/asset-director.md","use":"","look_only":true},{"id":"openmontage/director-animation-compose-director","name":"animation/compose-director","kind":"skill","job":"render","line":"How the agent runs the compose stage of the animation pipeline. The stage hands on a render report, a review of the finished render. No approval stop by default.","path":"skills/pipelines/animation/compose-director.md","use":"","look_only":true},{"id":"openmontage/director-animation-edit-director","name":"animation/edit-director","kind":"skill","job":"edit","line":"How the agent runs the edit stage of the animation pipeline. The stage hands on the edit-decision file. No approval stop by default.","path":"skills/pipelines/animation/edit-director.md","use":"","look_only":true},{"id":"openmontage/director-animation-executive-producer","name":"animation/executive-producer","kind":"skill","job":"plan","line":"The orchestrator skill for the animation pipeline: runs the stages in order, sends work back for another pass, and holds the budget (default budget $2.00, at most 3 revisions per stage, a 15-minute time limit).","path":"skills/pipelines/animation/executive-producer.md","use":"","look_only":true},{"id":"openmontage/director-animation-idea-director","name":"animation/idea-director","kind":"skill","job":"plan","line":"A director skill in the animation pipeline's folder that no stage in the current manifest names; kept from an earlier layout.","path":"skills/pipelines/animation/idea-director.md","use":"","look_only":true},{"id":"openmontage/director-animation-proposal-director","name":"animation/proposal-director","kind":"skill","job":"plan","line":"How the agent runs the proposal stage of the animation pipeline. The stage hands on a proposal with concept options and costs, the decision log. Stops for the person's approval.","path":"skills/pipelines/animation/proposal-director.md","use":"","look_only":true},{"id":"openmontage/director-animation-publish-director","name":"animation/publish-director","kind":"skill","job":"publish","line":"How the agent runs the publish stage of the animation pipeline. The stage hands on a publish log. Stops for the person's approval.","path":"skills/pipelines/animation/publish-director.md","use":"","look_only":true},{"id":"openmontage/director-animation-research-director","name":"animation/research-director","kind":"skill","job":"plan","line":"How the agent runs the research stage of the animation pipeline. The stage hands on a research brief. No approval stop by default.","path":"skills/pipelines/animation/research-director.md","use":"","look_only":true},{"id":"openmontage/director-animation-scene-director","name":"animation/scene-director","kind":"skill","job":"plan","line":"How the agent runs the scene_plan stage of the animation pipeline. The stage hands on the scene plan. Stops for the person's approval.","path":"skills/pipelines/animation/scene-director.md","use":"","look_only":true},{"id":"openmontage/director-animation-script-director","name":"animation/script-director","kind":"skill","job":"plan","line":"How the agent runs the script stage of the animation pipeline. The stage hands on the script. Stops for the person's approval.","path":"skills/pipelines/animation/script-director.md","use":"","look_only":true},{"id":"openmontage/director-avatar-spokesperson-asset-director","name":"avatar-spokesperson/asset-director","kind":"skill","job":"scene","line":"How the agent runs the assets stage of the avatar-spokesperson pipeline. The stage hands on the list of assets made or found. Stops for the person's approval.","path":"skills/pipelines/avatar-spokesperson/asset-director.md","use":"","look_only":true},{"id":"openmontage/director-avatar-spokesperson-compose-director","name":"avatar-spokesperson/compose-director","kind":"skill","job":"render","line":"How the agent runs the compose stage of the avatar-spokesperson pipeline. The stage hands on a render report, a review of the finished render. No approval stop by default.","path":"skills/pipelines/avatar-spokesperson/compose-director.md","use":"","look_only":true},{"id":"openmontage/director-avatar-spokesperson-edit-director","name":"avatar-spokesperson/edit-director","kind":"skill","job":"edit","line":"How the agent runs the edit stage of the avatar-spokesperson pipeline. The stage hands on the edit-decision file. No approval stop by default.","path":"skills/pipelines/avatar-spokesperson/edit-director.md","use":"","look_only":true},{"id":"openmontage/director-avatar-spokesperson-executive-producer","name":"avatar-spokesperson/executive-producer","kind":"skill","job":"plan","line":"The orchestrator skill for the avatar-spokesperson pipeline: runs the stages in order, sends work back for another pass, and holds the budget (default budget $2.00, at most 3 revisions per stage, a 12-minute time limit).","path":"skills/pipelines/avatar-spokesperson/executive-producer.md","use":"","look_only":true},{"id":"openmontage/director-avatar-spokesperson-idea-director","name":"avatar-spokesperson/idea-director","kind":"skill","job":"plan","line":"How the agent runs the idea stage of the avatar-spokesperson pipeline. The stage hands on the brief, the decision log. Stops for the person's approval.","path":"skills/pipelines/avatar-spokesperson/idea-director.md","use":"","look_only":true},{"id":"openmontage/director-avatar-spokesperson-publish-director","name":"avatar-spokesperson/publish-director","kind":"skill","job":"publish","line":"How the agent runs the publish stage of the avatar-spokesperson pipeline. The stage hands on a publish log. Stops for the person's approval.","path":"skills/pipelines/avatar-spokesperson/publish-director.md","use":"","look_only":true},{"id":"openmontage/director-avatar-spokesperson-scene-director","name":"avatar-spokesperson/scene-director","kind":"skill","job":"plan","line":"How the agent runs the scene_plan stage of the avatar-spokesperson pipeline. The stage hands on the scene plan. Stops for the person's approval.","path":"skills/pipelines/avatar-spokesperson/scene-director.md","use":"","look_only":true},{"id":"openmontage/director-avatar-spokesperson-script-director","name":"avatar-spokesperson/script-director","kind":"skill","job":"plan","line":"How the agent runs the script stage of the avatar-spokesperson pipeline. The stage hands on the script. Stops for the person's approval.","path":"skills/pipelines/avatar-spokesperson/script-director.md","use":"","look_only":true},{"id":"openmontage/director-character-animation-asset-director","name":"character-animation/asset-director","kind":"skill","job":"scene","line":"How the agent runs the assets stage of the character-animation pipeline. The stage hands on the list of assets made or found. Stops for the person's approval.","path":"skills/pipelines/character-animation/asset-director.md","use":"","look_only":true},{"id":"openmontage/director-character-animation-character-design-director","name":"character-animation/character-design-director","kind":"skill","job":"rig","line":"How the agent runs the character_design stage of the character-animation pipeline. The stage hands on the character design. Stops for the person's approval.","path":"skills/pipelines/character-animation/character-design-director.md","use":"","look_only":true},{"id":"openmontage/director-character-animation-compose-director","name":"character-animation/compose-director","kind":"skill","job":"render","line":"How the agent runs the compose stage of the character-animation pipeline. The stage hands on a render report, a review of the finished render, a character QA report. No approval stop by default.","path":"skills/pipelines/character-animation/compose-director.md","use":"","look_only":true},{"id":"openmontage/director-character-animation-edit-director","name":"character-animation/edit-director","kind":"skill","job":"edit","line":"How the agent runs the edit stage of the character-animation pipeline. The stage hands on the edit-decision file, the action timeline. No approval stop by default.","path":"skills/pipelines/character-animation/edit-director.md","use":"","look_only":true},{"id":"openmontage/director-character-animation-executive-producer","name":"character-animation/executive-producer","kind":"skill","job":"plan","line":"The orchestrator skill for the character-animation pipeline: runs the stages in order, sends work back for another pass, and holds the budget (default budget $2.00, at most 3 revisions per stage, a 20-minute time limit).","path":"skills/pipelines/character-animation/executive-producer.md","use":"","look_only":true},{"id":"openmontage/director-character-animation-proposal-director","name":"character-animation/proposal-director","kind":"skill","job":"plan","line":"How the agent runs the proposal stage of the character-animation pipeline. The stage hands on a proposal with concept options and costs, the decision log. Stops for the person's approval.","path":"skills/pipelines/character-animation/proposal-director.md","use":"","look_only":true},{"id":"openmontage/director-character-animation-publish-director","name":"character-animation/publish-director","kind":"skill","job":"publish","line":"How the agent runs the publish stage of the character-animation pipeline. The stage hands on a publish log. Stops for the person's approval.","path":"skills/pipelines/character-animation/publish-director.md","use":"","look_only":true},{"id":"openmontage/director-character-animation-research-director","name":"character-animation/research-director","kind":"skill","job":"plan","line":"How the agent runs the research stage of the character-animation pipeline. The stage hands on a research brief. No approval stop by default.","path":"skills/pipelines/character-animation/research-director.md","use":"","look_only":true},{"id":"openmontage/director-character-animation-rig-plan-director","name":"character-animation/rig-plan-director","kind":"skill","job":"rig","line":"How the agent runs the rig_plan stage of the character-animation pipeline. The stage hands on the rig plan, the pose library. No approval stop by default.","path":"skills/pipelines/character-animation/rig-plan-director.md","use":"","look_only":true},{"id":"openmontage/director-character-animation-scene-director","name":"character-animation/scene-director","kind":"skill","job":"plan","line":"How the agent runs the scene_plan stage of the character-animation pipeline. The stage hands on the scene plan. Stops for the person's approval.","path":"skills/pipelines/character-animation/scene-director.md","use":"","look_only":true},{"id":"openmontage/director-character-animation-script-director","name":"character-animation/script-director","kind":"skill","job":"plan","line":"How the agent runs the script stage of the character-animation pipeline. The stage hands on the script. Stops for the person's approval.","path":"skills/pipelines/character-animation/script-director.md","use":"","look_only":true},{"id":"openmontage/director-cinematic-asset-director","name":"cinematic/asset-director","kind":"skill","job":"scene","line":"How the agent runs the assets stage of the cinematic pipeline. The stage hands on the list of assets made or found. Stops for the person's approval.","path":"skills/pipelines/cinematic/asset-director.md","use":"","look_only":true},{"id":"openmontage/director-cinematic-compose-director","name":"cinematic/compose-director","kind":"skill","job":"render","line":"How the agent runs the compose stage of the cinematic pipeline. The stage hands on a render report, a review of the finished render. No approval stop by default.","path":"skills/pipelines/cinematic/compose-director.md","use":"","look_only":true},{"id":"openmontage/director-cinematic-edit-director","name":"cinematic/edit-director","kind":"skill","job":"edit","line":"How the agent runs the edit stage of the cinematic pipeline. The stage hands on the edit-decision file. No approval stop by default.","path":"skills/pipelines/cinematic/edit-director.md","use":"","look_only":true},{"id":"openmontage/director-cinematic-executive-producer","name":"cinematic/executive-producer","kind":"skill","job":"plan","line":"The orchestrator skill for the cinematic pipeline: runs the stages in order, sends work back for another pass, and holds the budget (default budget $2.00, at most 3 revisions per stage, a 12-minute time limit).","path":"skills/pipelines/cinematic/executive-producer.md","use":"","look_only":true},{"id":"openmontage/director-cinematic-idea-director","name":"cinematic/idea-director","kind":"skill","job":"plan","line":"A director skill in the cinematic pipeline's folder that no stage in the current manifest names; kept from an earlier layout.","path":"skills/pipelines/cinematic/idea-director.md","use":"","look_only":true},{"id":"openmontage/director-cinematic-proposal-director","name":"cinematic/proposal-director","kind":"skill","job":"plan","line":"How the agent runs the proposal stage of the cinematic pipeline. The stage hands on a proposal with concept options and costs, the decision log. Stops for the person's approval.","path":"skills/pipelines/cinematic/proposal-director.md","use":"","look_only":true},{"id":"openmontage/director-cinematic-publish-director","name":"cinematic/publish-director","kind":"skill","job":"publish","line":"How the agent runs the publish stage of the cinematic pipeline. The stage hands on a publish log. Stops for the person's approval.","path":"skills/pipelines/cinematic/publish-director.md","use":"","look_only":true},{"id":"openmontage/director-cinematic-research-director","name":"cinematic/research-director","kind":"skill","job":"plan","line":"How the agent runs the research stage of the cinematic pipeline. The stage hands on a research brief. No approval stop by default.","path":"skills/pipelines/cinematic/research-director.md","use":"","look_only":true},{"id":"openmontage/director-cinematic-scene-director","name":"cinematic/scene-director","kind":"skill","job":"plan","line":"How the agent runs the scene_plan stage of the cinematic pipeline. The stage hands on the scene plan. Stops for the person's approval.","path":"skills/pipelines/cinematic/scene-director.md","use":"","look_only":true},{"id":"openmontage/director-cinematic-script-director","name":"cinematic/script-director","kind":"skill","job":"plan","line":"How the agent runs the script stage of the cinematic pipeline. The stage hands on the script. Stops for the person's approval.","path":"skills/pipelines/cinematic/script-director.md","use":"","look_only":true},{"id":"openmontage/director-clip-factory-asset-director","name":"clip-factory/asset-director","kind":"skill","job":"scene","line":"How the agent runs the assets stage of the clip-factory pipeline. The stage hands on the list of assets made or found. Stops for the person's approval.","path":"skills/pipelines/clip-factory/asset-director.md","use":"","look_only":true},{"id":"openmontage/director-clip-factory-compose-director","name":"clip-factory/compose-director","kind":"skill","job":"render","line":"How the agent runs the compose stage of the clip-factory pipeline. The stage hands on a render report, a review of the finished render. No approval stop by default.","path":"skills/pipelines/clip-factory/compose-director.md","use":"","look_only":true},{"id":"openmontage/director-clip-factory-edit-director","name":"clip-factory/edit-director","kind":"skill","job":"edit","line":"How the agent runs the edit stage of the clip-factory pipeline. The stage hands on the edit-decision file. No approval stop by default.","path":"skills/pipelines/clip-factory/edit-director.md","use":"","look_only":true},{"id":"openmontage/director-clip-factory-executive-producer","name":"clip-factory/executive-producer","kind":"skill","job":"plan","line":"The orchestrator skill for the clip-factory pipeline: runs the stages in order, sends work back for another pass, and holds the budget (default budget $1.00, at most 3 revisions per stage, a 12-minute time limit).","path":"skills/pipelines/clip-factory/executive-producer.md","use":"","look_only":true},{"id":"openmontage/director-clip-factory-idea-director","name":"clip-factory/idea-director","kind":"skill","job":"plan","line":"How the agent runs the idea stage of the clip-factory pipeline. The stage hands on the brief, the decision log. Stops for the person's approval.","path":"skills/pipelines/clip-factory/idea-director.md","use":"","look_only":true},{"id":"openmontage/director-clip-factory-publish-director","name":"clip-factory/publish-director","kind":"skill","job":"publish","line":"How the agent runs the publish stage of the clip-factory pipeline. The stage hands on a publish log. Stops for the person's approval.","path":"skills/pipelines/clip-factory/publish-director.md","use":"","look_only":true},{"id":"openmontage/director-clip-factory-scene-director","name":"clip-factory/scene-director","kind":"skill","job":"plan","line":"How the agent runs the scene_plan stage of the clip-factory pipeline. The stage hands on the scene plan. Stops for the person's approval.","path":"skills/pipelines/clip-factory/scene-director.md","use":"","look_only":true},{"id":"openmontage/director-clip-factory-script-director","name":"clip-factory/script-director","kind":"skill","job":"plan","line":"How the agent runs the script stage of the clip-factory pipeline. The stage hands on the script. Stops for the person's approval.","path":"skills/pipelines/clip-factory/script-director.md","use":"","look_only":true},{"id":"openmontage/director-documentary-montage-asset-director","name":"documentary-montage/asset-director","kind":"skill","job":"scene","line":"How the agent runs the assets stage of the documentary-montage pipeline. The stage hands on the list of assets made or found. Stops for the person's approval.","path":"skills/pipelines/documentary-montage/asset-director.md","use":"","look_only":true},{"id":"openmontage/director-documentary-montage-compose-director","name":"documentary-montage/compose-director","kind":"skill","job":"render","line":"How the agent runs the compose stage of the documentary-montage pipeline. The stage hands on a render report. No approval stop by default.","path":"skills/pipelines/documentary-montage/compose-director.md","use":"","look_only":true},{"id":"openmontage/director-documentary-montage-edit-director","name":"documentary-montage/edit-director","kind":"skill","job":"edit","line":"How the agent runs the edit stage of the documentary-montage pipeline. The stage hands on the edit-decision file. Stops for the person's approval.","path":"skills/pipelines/documentary-montage/edit-director.md","use":"","look_only":true},{"id":"openmontage/director-documentary-montage-executive-producer","name":"documentary-montage/executive-producer","kind":"skill","job":"plan","line":"The orchestrator skill for the documentary-montage pipeline: runs the stages in order, sends work back for another pass, and holds the budget (default budget $1.00, at most 3 revisions per stage, a 60-minute time limit).","path":"skills/pipelines/documentary-montage/executive-producer.md","use":"","look_only":true},{"id":"openmontage/director-documentary-montage-idea-director","name":"documentary-montage/idea-director","kind":"skill","job":"plan","line":"How the agent runs the idea stage of the documentary-montage pipeline. The stage hands on the brief. Stops for the person's approval.","path":"skills/pipelines/documentary-montage/idea-director.md","use":"","look_only":true},{"id":"openmontage/director-documentary-montage-scene-director","name":"documentary-montage/scene-director","kind":"skill","job":"plan","line":"How the agent runs the scene_plan stage of the documentary-montage pipeline. The stage hands on the scene plan. Stops for the person's approval.","path":"skills/pipelines/documentary-montage/scene-director.md","use":"","look_only":true},{"id":"openmontage/director-explainer-asset-director","name":"explainer/asset-director","kind":"skill","job":"scene","line":"How the agent runs the assets stage of the animated-explainer pipeline. The stage hands on the list of assets made or found. Stops for the person's approval.","path":"skills/pipelines/explainer/asset-director.md","use":"","look_only":true},{"id":"openmontage/director-explainer-compose-director","name":"explainer/compose-director","kind":"skill","job":"render","line":"How the agent runs the compose stage of the animated-explainer pipeline. The stage hands on a render report, a review of the finished render. No approval stop by default.","path":"skills/pipelines/explainer/compose-director.md","use":"","look_only":true},{"id":"openmontage/director-explainer-edit-director","name":"explainer/edit-director","kind":"skill","job":"edit","line":"How the agent runs the edit stage of the animated-explainer pipeline. The stage hands on the edit-decision file. No approval stop by default.","path":"skills/pipelines/explainer/edit-director.md","use":"","look_only":true},{"id":"openmontage/director-explainer-executive-producer","name":"explainer/executive-producer","kind":"skill","job":"plan","line":"The orchestrator skill for the animated-explainer pipeline: runs the stages in order, sends work back for another pass, and holds the budget (default budget $2.00, at most 3 revisions per stage, a 20-minute time limit).","path":"skills/pipelines/explainer/executive-producer.md","use":"","look_only":true},{"id":"openmontage/director-explainer-idea-director","name":"explainer/idea-director","kind":"skill","job":"plan","line":"A director skill in the animated-explainer pipeline's folder that no stage in the current manifest names; kept from an earlier layout.","path":"skills/pipelines/explainer/idea-director.md","use":"","look_only":true},{"id":"openmontage/director-explainer-proposal-director","name":"explainer/proposal-director","kind":"skill","job":"plan","line":"How the agent runs the proposal stage of the animated-explainer pipeline. The stage hands on a proposal with concept options and costs, the decision log. Stops for the person's approval.","path":"skills/pipelines/explainer/proposal-director.md","use":"","look_only":true},{"id":"openmontage/director-explainer-publish-director","name":"explainer/publish-director","kind":"skill","job":"publish","line":"How the agent runs the publish stage of the animated-explainer pipeline. The stage hands on a publish log. Stops for the person's approval.","path":"skills/pipelines/explainer/publish-director.md","use":"","look_only":true},{"id":"openmontage/director-explainer-research-director","name":"explainer/research-director","kind":"skill","job":"plan","line":"How the agent runs the research stage of the animated-explainer pipeline. The stage hands on a research brief. No approval stop by default.","path":"skills/pipelines/explainer/research-director.md","use":"","look_only":true},{"id":"openmontage/director-explainer-scene-director","name":"explainer/scene-director","kind":"skill","job":"plan","line":"How the agent runs the scene_plan stage of the animated-explainer pipeline. The stage hands on the scene plan. Stops for the person's approval.","path":"skills/pipelines/explainer/scene-director.md","use":"","look_only":true},{"id":"openmontage/director-explainer-script-director","name":"explainer/script-director","kind":"skill","job":"plan","line":"How the agent runs the script stage of the animated-explainer pipeline. The stage hands on the script. Stops for the person's approval.","path":"skills/pipelines/explainer/script-director.md","use":"","look_only":true},{"id":"openmontage/director-hybrid-asset-director","name":"hybrid/asset-director","kind":"skill","job":"scene","line":"How the agent runs the assets stage of the hybrid pipeline. The stage hands on the list of assets made or found. Stops for the person's approval.","path":"skills/pipelines/hybrid/asset-director.md","use":"","look_only":true},{"id":"openmontage/director-hybrid-compose-director","name":"hybrid/compose-director","kind":"skill","job":"render","line":"How the agent runs the compose stage of the hybrid pipeline. The stage hands on a render report, a review of the finished render. No approval stop by default.","path":"skills/pipelines/hybrid/compose-director.md","use":"","look_only":true},{"id":"openmontage/director-hybrid-edit-director","name":"hybrid/edit-director","kind":"skill","job":"edit","line":"How the agent runs the edit stage of the hybrid pipeline. The stage hands on the edit-decision file. No approval stop by default.","path":"skills/pipelines/hybrid/edit-director.md","use":"","look_only":true},{"id":"openmontage/director-hybrid-executive-producer","name":"hybrid/executive-producer","kind":"skill","job":"plan","line":"The orchestrator skill for the hybrid pipeline: runs the stages in order, sends work back for another pass, and holds the budget (default budget $2.00, at most 3 revisions per stage, a 12-minute time limit).","path":"skills/pipelines/hybrid/executive-producer.md","use":"","look_only":true},{"id":"openmontage/director-hybrid-idea-director","name":"hybrid/idea-director","kind":"skill","job":"plan","line":"How the agent runs the idea stage of the hybrid pipeline. The stage hands on the brief, the decision log. Stops for the person's approval.","path":"skills/pipelines/hybrid/idea-director.md","use":"","look_only":true},{"id":"openmontage/director-hybrid-publish-director","name":"hybrid/publish-director","kind":"skill","job":"publish","line":"How the agent runs the publish stage of the hybrid pipeline. The stage hands on a publish log. Stops for the person's approval.","path":"skills/pipelines/hybrid/publish-director.md","use":"","look_only":true},{"id":"openmontage/director-hybrid-scene-director","name":"hybrid/scene-director","kind":"skill","job":"plan","line":"How the agent runs the scene_plan stage of the hybrid pipeline. The stage hands on the scene plan. Stops for the person's approval.","path":"skills/pipelines/hybrid/scene-director.md","use":"","look_only":true},{"id":"openmontage/director-hybrid-script-director","name":"hybrid/script-director","kind":"skill","job":"plan","line":"How the agent runs the script stage of the hybrid pipeline. The stage hands on the script. Stops for the person's approval.","path":"skills/pipelines/hybrid/script-director.md","use":"","look_only":true},{"id":"openmontage/director-localization-dub-asset-director","name":"localization-dub/asset-director","kind":"skill","job":"scene","line":"How the agent runs the assets stage of the localization-dub pipeline. The stage hands on the list of assets made or found. Stops for the person's approval.","path":"skills/pipelines/localization-dub/asset-director.md","use":"","look_only":true},{"id":"openmontage/director-localization-dub-compose-director","name":"localization-dub/compose-director","kind":"skill","job":"render","line":"How the agent runs the compose stage of the localization-dub pipeline. The stage hands on a render report, a review of the finished render. No approval stop by default.","path":"skills/pipelines/localization-dub/compose-director.md","use":"","look_only":true},{"id":"openmontage/director-localization-dub-edit-director","name":"localization-dub/edit-director","kind":"skill","job":"edit","line":"How the agent runs the edit stage of the localization-dub pipeline. The stage hands on the edit-decision file. No approval stop by default.","path":"skills/pipelines/localization-dub/edit-director.md","use":"","look_only":true},{"id":"openmontage/director-localization-dub-executive-producer","name":"localization-dub/executive-producer","kind":"skill","job":"plan","line":"The orchestrator skill for the localization-dub pipeline: runs the stages in order, sends work back for another pass, and holds the budget (default budget $3.00, at most 3 revisions per stage, a 15-minute time limit).","path":"skills/pipelines/localization-dub/executive-producer.md","use":"","look_only":true},{"id":"openmontage/director-localization-dub-idea-director","name":"localization-dub/idea-director","kind":"skill","job":"plan","line":"How the agent runs the idea stage of the localization-dub pipeline. The stage hands on the brief, the decision log. Stops for the person's approval.","path":"skills/pipelines/localization-dub/idea-director.md","use":"","look_only":true},{"id":"openmontage/director-localization-dub-publish-director","name":"localization-dub/publish-director","kind":"skill","job":"publish","line":"How the agent runs the publish stage of the localization-dub pipeline. The stage hands on a publish log. Stops for the person's approval.","path":"skills/pipelines/localization-dub/publish-director.md","use":"","look_only":true},{"id":"openmontage/director-localization-dub-scene-director","name":"localization-dub/scene-director","kind":"skill","job":"plan","line":"How the agent runs the scene_plan stage of the localization-dub pipeline. The stage hands on the scene plan. Stops for the person's approval.","path":"skills/pipelines/localization-dub/scene-director.md","use":"","look_only":true},{"id":"openmontage/director-localization-dub-script-director","name":"localization-dub/script-director","kind":"skill","job":"plan","line":"How the agent runs the script stage of the localization-dub pipeline. The stage hands on the script. Stops for the person's approval.","path":"skills/pipelines/localization-dub/script-director.md","use":"","look_only":true},{"id":"openmontage/director-podcast-repurpose-asset-director","name":"podcast-repurpose/asset-director","kind":"skill","job":"scene","line":"How the agent runs the assets stage of the podcast-repurpose pipeline. The stage hands on the list of assets made or found. Stops for the person's approval.","path":"skills/pipelines/podcast-repurpose/asset-director.md","use":"","look_only":true},{"id":"openmontage/director-podcast-repurpose-compose-director","name":"podcast-repurpose/compose-director","kind":"skill","job":"render","line":"How the agent runs the compose stage of the podcast-repurpose pipeline. The stage hands on a render report, a review of the finished render. No approval stop by default.","path":"skills/pipelines/podcast-repurpose/compose-director.md","use":"","look_only":true},{"id":"openmontage/director-podcast-repurpose-edit-director","name":"podcast-repurpose/edit-director","kind":"skill","job":"edit","line":"How the agent runs the edit stage of the podcast-repurpose pipeline. The stage hands on the edit-decision file. No approval stop by default.","path":"skills/pipelines/podcast-repurpose/edit-director.md","use":"","look_only":true},{"id":"openmontage/director-podcast-repurpose-executive-producer","name":"podcast-repurpose/executive-producer","kind":"skill","job":"plan","line":"The orchestrator skill for the podcast-repurpose pipeline: runs the stages in order, sends work back for another pass, and holds the budget (default budget $1.00, at most 3 revisions per stage, a 12-minute time limit).","path":"skills/pipelines/podcast-repurpose/executive-producer.md","use":"","look_only":true},{"id":"openmontage/director-podcast-repurpose-idea-director","name":"podcast-repurpose/idea-director","kind":"skill","job":"plan","line":"How the agent runs the idea stage of the podcast-repurpose pipeline. The stage hands on the brief, the decision log. Stops for the person's approval.","path":"skills/pipelines/podcast-repurpose/idea-director.md","use":"","look_only":true},{"id":"openmontage/director-podcast-repurpose-publish-director","name":"podcast-repurpose/publish-director","kind":"skill","job":"publish","line":"How the agent runs the publish stage of the podcast-repurpose pipeline. The stage hands on a publish log. Stops for the person's approval.","path":"skills/pipelines/podcast-repurpose/publish-director.md","use":"","look_only":true},{"id":"openmontage/director-podcast-repurpose-scene-director","name":"podcast-repurpose/scene-director","kind":"skill","job":"plan","line":"How the agent runs the scene_plan stage of the podcast-repurpose pipeline. The stage hands on the scene plan. Stops for the person's approval.","path":"skills/pipelines/podcast-repurpose/scene-director.md","use":"","look_only":true},{"id":"openmontage/director-podcast-repurpose-script-director","name":"podcast-repurpose/script-director","kind":"skill","job":"plan","line":"How the agent runs the script stage of the podcast-repurpose pipeline. The stage hands on the script. Stops for the person's approval.","path":"skills/pipelines/podcast-repurpose/script-director.md","use":"","look_only":true},{"id":"openmontage/director-screen-demo-asset-director","name":"screen-demo/asset-director","kind":"skill","job":"scene","line":"How the agent runs the assets stage of the screen-demo pipeline. The stage hands on the list of assets made or found. Stops for the person's approval.","path":"skills/pipelines/screen-demo/asset-director.md","use":"","look_only":true},{"id":"openmontage/director-screen-demo-compose-director","name":"screen-demo/compose-director","kind":"skill","job":"render","line":"How the agent runs the compose stage of the screen-demo pipeline. The stage hands on a render report, a review of the finished render. No approval stop by default.","path":"skills/pipelines/screen-demo/compose-director.md","use":"","look_only":true},{"id":"openmontage/director-screen-demo-edit-director","name":"screen-demo/edit-director","kind":"skill","job":"edit","line":"How the agent runs the edit stage of the screen-demo pipeline. The stage hands on the edit-decision file. No approval stop by default.","path":"skills/pipelines/screen-demo/edit-director.md","use":"","look_only":true},{"id":"openmontage/director-screen-demo-executive-producer","name":"screen-demo/executive-producer","kind":"skill","job":"plan","line":"The orchestrator skill for the screen-demo pipeline: runs the stages in order, sends work back for another pass, and holds the budget (default budget $1.00, at most 3 revisions per stage, a 10-minute time limit).","path":"skills/pipelines/screen-demo/executive-producer.md","use":"","look_only":true},{"id":"openmontage/director-screen-demo-idea-director","name":"screen-demo/idea-director","kind":"skill","job":"plan","line":"How the agent runs the idea stage of the screen-demo pipeline. The stage hands on the brief, the decision log. Stops for the person's approval.","path":"skills/pipelines/screen-demo/idea-director.md","use":"","look_only":true},{"id":"openmontage/director-screen-demo-publish-director","name":"screen-demo/publish-director","kind":"skill","job":"publish","line":"How the agent runs the publish stage of the screen-demo pipeline. The stage hands on a publish log. Stops for the person's approval.","path":"skills/pipelines/screen-demo/publish-director.md","use":"","look_only":true},{"id":"openmontage/director-screen-demo-scene-director","name":"screen-demo/scene-director","kind":"skill","job":"plan","line":"How the agent runs the scene_plan stage of the screen-demo pipeline. The stage hands on the scene plan. Stops for the person's approval.","path":"skills/pipelines/screen-demo/scene-director.md","use":"","look_only":true},{"id":"openmontage/director-screen-demo-script-director","name":"screen-demo/script-director","kind":"skill","job":"plan","line":"How the agent runs the script stage of the screen-demo pipeline. The stage hands on the script. Stops for the person's approval.","path":"skills/pipelines/screen-demo/script-director.md","use":"","look_only":true},{"id":"openmontage/director-talking-head-asset-director","name":"talking-head/asset-director","kind":"skill","job":"scene","line":"How the agent runs the assets stage of the talking-head pipeline. The stage hands on the list of assets made or found. Stops for the person's approval.","path":"skills/pipelines/talking-head/asset-director.md","use":"","look_only":true},{"id":"openmontage/director-talking-head-compose-director","name":"talking-head/compose-director","kind":"skill","job":"render","line":"How the agent runs the compose stage of the talking-head pipeline. The stage hands on a render report, a review of the finished render. No approval stop by default.","path":"skills/pipelines/talking-head/compose-director.md","use":"","look_only":true},{"id":"openmontage/director-talking-head-edit-director","name":"talking-head/edit-director","kind":"skill","job":"edit","line":"How the agent runs the edit stage of the talking-head pipeline. The stage hands on the edit-decision file. No approval stop by default.","path":"skills/pipelines/talking-head/edit-director.md","use":"","look_only":true},{"id":"openmontage/director-talking-head-executive-producer","name":"talking-head/executive-producer","kind":"skill","job":"plan","line":"The orchestrator skill for the talking-head pipeline: runs the stages in order, sends work back for another pass, and holds the budget (default budget $0.50, at most 3 revisions per stage).","path":"skills/pipelines/talking-head/executive-producer.md","use":"","look_only":true},{"id":"openmontage/director-talking-head-idea-director","name":"talking-head/idea-director","kind":"skill","job":"plan","line":"How the agent runs the idea stage of the talking-head pipeline. The stage hands on the brief, the decision log. Stops for the person's approval.","path":"skills/pipelines/talking-head/idea-director.md","use":"","look_only":true},{"id":"openmontage/director-talking-head-publish-director","name":"talking-head/publish-director","kind":"skill","job":"publish","line":"How the agent runs the publish stage of the talking-head pipeline. The stage hands on a publish log. Stops for the person's approval.","path":"skills/pipelines/talking-head/publish-director.md","use":"","look_only":true},{"id":"openmontage/director-talking-head-scene-director","name":"talking-head/scene-director","kind":"skill","job":"plan","line":"How the agent runs the scene_plan stage of the talking-head pipeline. The stage hands on the scene plan. Stops for the person's approval.","path":"skills/pipelines/talking-head/scene-director.md","use":"","look_only":true},{"id":"openmontage/director-talking-head-script-director","name":"talking-head/script-director","kind":"skill","job":"plan","line":"How the agent runs the script stage of the talking-head pipeline. The stage hands on the script. Stops for the person's approval.","path":"skills/pipelines/talking-head/script-director.md","use":"","look_only":true},{"id":"openmontage/skill-core-color-grading","name":"core/color-grading","kind":"skill","job":"effect","line":"Color grading with FFmpeg: seven named looks, which look suits which kind of content, LUT use, and protecting skin tones.","path":"skills/core/color-grading.md","use":"","look_only":true},{"id":"openmontage/skill-core-ffmpeg","name":"core/ffmpeg","kind":"skill","job":"edit","line":"When to reach for the FFmpeg-backed tools (anything that needs no AI model) and the patterns they share.","path":"skills/core/ffmpeg.md","use":"","look_only":true},{"id":"openmontage/skill-core-hyperframes","name":"core/hyperframes","kind":"skill","job":"render","line":"OpenMontage's own guide to HyperFrames: when to choose it over Remotion or plain FFmpeg, how a project folder is laid out, and how the pipeline's files map onto an HTML composition.","path":"skills/core/hyperframes.md","use":"","look_only":true},{"id":"openmontage/skill-core-remotion","name":"core/remotion","kind":"skill","job":"render","line":"OpenMontage's own guide to Remotion: when to route a video through the Remotion composer, the scene types it accepts, and how the pipeline feeds it.","path":"skills/core/remotion.md","use":"","look_only":true},{"id":"openmontage/skill-core-subtitle-sync","name":"core/subtitle-sync","kind":"skill","job":"caption","line":"Turning a transcript into subtitles with the subtitle tool: output formats, line lengths per platform, burn-in styling and timing.","path":"skills/core/subtitle-sync.md","use":"","look_only":true},{"id":"openmontage/skill-core-whisperx","name":"core/whisperx","kind":"skill","job":"caption","line":"Using the local transcriber: how it works, which model size to pick, and a quality checklist.","path":"skills/core/whisperx.md","use":"","look_only":true},{"id":"openmontage/skill-creative-3d-world-generation","name":"creative/3d-world-generation","kind":"skill","job":"3d","line":"When a film needs a real, continuous three.js world instead of stills or generated clips: which tools to route through, what each asset must record, and what to review.","path":"skills/creative/3d-world-generation.md","use":"","look_only":true},{"id":"openmontage/skill-creative-animated-drawing","name":"creative/animated-drawing","kind":"skill","job":"move","line":"Making a person's own drawing or photo of a character move (dance, walk, jump, wave) with Meta's AnimatedDrawings and real motion capture; says to ask which character to use first.","path":"skills/creative/animated-drawing.md","use":"","look_only":true},{"id":"openmontage/skill-creative-animation-pipeline","name":"creative/animation-pipeline","kind":"skill","job":"move","line":"Motion-graphics basics for the two render paths: choosing Remotion or HyperFrames, frame rate, timing principles and scene transitions.","path":"skills/creative/animation-pipeline.md","use":"","look_only":true},{"id":"openmontage/skill-creative-bg-remove-usage","name":"creative/bg-remove-usage","kind":"skill","job":"effect","line":"Using the background-removal tool: which model, alpha matting, common recipes.","path":"skills/creative/bg-remove-usage.md","use":"","look_only":true},{"id":"openmontage/skill-creative-broll-planning","name":"creative/broll-planning","kind":"skill","job":"plan","line":"Planning supporting footage: stock against generated, pulling the needs out of a script, writing stock search queries, judging results.","path":"skills/creative/broll-planning.md","use":"","look_only":true},{"id":"openmontage/skill-creative-cinematic","name":"creative/cinematic","kind":"skill","job":"camera","line":"The cinematic look: wide aspect ratios, shot length and pacing, layered sound, grading, and replacing mood words with the visual cause of the mood.","path":"skills/creative/cinematic.md","use":"","look_only":true},{"id":"openmontage/skill-creative-commercial-product-video","name":"creative/commercial-product-video","kind":"skill","job":"plan","line":"Making a commercial for a physical product with generated shots of the exact item: turning a brief into a treatment and keeping the product consistent from references.","path":"skills/creative/commercial-product-video.md","use":"","look_only":true},{"id":"openmontage/skill-creative-data-visualization","name":"creative/data-visualization","kind":"skill","job":"chart","line":"Showing data in a video: which chart for which claim, the order to animate things in, label placement, and how much data a viewer can read.","path":"skills/creative/data-visualization.md","use":"","look_only":true},{"id":"openmontage/skill-creative-diagram-gen-usage","name":"creative/diagram-gen-usage","kind":"skill","job":"diagram","line":"Using the diagram tool for video: which diagram type, how many nodes a 1080p frame can carry, color themes, and building a diagram up step by step.","path":"skills/creative/diagram-gen-usage.md","use":"","look_only":true},{"id":"openmontage/skill-creative-enhancement-strategy","name":"creative/enhancement-strategy","kind":"skill","job":"effect","line":"Deciding how to improve talking-head footage: the order of the enhancement tools, overlay types, how many overlays is too many, where to place them.","path":"skills/creative/enhancement-strategy.md","use":"","look_only":true},{"id":"openmontage/skill-creative-face-restore-usage","name":"creative/face-restore-usage","kind":"skill","job":"effect","line":"Using face restoration, and how it differs from the light face-enhance filter.","path":"skills/creative/face-restore-usage.md","use":"","look_only":true},{"id":"openmontage/skill-creative-image-gen-usage","name":"creative/image-gen-usage","kind":"skill","job":"image","line":"Generating stills for video: frame sizes, keeping a look consistent across a batch, and a three-part prompt structure.","path":"skills/creative/image-gen-usage.md","use":"","look_only":true},{"id":"openmontage/skill-creative-image-provider-usage","name":"creative/image-provider-usage","kind":"skill","job":"image","line":"Which image provider for which kind of scene, each one's quirks, cost against quality, and using the selector.","path":"skills/creative/image-provider-usage.md","use":"","look_only":true},{"id":"openmontage/skill-creative-ink-theater","name":"creative/ink-theater","kind":"skill","job":"move","line":"The creative method behind Ink Theater: a black-ink character acts out an abstract idea by working an absurd low-tech machine. Gives the steps from concept to scene, a set of archetypes, a strict color grammar and a cheat sheet for the engine.","path":"skills/creative/ink-theater.md","use":"","look_only":true},{"id":"openmontage/skill-creative-lip-sync-usage","name":"creative/lip-sync-usage","kind":"skill","job":"avatar","line":"Using local lip sync: when to use it against the talking-head generator, model choice, input needs and face padding.","path":"skills/creative/lip-sync-usage.md","use":"","look_only":true},{"id":"openmontage/skill-creative-long-form","name":"creative/long-form","kind":"skill","job":"plan","line":"Videos of ten minutes and more: retention benchmarks, managing the retention curve, structure, keeping sound consistent, visual pacing.","path":"skills/creative/long-form.md","use":"","look_only":true},{"id":"openmontage/skill-creative-manim-usage","name":"creative/manim-usage","kind":"skill","job":"move","line":"Using Manim for maths animation in this system: render settings, timing, composition and color.","path":"skills/creative/manim-usage.md","use":"","look_only":true},{"id":"openmontage/skill-creative-music-gen-usage","name":"creative/music-gen-usage","kind":"skill","job":"music","line":"Generating background music: tempo by video type, key and mood, prompt writing, matching length, looping for long videos.","path":"skills/creative/music-gen-usage.md","use":"","look_only":true},{"id":"openmontage/skill-creative-prompting-grok-prompting","name":"creative/prompting/grok-prompting","kind":"skill","job":"video clip","line":"Prompt guidance for xAI Grok image and video generation.","path":"skills/creative/prompting/grok-prompting.md","use":"","look_only":true},{"id":"openmontage/skill-creative-prompting-hunyuan-prompting","name":"creative/prompting/hunyuan-prompting","kind":"skill","job":"video clip","line":"Prompt guidance for HunyuanVideo: a prompt formula, strengths, image-to-video practice, two examples.","path":"skills/creative/prompting/hunyuan-prompting.md","use":"","look_only":true},{"id":"openmontage/skill-creative-prompting-ltx-prompting","name":"creative/prompting/ltx-prompting","kind":"skill","job":"video clip","line":"Prompt guidance for LTX video: a six-part structure, tips, what to avoid.","path":"skills/creative/prompting/ltx-prompting.md","use":"","look_only":true},{"id":"openmontage/skill-creative-prompting-seedance-prompting","name":"creative/prompting/seedance-prompting","kind":"skill","job":"video clip","line":"Prompt guidance for Seedance: an eight-part structure, multi-shot and lip-sync patterns, a parameter sheet.","path":"skills/creative/prompting/seedance-prompting.md","use":"","look_only":true},{"id":"openmontage/skill-creative-prompting-sora-prompting","name":"creative/prompting/sora-prompting","kind":"skill","job":"video clip","line":"Prompt guidance for Sora: a template, optional fields, a color-palette technique, and which settings cannot be set in the prompt.","path":"skills/creative/prompting/sora-prompting.md","use":"","look_only":true},{"id":"openmontage/skill-creative-prompting-veo-prompting","name":"creative/prompting/veo-prompting","kind":"skill","job":"video clip","line":"Prompt guidance for Google Veo: a fourteen-part structure, lens effects, art-movement references, and stopping unwanted subtitles.","path":"skills/creative/prompting/veo-prompting.md","use":"","look_only":true},{"id":"openmontage/skill-creative-scene-detect-usage","name":"creative/scene-detect-usage","kind":"skill","job":"edit","line":"Using scene detection: which algorithm, tuning the threshold, cleaning up the result, presets by content type.","path":"skills/creative/scene-detect-usage.md","use":"","look_only":true},{"id":"openmontage/skill-creative-screen-recording","name":"creative/screen-recording","kind":"skill","job":"capture","line":"Screen recordings: recording settings, cursor handling, zoom and pan, post-processing.","path":"skills/creative/screen-recording.md","use":"","look_only":true},{"id":"openmontage/skill-creative-short-form","name":"creative/short-form","kind":"skill","job":"plan","line":"Vertical short video: safe zones on a 1080 by 1920 frame, upload specs, length strategy, the one-second hook, pacing.","path":"skills/creative/short-form.md","use":"","look_only":true},{"id":"openmontage/skill-creative-sound-design","name":"creative/sound-design","kind":"skill","job":"audio","line":"Sound for video: level targets for speech, music and effects, ducking amounts, music choice by content type, effect placement, platform loudness targets.","path":"skills/creative/sound-design.md","use":"","look_only":true},{"id":"openmontage/skill-creative-stock-sourcing-usage","name":"creative/stock-sourcing-usage","kind":"skill","job":"footage","line":"Using the stock tools: which provider for what, input settings, traps (some download links expire), and a licensing summary.","path":"skills/creative/stock-sourcing-usage.md","use":"","look_only":true},{"id":"openmontage/skill-creative-storytelling","name":"creative/storytelling","kind":"skill","job":"plan","line":"Story structure for explainers: an arc template scaled by length, hook types, and a thirty-second rule.","path":"skills/creative/storytelling.md","use":"","look_only":true},{"id":"openmontage/skill-creative-talking-head-gen-usage","name":"creative/talking-head-gen-usage","kind":"skill","job":"avatar","line":"Using the photo-to-talking-head generator: when, input needs, model choice, settings.","path":"skills/creative/talking-head-gen-usage.md","use":"","look_only":true},{"id":"openmontage/skill-creative-typography","name":"creative/typography","kind":"skill","job":"title","line":"Type for video: font choice, sizes at 1080p and 4K, safe zones, text animation timing, subtitle type.","path":"skills/creative/typography.md","use":"","look_only":true},{"id":"openmontage/skill-creative-upscale-usage","name":"creative/upscale-usage","kind":"skill","job":"effect","line":"Using the upscaler: when it helps, model and scale choice, faces, denoise strength.","path":"skills/creative/upscale-usage.md","use":"","look_only":true},{"id":"openmontage/skill-creative-video-editing","name":"creative/video-editing","kind":"skill","job":"edit","line":"Editing choices for talking-head footage and the shape of the edit-decision file.","path":"skills/creative/video-editing.md","use":"","look_only":true},{"id":"openmontage/skill-creative-video-gen-prompting","name":"creative/video-gen-prompting","kind":"skill","job":"video clip","line":"The general guide to prompting video models: order of elements, a universal formula, camera shot types, with pointers to the per-model guides.","path":"skills/creative/video-gen-prompting.md","use":"","look_only":true},{"id":"openmontage/skill-creative-video-stitching","name":"creative/video-stitching","kind":"skill","job":"edit","line":"Joining clips: when to stitch, strategies, which transition, and keeping audio in step.","path":"skills/creative/video-stitching.md","use":"","look_only":true},{"id":"openmontage/skill-creative-video-understand-usage","name":"creative/video-understand-usage","kind":"skill","job":"review","line":"Using the local vision model on frames and clips: modes, model choice, which frames to pick.","path":"skills/creative/video-understand-usage.md","use":"","look_only":true},{"id":"openmontage/skill-meta-animation-runtime-selector","name":"meta/animation-runtime-selector","kind":"skill","job":"plan","line":"Choosing the render path for a video (Remotion, HyperFrames or FFmpeg) and which animation library to use inside it, with a stated bias toward the simplest that works.","path":"skills/meta/animation-runtime-selector.md","use":"","look_only":true},{"id":"openmontage/skill-meta-bespoke-composition","name":"meta/bespoke-composition","kind":"skill","job":"plan","line":"'Atelier' mode: writing a composition by hand from scratch for a piece that must not look like the stock templates. Sets when to choose it, the route for building it, and guardrails; reuses engine knowledge, never finished components.","path":"skills/meta/bespoke-composition.md","use":"","look_only":true},{"id":"openmontage/skill-meta-capability-extension","name":"meta/capability-extension","kind":"skill","job":"plan","line":"What the agent may do when no tool covers a need: when a one-off script, a custom style file, a new skill or a tool wrapper is allowed, and under what limits.","path":"skills/meta/capability-extension.md","use":"","look_only":true},{"id":"openmontage/skill-meta-checkpoint-protocol","name":"meta/checkpoint-protocol","kind":"skill","job":"review","line":"When and how to save a stage's state and when to stop and wait for the person. A stage marked as needing approval cannot be recorded as done without it.","path":"skills/meta/checkpoint-protocol.md","use":"","look_only":true},{"id":"openmontage/skill-meta-creative-intake","name":"meta/creative-intake","kind":"skill","job":"plan","line":"The questions to ask before research starts, asked as conversation and not as a form, and how to handle vague and detailed briefs.","path":"skills/meta/creative-intake.md","use":"","look_only":true},{"id":"openmontage/skill-meta-onboarding","name":"meta/onboarding","kind":"skill","job":"plan","line":"What to do when a new user arrives without a concrete request: check what tools are set up, say in plain words what is possible, offer starter prompts.","path":"skills/meta/onboarding.md","use":"","look_only":true},{"id":"openmontage/skill-meta-reviewer","name":"meta/reviewer","kind":"skill","job":"review","line":"The self-review an agent runs after every stage: check the file against its schema, against the stage's review points and the style rules, grade each finding as critical, suggestion or nitpick, and attach a concrete fix to every critical one. At most two rounds, then pass with warnings.","path":"skills/meta/reviewer.md","use":"","look_only":true},{"id":"openmontage/skill-meta-skill-creator","name":"meta/skill-creator","kind":"skill","job":"plan","line":"How the agent writes a new skill file when it meets a reusable gap.","path":"skills/meta/skill-creator.md","use":"","look_only":true},{"id":"openmontage/skill-meta-taste-direction","name":"meta/taste-direction","kind":"skill","job":"plan","line":"Fixing the look before committing to it: a written taste profile (how varied, how much motion, how dense), a reference strategy and a list of defaults to avoid.","path":"skills/meta/taste-direction.md","use":"","look_only":true},{"id":"openmontage/skill-meta-video-reference-analyst","name":"meta/video-reference-analyst","kind":"skill","job":"plan","line":"Starting from a video the user likes: analyze what it does (content, pacing, structure, style), then offer two or three different concepts for the user's own version.","path":"skills/meta/video-reference-analyst.md","use":"","look_only":true},{"id":"openmontage/skill-meta-voice-performance-director","name":"meta/voice-performance-director","kind":"skill","job":"voice","line":"Directing synthetic narration: a written plan for pace, pauses and emphasis, how that maps to each speech provider's settings, and a sample the person hears before the full run.","path":"skills/meta/voice-performance-director.md","use":"","look_only":true},{"id":"openmontage/pack-3d-asset-generation","name":"3d-asset-generation","kind":"skill","job":"3d","line":"Generating, rebuilding and checking 3D models for the world-building tools, through Atlas Cloud, fal.ai, licensed catalogs and Blender.","path":".agents/skills/3d-asset-generation/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-acestep","name":"acestep","kind":"skill","job":"music","line":"Music generation with the ACE-Step model: background music, vocal tracks, covers, stems.","path":".agents/skills/acestep/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-agents","name":"agents","kind":"skill","job":"voice","line":"Building voice agents with ElevenLabs.","path":".agents/skills/agents/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-ai-video-gen","name":"ai-video-gen","kind":"skill","job":"video clip","line":"Generating video from text through several provider gateways.","path":".agents/skills/ai-video-gen/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-atlas-cloud","name":"atlas-cloud","kind":"skill","job":"video clip","line":"Generating and editing images and video through the Atlas Cloud gateway.","path":".agents/skills/atlas-cloud/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-avatar-video","name":"avatar-video","kind":"skill","job":"avatar","line":"Making avatar videos with HeyGen's API: avatars, voices, scripts, scenes, backgrounds.","path":".agents/skills/avatar-video/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-azure-speech-to-text","name":"azure-speech-to-text","kind":"skill","job":"caption","line":"Transcribing audio with Azure AI Speech.","path":".agents/skills/azure-speech-to-text/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-azure-text-to-speech","name":"azure-text-to-speech","kind":"skill","job":"voice","line":"Narration with Azure AI Speech.","path":".agents/skills/azure-text-to-speech/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-beautiful-mermaid","name":"beautiful-mermaid","kind":"skill","job":"diagram","line":"Rendering Mermaid diagrams to SVG and PNG with the Beautiful Mermaid library.","path":".agents/skills/beautiful-mermaid/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-bfl-api","name":"bfl-api","kind":"skill","job":"image","line":"Calling the Black Forest Labs FLUX API: endpoints, polling, rate limits, errors, webhooks.","path":".agents/skills/bfl-api/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-canvas-procedural-animation","name":"canvas-procedural-animation","kind":"skill","job":"move","line":"Procedural character effects with p5.js and canvas: particles, weather, squash and stretch, walk cycles.","path":".agents/skills/canvas-procedural-animation/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-character-animation-qa","name":"character-animation-qa","kind":"skill","job":"review","line":"Reviewing local character animation: schema checks, browser previews, frame samples, final output checks.","path":".agents/skills/character-animation-qa/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-character-rigging","name":"character-rigging","kind":"skill","job":"rig","line":"Building 2D character rigs from data: parts, pivots, layers, constraints, views.","path":".agents/skills/character-rigging/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-comfyui","name":"comfyui","kind":"skill","job":"image","line":"Working with ComfyUI workflows from this system's image, video and music tools.","path":".agents/skills/comfyui/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-create-video","name":"create-video","kind":"skill","job":"whole video","line":"Making a video from a prompt with HeyGen's Video Agent.","path":".agents/skills/create-video/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-d3-viz","name":"d3-viz","kind":"skill","job":"chart","line":"Data visualization with d3.js: charts, graphs, networks, maps.","path":".agents/skills/d3-viz/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-dashscope","name":"dashscope","kind":"skill","job":"image","line":"Alibaba DashScope: image generation, speech, and transcription with word timings.","path":".agents/skills/dashscope/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-doubao-tts","name":"doubao-tts","kind":"skill","job":"voice","line":"Mandarin and multilingual narration with Volcengine Doubao Speech.","path":".agents/skills/doubao-tts/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-elevenlabs","name":"elevenlabs","kind":"skill","job":"voice","line":"Voiceovers, sound effects and music with the ElevenLabs APIs.","path":".agents/skills/elevenlabs/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-faceswap","name":"faceswap","kind":"skill","job":"avatar","line":"Swapping a face in a video through HeyGen.","path":".agents/skills/faceswap/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-ffmpeg","name":"ffmpeg","kind":"skill","job":"edit","line":"Video and audio processing with FFmpeg: convert, resize, compress, extract audio, prepare assets for Remotion.","path":".agents/skills/ffmpeg/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-fish-audio-tts","name":"fish-audio-tts","kind":"skill","job":"voice","line":"Expressive multilingual narration and cloned voices with fish.audio.","path":".agents/skills/fish-audio-tts/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-flux-best-practices","name":"flux-best-practices","kind":"skill","job":"image","line":"Prompting the FLUX image models: text to image, image to image, structured prompts, color codes, lettering, multi-reference edits.","path":".agents/skills/flux-best-practices/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-framer-motion","name":"framer-motion","kind":"skill","job":"move","line":"Disney's twelve animation principles applied with Framer Motion in React.","path":".agents/skills/framer-motion/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-gemini-omni","name":"gemini-omni","kind":"skill","job":"video clip","line":"Generating short videos with Google's Gemini Omni model and editing them by conversation.","path":".agents/skills/gemini-omni/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-grok-media","name":"grok-media","kind":"skill","job":"video clip","line":"xAI Grok image and video generation: sign-in, endpoints, prompt structure, edits, polling.","path":".agents/skills/grok-media/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-gsap-core","name":"gsap-core","kind":"gsap","job":"move","line":"GreenSock's own skill for the core GSAP API. A copy of the skill in greensock/gsap-skills, which is MIT.","path":".agents/skills/gsap-core/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-gsap-frameworks","name":"gsap-frameworks","kind":"gsap","job":"move","line":"GreenSock's own skill for GSAP in Vue, Svelte and other non-React frameworks. Copy of the MIT upstream.","path":".agents/skills/gsap-frameworks/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-gsap-performance","name":"gsap-performance","kind":"gsap","job":"move","line":"GreenSock's own skill for GSAP performance. Copy of the MIT upstream.","path":".agents/skills/gsap-performance/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-gsap-plugins","name":"gsap-plugins","kind":"gsap","job":"move","line":"GreenSock's own skill for the GSAP plugins (SplitText, Flip, MorphSVG and the rest). Copy of the MIT upstream.","path":".agents/skills/gsap-plugins/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-gsap-react","name":"gsap-react","kind":"gsap","job":"move","line":"GreenSock's own skill for GSAP in React. Copy of the MIT upstream.","path":".agents/skills/gsap-react/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-gsap-scrolltrigger","name":"gsap-scrolltrigger","kind":"gsap","job":"move","line":"GreenSock's own skill for scroll-linked animation. Copy of the MIT upstream.","path":".agents/skills/gsap-scrolltrigger/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-gsap-timeline","name":"gsap-timeline","kind":"gsap","job":"move","line":"GreenSock's own skill for GSAP timelines. Copy of the MIT upstream.","path":".agents/skills/gsap-timeline/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-gsap-utils","name":"gsap-utils","kind":"gsap","job":"move","line":"GreenSock's own skill for the GSAP helper functions. Copy of the MIT upstream.","path":".agents/skills/gsap-utils/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-heygen","name":"heygen","kind":"skill","job":"avatar","line":"An older combined HeyGen skill; its own description marks it deprecated in favor of create-video and avatar-video.","path":".agents/skills/heygen/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-hyperframes-animation","name":"hyperframes-animation","kind":"html-video","job":"move","line":"All the motion knowledge for HyperFrames: small motion rules, scene blueprints, transitions. Copy of HeyGen's skill.","path":".agents/skills/hyperframes-animation/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-hyperframes-cli","name":"hyperframes-cli","kind":"html-video","job":"render","line":"The HyperFrames command-line loop: init, add, lint, validate, preview, render. Copy of HeyGen's skill.","path":".agents/skills/hyperframes-cli/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-hyperframes-core","name":"hyperframes-core","kind":"html-video","job":"render","line":"The HyperFrames composition contract: structure, timing attributes, clips, tracks. Copy of HeyGen's skill.","path":".agents/skills/hyperframes-core/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-hyperframes-creative","name":"hyperframes-creative","kind":"html-video","job":"plan","line":"Creative direction for HyperFrames videos apart from motion: design spec, palettes, type, narration, beat planning. Copy of HeyGen's skill.","path":".agents/skills/hyperframes-creative/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-hyperframes-media","name":"hyperframes-media","kind":"html-video","job":"audio","line":"Audio and media for HyperFrames from one shared audio script: speech from several providers, music, and 19 bundled sound effects from Pixabay under the Pixabay Content License. Copy of HeyGen's skill.","path":".agents/skills/hyperframes-media/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-hyperframes-registry","name":"hyperframes-registry","kind":"html-video","job":"layout","line":"Installing ready-made HyperFrames blocks and components into a composition. Copy of HeyGen's skill.","path":".agents/skills/hyperframes-registry/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-hyperframes","name":"hyperframes","kind":"html-video","job":"render","line":"The entry skill for HyperFrames (HTML rendered to video): routes any video request to the right HyperFrames skill. A copy of HeyGen's skill; the upstream repo is Apache-2.0.","path":".agents/skills/hyperframes/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-kling-official","name":"kling-official","kind":"skill","job":"video clip","line":"Using Kling's official API from this system's Kling tools: video, image, speech, avatar, lip sync.","path":".agents/skills/kling-official/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-lottie-bodymovin","name":"lottie-bodymovin","kind":"skill","job":"move","line":"Disney's twelve animation principles applied with Lottie animations exported from After Effects.","path":".agents/skills/lottie-bodymovin/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-ltx2","name":"ltx2","kind":"skill","job":"video clip","line":"Video generation with the LTX model: text to video and image to video.","path":".agents/skills/ltx2/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-lyria","name":"lyria","kind":"skill","job":"music","line":"Generating and checking music with Google Lyria.","path":".agents/skills/lyria/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-manim-composer","name":"manim-composer","kind":"skill","job":"plan","line":"Planning an explainer in the style of mathematical animation channels before writing Manim code. Third-party; the two Manim skills beside it carry an MIT license file.","path":".agents/skills/manim-composer/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-manimce-best-practices","name":"manimce-best-practices","kind":"skill","job":"move","line":"Best practices for Manim Community Edition. Carries its own MIT license file (Adithya S Kolavi, 2026).","path":".agents/skills/manimce-best-practices/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-manimgl-best-practices","name":"manimgl-best-practices","kind":"skill","job":"move","line":"Best practices for ManimGL, the original Manim. Carries its own MIT license file.","path":".agents/skills/manimgl-best-practices/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-media-use","name":"media-use","kind":"skill","job":"audio","line":"One routine that turns any media need (music, sound effect, image, icon) into a saved local file with a record of where it came from.","path":".agents/skills/media-use/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-minimax-h3","name":"minimax-h3","kind":"skill","job":"video clip","line":"Generating video with MiniMax H3 through its official API, fal.ai, Runway, ComfyUI or local weights.","path":".agents/skills/minimax-h3/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-motion-graphics","name":"motion-graphics","kind":"html-video","job":"move","line":"Short design-led motion graphics where the motion is the message: kinetic type, number count-ups, chart reveals, logo stings.","path":".agents/skills/motion-graphics/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-music-to-video","name":"music-to-video","kind":"html-video","job":"edit","line":"Turning a music track into a beat-synced HyperFrames video, calm to hard-hitting.","path":".agents/skills/music-to-video/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-music","name":"music","kind":"skill","job":"music","line":"Generating music with the ElevenLabs Music API.","path":".agents/skills/music/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-playwright-recording","name":"playwright-recording","kind":"skill","job":"capture","line":"Recording browser sessions as video with Playwright, for demos and walkthroughs.","path":".agents/skills/playwright-recording/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-pose-library-design","name":"pose-library-design","kind":"skill","job":"rig","line":"Designing reusable 2D character poses, action cycles and expressions.","path":".agents/skills/pose-library-design/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-provider-model-refresh","name":"provider-model-refresh","kind":"skill","job":"video clip","line":"Notes on the image, video, speech and avatar provider adapters added in September 2026.","path":".agents/skills/provider-model-refresh/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-provider-refresh-oct23","name":"provider-refresh-oct23","kind":"skill","job":"video clip","line":"API contracts and routing for the providers added on October 23 2026.","path":".agents/skills/provider-refresh-oct23/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-remotion-best-practices","name":"remotion-best-practices","kind":"remotion","job":"move","line":"An older copy of Remotion's own best-practices skill with 38 rule files. Upstream (remotion-dev/skills) states no license, and this copy adds none.","path":".agents/skills/remotion-best-practices/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-remotion-to-hyperframes","name":"remotion-to-hyperframes","kind":"html-video","job":"render","line":"Porting an existing Remotion composition to HyperFrames HTML, only when asked to; includes a test set of example compositions.","path":".agents/skills/remotion-to-hyperframes/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-remotion","name":"remotion","kind":"remotion","job":"move","line":"Project conventions for Remotion from a third-party video toolkit: custom transitions and shared components.","path":".agents/skills/remotion/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-seedance-2-0","name":"seedance-2-0","kind":"skill","job":"video clip","line":"Generating cinematic clips with ByteDance Seedance 2.0.","path":".agents/skills/seedance-2-0/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-seedance-2-5","name":"seedance-2-5","kind":"skill","job":"video clip","line":"Generating 4 to 30 second clips with Seedance 2.5 through fal.ai, Volcengine, Runway or ComfyUI.","path":".agents/skills/seedance-2-5/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-setup-api-key","name":"setup-api-key","kind":"skill","job":"voice","line":"Walking a user through setting up an ElevenLabs API key.","path":".agents/skills/setup-api-key/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-sound-effects","name":"sound-effects","kind":"skill","job":"audio","line":"Generating sound effects from text with ElevenLabs.","path":".agents/skills/sound-effects/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-speech-to-text","name":"speech-to-text","kind":"skill","job":"caption","line":"Transcribing audio with ElevenLabs Scribe.","path":".agents/skills/speech-to-text/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-svg-character-animation","name":"svg-character-animation","kind":"skill","job":"move","line":"Animating SVG character rigs with GSAP, CSS transforms and Remotion frame control.","path":".agents/skills/svg-character-animation/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-synthetic-screen-recording","name":"synthetic-screen-recording","kind":"skill","job":"code","line":"Faking a terminal screen recording with the composer's TerminalScene component, with no real capture.","path":".agents/skills/synthetic-screen-recording/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-tailwind-design-system","name":"tailwind-design-system","kind":"skill","job":"layout","line":"Building design systems with Tailwind CSS v4: tokens, component libraries, responsive patterns.","path":".agents/skills/tailwind-design-system/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-text-to-speech","name":"text-to-speech","kind":"skill","job":"voice","line":"HeyGen's own voice model and catalog speech: voice discovery, timestamps, streaming.","path":".agents/skills/text-to-speech/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-threejs-animation","name":"threejs-animation","kind":"three","job":"3d","line":"three.js animation: keyframes, skeletons, morph targets, mixing.","path":".agents/skills/threejs-animation/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-threejs-fundamentals","name":"threejs-fundamentals","kind":"three","job":"3d","line":"three.js basics: scene, cameras, renderer, object hierarchy, coordinates.","path":".agents/skills/threejs-fundamentals/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-threejs-geometry","name":"threejs-geometry","kind":"three","job":"3d","line":"three.js geometry: built-in shapes, buffer geometry, custom shapes, instancing.","path":".agents/skills/threejs-geometry/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-threejs-interaction","name":"threejs-interaction","kind":"three","job":"3d","line":"three.js interaction: raycasting, controls, pointer input, selection.","path":".agents/skills/threejs-interaction/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-threejs-lighting","name":"threejs-lighting","kind":"three","job":"lighting","line":"three.js lighting: light types, shadows, environment lighting.","path":".agents/skills/threejs-lighting/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-threejs-loaders","name":"threejs-loaders","kind":"three","job":"3d","line":"three.js asset loading: glTF, textures, HDR environments, async patterns.","path":".agents/skills/threejs-loaders/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-threejs-materials","name":"threejs-materials","kind":"three","job":"material","line":"three.js materials: PBR, basic, shader materials and their properties.","path":".agents/skills/threejs-materials/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-threejs-postprocessing","name":"threejs-postprocessing","kind":"three","job":"effect","line":"three.js post-processing: bloom, depth of field, screen effects.","path":".agents/skills/threejs-postprocessing/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-threejs-shaders","name":"threejs-shaders","kind":"three","job":"effect","line":"three.js shaders: GLSL, uniforms, custom effects.","path":".agents/skills/threejs-shaders/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-threejs-textures","name":"threejs-textures","kind":"three","job":"material","line":"three.js textures: types, UV mapping, environment maps, settings.","path":".agents/skills/threejs-textures/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-threejs-world-generation","name":"threejs-world-generation","kind":"three","job":"3d","line":"Building editable three.js worlds you can fly a camera through, from text or a structured brief.","path":".agents/skills/threejs-world-generation/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-vercel-composition-patterns","name":"vercel-composition-patterns","kind":"skill","job":"layout","line":"React component composition patterns from Vercel. Front matter says MIT.","path":".agents/skills/vercel-composition-patterns/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-vercel-react-best-practices","name":"vercel-react-best-practices","kind":"skill","job":"code","line":"React and Next.js performance guidelines from Vercel. Front matter says MIT.","path":".agents/skills/vercel-react-best-practices/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-video-download","name":"video-download","kind":"skill","job":"footage","line":"Downloading video and audio from YouTube and other sites with yt-dlp.","path":".agents/skills/video-download/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-video-edit","name":"video-edit","kind":"skill","job":"edit","line":"Editing video locally with FFmpeg: trim, join, resize, speed, overlay, compress.","path":".agents/skills/video-edit/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-video-toolkit","name":"video-toolkit","kind":"skill","job":"whole video","line":"Making videos with a third-party Claude Code video toolkit: voiceovers, images, music, talking heads, Remotion rendering. A second copy sits in .claude/skills under the folder name video_toolkit.","path":".agents/skills/video-toolkit/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-video-translate","name":"video-translate","kind":"skill","job":"voice","line":"Translating and dubbing a video into other languages through HeyGen.","path":".agents/skills/video-translate/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-video-understand","name":"video-understand","kind":"skill","job":"review","line":"Understanding a video locally with FFmpeg frame samples and Whisper transcription.","path":".agents/skills/video-understand/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-visual-style","name":"visual-style","kind":"skill","job":"plan","line":"Creating, extracting and applying a portable visual design system kept in one style file.","path":".agents/skills/visual-style/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-web-design-guidelines","name":"web-design-guidelines","kind":"skill","job":"review","line":"Reviewing interface code against web interface guidelines.","path":".agents/skills/web-design-guidelines/SKILL.md","use":"","look_only":true},{"id":"openmontage/pack-website-to-video","name":"website-to-video","kind":"html-video","job":"whole video","line":"Capturing a website and turning it into a HyperFrames video (tour, showcase or social clip), with the same 19 bundled Pixabay sound effects. Copy of HeyGen's skill.","path":".agents/skills/website-to-video/SKILL.md","use":"","look_only":true},{"id":"openmontage/tool-audio-energy","name":"audio_energy","kind":"tool","job":"music","line":"Measures how loud a track is over time to find the best point to start the music from, so a quiet intro can be skipped. Runs on the machine; needs ffmpeg. Works with no keys.","path":"tools/analysis/audio_energy.py","use":"","needs":"Ffmpeg","look_only":true},{"id":"openmontage/tool-audio-probe","name":"audio_probe","kind":"tool","job":"review","line":"Reads the length and stream details of an audio or video file with ffprobe. Runs on the machine; needs ffprobe. Works with no keys.","path":"tools/analysis/audio_probe.py","use":"","needs":"Ffprobe","look_only":true},{"id":"openmontage/tool-azure-stt","name":"azure_stt","kind":"tool","job":"caption","line":"Speech to text through Azure AI Speech, with word timings. Calls an outside service; keys named in its code: AZURE_SPEECH_KEY. Needs a key, a program or a download before it works.","path":"tools/analysis/azure_stt.py","use":"","needs":"AZURE_SPEECH_KEY","look_only":true},{"id":"openmontage/tool-composition-validator","name":"composition_validator","kind":"tool","job":"review","line":"Checks a planned composition before rendering: catches audio and picture lengths that do not match and similar plan errors. Runs on the machine; needs ffprobe. Works with no keys.","path":"tools/analysis/composition_validator.py","use":"","needs":"Ffprobe","look_only":true},{"id":"openmontage/tool-dashscope-asr","name":"dashscope_asr","kind":"tool","job":"caption","line":"Speech to text through Alibaba's DashScope, with word timings. Calls an outside service; keys named in its code: DASHSCOPE_API_KEY. Needs a key, a program or a download before it works.","path":"tools/analysis/dashscope_asr.py","use":"","needs":"DASHSCOPE_API_KEY","look_only":true},{"id":"openmontage/tool-face-tracker","name":"face_tracker","kind":"tool","job":"frame","line":"Finds and follows a face through footage with MediaPipe, for reframing and face effects. Runs on the machine; needs ffmpeg. Needs a key, a program or a download before it works.","path":"tools/analysis/face_tracker.py","use":"","needs":"Ffmpeg","look_only":true},{"id":"openmontage/tool-frame-sampler","name":"frame_sampler","kind":"tool","job":"review","line":"Pulls still frames out of a video with FFmpeg, at set times or intervals. Runs on the machine; needs ffmpeg. Works with no keys.","path":"tools/analysis/frame_sampler.py","use":"","needs":"Ffmpeg","look_only":true},{"id":"openmontage/tool-mistral-stt","name":"mistral_stt","kind":"tool","job":"caption","line":"Speech to text through Mistral's Voxtral, with segment timings and speaker labels. Calls an outside service; keys named in its code: MISTRAL_API_KEY. Needs a key, a program or a download before it works.","path":"tools/analysis/mistral_stt.py","use":"","needs":"MISTRAL_API_KEY","look_only":true},{"id":"openmontage/tool-scene-detect","name":"scene_detect","kind":"tool","job":"edit","line":"Finds the cut points in a video. Runs on the machine; needs ffmpeg. Works with no keys.","path":"tools/analysis/scene_detect.py","use":"","needs":"Ffmpeg","look_only":true},{"id":"openmontage/tool-transcriber","name":"transcriber","kind":"tool","job":"caption","line":"Local speech to text with faster-whisper or WhisperX, word timings included; optional speaker labels with a HuggingFace token. Runs on the machine; needs faster_whisper. Needs a key, a program or a download before it works.","path":"tools/analysis/transcriber.py","use":"","needs":"Faster_whisper","look_only":true},{"id":"openmontage/tool-transcript-fetcher","name":"transcript_fetcher","kind":"tool","job":"caption","line":"Fetches the existing transcript of a YouTube video. Runs on the machine; needs youtube_transcript_api. Needs a key, a program or a download before it works.","path":"tools/analysis/transcript_fetcher.py","use":"","needs":"Youtube_transcript_api","look_only":true},{"id":"openmontage/tool-video-analyzer","name":"video_analyzer","kind":"tool","job":"review","line":"Takes a reference video apart: transcript, scenes, sampled frames and structure, written up as a brief the agent plans from. Runs on the machine; needs ffmpeg. Works with no keys.","path":"tools/analysis/video_analyzer.py","use":"","needs":"Ffmpeg","look_only":true},{"id":"openmontage/tool-video-downloader","name":"video_downloader","kind":"tool","job":"footage","line":"Downloads a video from a web address with yt-dlp. Runs on the machine; needs yt_dlp. Needs a key, a program or a download before it works.","path":"tools/analysis/video_downloader.py","use":"","needs":"Yt_dlp","look_only":true},{"id":"openmontage/tool-video-understand","name":"video_understand","kind":"tool","job":"review","line":"Describes frames or clips with a local vision-language model. Runs on your own GPU with model weights you download; needs transformers, torch. Needs a key, a program or a download before it works.","path":"tools/analysis/video_understand.py","use":"","needs":"A GPU and the model's weights; transformers, torch","look_only":true},{"id":"openmontage/tool-visual-qa","name":"visual_qa","kind":"tool","job":"review","line":"Automatic checks on a rendered video: black frames, frozen stretches and similar faults, from sampled frames. Runs on the machine; needs ffmpeg, ffprobe. Works with no keys.","path":"tools/analysis/visual_qa.py","use":"","needs":"Ffmpeg, ffprobe","look_only":true},{"id":"openmontage/tool-audio-enhance","name":"audio_enhance","kind":"tool","job":"audio","line":"Cleans up speech: noise reduction and loudness levelling with FFmpeg. Runs on the machine; needs ffmpeg. Works with no keys.","path":"tools/audio/audio_enhance.py","use":"","needs":"Ffmpeg","look_only":true},{"id":"openmontage/tool-audio-mixer","name":"audio_mixer","kind":"tool","job":"audio","line":"Mixes narration, music and effects into one track, with ducking under speech and fades. Runs on the machine; needs ffmpeg. Works with no keys.","path":"tools/audio/audio_mixer.py","use":"","needs":"Ffmpeg","look_only":true},{"id":"openmontage/tool-azure-tts","name":"azure_tts","kind":"tool","job":"voice","line":"Text to speech through Azure AI Speech neural voices. Calls an outside service; keys named in its code: AZURE_SPEECH_KEY. Needs a key, a program or a download before it works.","path":"tools/audio/azure_tts.py","use":"","needs":"AZURE_SPEECH_KEY","look_only":true},{"id":"openmontage/tool-cartesia-tts","name":"cartesia_tts","kind":"tool","job":"voice","line":"Text to speech through Cartesia Sonic. Calls an outside service; keys named in its code: CARTESIA_API_KEY. Needs a key, a program or a download before it works.","path":"tools/audio/cartesia_tts.py","use":"","needs":"CARTESIA_API_KEY","look_only":true},{"id":"openmontage/tool-comfyui-music","name":"comfyui_music","kind":"tool","job":"music","line":"Music generation through a ComfyUI server you run. Runs on your own GPU with model weights you download. Needs a key, a program or a download before it works.","path":"tools/audio/comfyui_music.py","use":"","needs":"A GPU and the model's weights","look_only":true},{"id":"openmontage/tool-dashscope-tts","name":"dashscope_tts","kind":"tool","job":"voice","line":"Text to speech through Alibaba's DashScope (Qwen voices), strong in Mandarin. Calls an outside service; keys named in its code: DASHSCOPE_API_KEY. Needs a key, a program or a download before it works.","path":"tools/audio/dashscope_tts.py","use":"","needs":"DASHSCOPE_API_KEY","look_only":true},{"id":"openmontage/tool-doubao-tts","name":"doubao_tts","kind":"tool","job":"voice","line":"Text to speech through Volcengine Doubao Speech, Mandarin first. Calls an outside service; keys named in its code: DOUBAO_SPEECH_API_KEY. Needs a key, a program or a download before it works.","path":"tools/audio/doubao_tts.py","use":"","needs":"DOUBAO_SPEECH_API_KEY","look_only":true},{"id":"openmontage/tool-elevenlabs-soundtrack","name":"elevenlabs_soundtrack","kind":"tool","job":"music","line":"A soundtrack written to a finished video by ElevenLabs, with stems. Calls an outside service; keys named in its code: ELEVENLABS_API_KEY. Needs a key, a program or a download before it works.","path":"tools/audio/elevenlabs_soundtrack.py","use":"","needs":"ELEVENLABS_API_KEY","look_only":true},{"id":"openmontage/tool-elevenlabs-tts","name":"elevenlabs_tts","kind":"tool","job":"voice","line":"Text to speech through ElevenLabs. Calls an outside service; keys named in its code: ELEVENLABS_API_KEY. Needs a key, a program or a download before it works.","path":"tools/audio/elevenlabs_tts.py","use":"","needs":"ELEVENLABS_API_KEY","look_only":true},{"id":"openmontage/tool-fal-elevenlabs-music","name":"fal_elevenlabs_music","kind":"tool","job":"music","line":"ElevenLabs music generation reached through a fal.ai account. Calls an outside service; keys named in its code: FAL_AI_API_KEY, FAL_KEY. Needs a key, a program or a download before it works.","path":"tools/audio/fal_elevenlabs_music.py","use":"","needs":"FAL_AI_API_KEY, FAL_KEY","look_only":true},{"id":"openmontage/tool-fal-elevenlabs-tts","name":"fal_elevenlabs_tts","kind":"tool","job":"voice","line":"ElevenLabs speech reached through a fal.ai account. Calls an outside service; keys named in its code: FAL_AI_API_KEY, FAL_KEY. Needs a key, a program or a download before it works.","path":"tools/audio/fal_elevenlabs_tts.py","use":"","needs":"FAL_AI_API_KEY, FAL_KEY","look_only":true},{"id":"openmontage/tool-fish-audio-tts","name":"fish_audio_tts","kind":"tool","job":"voice","line":"Text to speech through fish.audio, including cloned voices by reference. Calls an outside service; keys named in its code: FISH_AUDIO_API_KEY. Needs a key, a program or a download before it works.","path":"tools/audio/fish_audio_tts.py","use":"","needs":"FISH_AUDIO_API_KEY","look_only":true},{"id":"openmontage/tool-freesound-music","name":"freesound_music","kind":"tool","job":"music","line":"Searches and downloads tracks from Freesound.org. Calls an outside service; keys named in its code: FREESOUND_API_KEY. Needs a key, a program or a download before it works.","path":"tools/audio/freesound_music.py","use":"","needs":"FREESOUND_API_KEY","look_only":true},{"id":"openmontage/tool-gemini-tts","name":"gemini_tts","kind":"tool","job":"voice","line":"Text to speech through Google's Gemini speech models, including directed dialogue. Calls an outside service; keys named in its code: GEMINI_API_KEY, GOOGLE_API_KEY. Needs a key, a program or a download before it works.","path":"tools/audio/gemini_tts.py","use":"","needs":"GEMINI_API_KEY, GOOGLE_API_KEY","look_only":true},{"id":"openmontage/tool-google-music","name":"google_music","kind":"tool","job":"music","line":"Music generation through Google Lyria. Calls an outside service; needs that service's key or sign-in (see the tool's own install note). Needs a key, a program or a download before it works.","path":"tools/audio/google_music.py","use":"","needs":"That service's key or sign-in","look_only":true},{"id":"openmontage/tool-google-tts","name":"google_tts","kind":"tool","job":"voice","line":"Text to speech through Google Cloud, hundreds of voices across many languages. Calls an outside service; keys named in its code: GEMINI_API_KEY, GOOGLE_API_KEY, GOOGLE_TTS_API_KEY. Needs a key, a program or a download before it works.","path":"tools/audio/google_tts.py","use":"","needs":"GEMINI_API_KEY, GOOGLE_API_KEY, GOOGLE_TTS_API_KEY","look_only":true},{"id":"openmontage/tool-grok-tts","name":"grok_tts","kind":"tool","job":"voice","line":"Narration through xAI's speech API. Calls an outside service; keys named in its code: XAI_API_KEY. Needs a key, a program or a download before it works.","path":"tools/audio/grok_tts.py","use":"","needs":"XAI_API_KEY","look_only":true},{"id":"openmontage/tool-heygen-catalog-tts","name":"heygen_catalog_tts","kind":"tool","job":"voice","line":"Speech from HeyGen's catalog of voices. Calls an outside service; keys named in its code: HEYGEN_API_KEY. Needs a key, a program or a download before it works.","path":"tools/audio/heygen_catalog_tts.py","use":"","needs":"HEYGEN_API_KEY","look_only":true},{"id":"openmontage/tool-heygen-tts","name":"heygen_tts","kind":"tool","job":"voice","line":"Speech from HeyGen's own voice model, with voice discovery. Calls an outside service; keys named in its code: HEYGEN_API_KEY. Needs a key, a program or a download before it works.","path":"tools/audio/heygen_tts.py","use":"","needs":"HEYGEN_API_KEY","look_only":true},{"id":"openmontage/tool-heygen-voice-convert","name":"heygen_voice_convert","kind":"tool","job":"voice","line":"Changes the voice of a recording to another voice while keeping its timing, through HeyGen. Calls an outside service; keys named in its code: HEYGEN_API_KEY. Needs a key, a program or a download before it works.","path":"tools/audio/heygen_voice_convert.py","use":"","needs":"HEYGEN_API_KEY","look_only":true},{"id":"openmontage/tool-inworld-tts","name":"inworld_tts","kind":"tool","job":"voice","line":"Text to speech through Inworld. Calls an outside service; keys named in its code: INWORLD_API_KEY. Needs a key, a program or a download before it works.","path":"tools/audio/inworld_tts.py","use":"","needs":"INWORLD_API_KEY","look_only":true},{"id":"openmontage/tool-kling-tts","name":"kling_tts","kind":"tool","job":"voice","line":"Text to speech through Kling's official API. Calls an outside service; keys named in its code: KLING_API_KEY. Needs a key, a program or a download before it works.","path":"tools/audio/kling_tts.py","use":"","needs":"KLING_API_KEY","look_only":true},{"id":"openmontage/tool-mai-tts","name":"mai_tts","kind":"tool","job":"voice","line":"Text to speech through Microsoft's MAI Voice models over Azure Speech. Calls an outside service; keys named in its code: AZURE_SPEECH_KEY. Needs a key, a program or a download before it works.","path":"tools/audio/mai_tts.py","use":"","needs":"AZURE_SPEECH_KEY","look_only":true},{"id":"openmontage/tool-minicut-music","name":"minicut_music","kind":"tool","job":"music","line":"Music (Google Lyria) bought through the MiniCut command-line program: it quotes a price first, then runs on a yes. Needs the separate MiniCut command-line program installed and signed in; it charges per job. Needs a key, a program or a download before it works.","path":"tools/audio/minicut_music.py","use":"","needs":"The MiniCut command-line program and an account with it","look_only":true},{"id":"openmontage/tool-minicut-music-fit","name":"minicut_music_fit","kind":"tool","job":"music","line":"Music written to fit a finished cut, changing at each edit point, through the MiniCut command-line program. Needs the separate MiniCut command-line program installed and signed in; it charges per job. Needs a key, a program or a download before it works.","path":"tools/audio/minicut_music_fit.py","use":"","needs":"The MiniCut command-line program and an account with it","look_only":true},{"id":"openmontage/tool-minicut-sfx","name":"minicut_sfx","kind":"tool","job":"audio","line":"One sound effect from a line of text, through the MiniCut command-line program. Needs the separate MiniCut command-line program installed and signed in; it charges per job. Needs a key, a program or a download before it works.","path":"tools/audio/minicut_sfx.py","use":"","needs":"The MiniCut command-line program and an account with it","look_only":true},{"id":"openmontage/tool-minicut-tts","name":"minicut_tts","kind":"tool","job":"voice","line":"ElevenLabs speech bought through the MiniCut command-line program, price first. Needs the separate MiniCut command-line program installed and signed in; it charges per job. Needs a key, a program or a download before it works.","path":"tools/audio/minicut_tts.py","use":"","needs":"The MiniCut command-line program and an account with it","look_only":true},{"id":"openmontage/tool-mistral-tts","name":"mistral_tts","kind":"tool","job":"voice","line":"Text to speech through Mistral's Voxtral. Calls an outside service; keys named in its code: MISTRAL_API_KEY. Needs a key, a program or a download before it works.","path":"tools/audio/mistral_tts.py","use":"","needs":"MISTRAL_API_KEY","look_only":true},{"id":"openmontage/tool-music-gen","name":"music_gen","kind":"tool","job":"music","line":"Music generation through the ElevenLabs Music API. Calls an outside service; keys named in its code: ELEVENLABS_API_KEY. Needs a key, a program or a download before it works.","path":"tools/audio/music_gen.py","use":"","needs":"ELEVENLABS_API_KEY","look_only":true},{"id":"openmontage/tool-music-library","name":"music_library","kind":"tool","job":"music","line":"Looks in a local folder of tracks the user has supplied and lists what is there with lengths. Runs on the machine. Needs a key, a program or a download before it works.","path":"tools/audio/music_library.py","use":"","look_only":true},{"id":"openmontage/tool-openai-tts","name":"openai_tts","kind":"tool","job":"voice","line":"Text to speech through OpenAI. Calls an outside service; keys named in its code: OPENAI_API_KEY. Needs a key, a program or a download before it works.","path":"tools/audio/openai_tts.py","use":"","needs":"OPENAI_API_KEY","look_only":true},{"id":"openmontage/tool-piper-tts","name":"piper_tts","kind":"tool","job":"voice","line":"Free offline text to speech with Piper; plain but usable narration with no key. Runs on the machine; needs piper. Needs a key, a program or a download before it works.","path":"tools/audio/piper_tts.py","use":"","needs":"Piper","look_only":true},{"id":"openmontage/tool-pixabay-music","name":"pixabay_music","kind":"tool","job":"music","line":"Searches and downloads music from Pixabay Music with no key. Calls Pixabay's site; no key. Works with no keys.","path":"tools/audio/pixabay_music.py","use":"","needs":"Network","look_only":true},{"id":"openmontage/tool-realtime-audio","name":"realtime_audio","kind":"tool","job":"voice","line":"Live two-way speech sessions with ElevenLabs, Microsoft or xAI; kept apart from narration. Calls an outside service; keys named in its code: ELEVENLABS_API_KEY, MAI_API_KEY, XAI_API_KEY. Needs a key, a program or a download before it works.","path":"tools/audio/realtime_audio.py","use":"","needs":"ELEVENLABS_API_KEY, MAI_API_KEY, XAI_API_KEY","look_only":true},{"id":"openmontage/tool-suno-music","name":"suno_music","kind":"tool","job":"music","line":"Full songs with vocals from Suno, through a third-party API site. Calls an outside service; keys named in its code: SUNO_API_KEY. Needs a key, a program or a download before it works.","path":"tools/audio/suno_music.py","use":"","needs":"SUNO_API_KEY","look_only":true},{"id":"openmontage/tool-tts-selector","name":"tts_selector","kind":"tool","job":"voice","line":"Picks the best available speech provider for the job by score and routes the request to it. Routes to whatever provider is installed or keyed. Needs a key, a program or a download before it works.","path":"tools/audio/tts_selector.py","use":"","needs":"At least one provider of its kind set up","look_only":true},{"id":"openmontage/tool-heygen-avatar","name":"heygen_avatar","kind":"tool","job":"avatar","line":"A presenter video from a HeyGen digital twin. Calls an outside service; keys named in its code: HEYGEN_API_KEY. Needs a key, a program or a download before it works.","path":"tools/avatar/heygen_avatar.py","use":"","needs":"HEYGEN_API_KEY","look_only":true},{"id":"openmontage/tool-kling-avatar","name":"kling_avatar","kind":"tool","job":"avatar","line":"A talking presenter clip from one image, through Kling's official API. Calls an outside service; keys named in its code: KLING_API_KEY. Needs a key, a program or a download before it works.","path":"tools/avatar/kling_avatar.py","use":"","needs":"KLING_API_KEY","look_only":true},{"id":"openmontage/tool-kling-lip-sync","name":"kling_lip_sync","kind":"tool","job":"avatar","line":"Re-syncs the lips of an existing presenter video to new audio, through Kling's official API. Calls an outside service; keys named in its code: KLING_API_KEY. Needs a key, a program or a download before it works.","path":"tools/avatar/kling_lip_sync.py","use":"","needs":"KLING_API_KEY","look_only":true},{"id":"openmontage/tool-lip-sync","name":"lip_sync","kind":"tool","job":"avatar","line":"Local lip sync with Wav2Lip, for dubbing. Runs on your own GPU with model weights you download; needs torch, ffmpeg. Needs a key, a program or a download before it works.","path":"tools/avatar/lip_sync.py","use":"","needs":"A GPU and the model's weights; torch, ffmpeg","look_only":true},{"id":"openmontage/tool-talking-head","name":"talking_head","kind":"tool","job":"avatar","line":"A talking-head video from one face photo and an audio file, locally with SadTalker. Runs on your own GPU with model weights you download. Needs a key, a program or a download before it works.","path":"tools/avatar/talking_head.py","use":"","needs":"A GPU and the model's weights","look_only":true},{"id":"openmontage/tool-cap-recorder","name":"cap_recorder","kind":"tool","job":"capture","line":"Screen recording through the Cap desktop app, with webcam overlay. Runs on the machine. Works with no keys.","path":"tools/capture/cap_recorder.py","use":"","look_only":true},{"id":"openmontage/tool-screen-capture-selector","name":"screen_capture_selector","kind":"tool","job":"capture","line":"Chooses between the plain FFmpeg screen recorder and Cap. Routes to whatever provider is installed or keyed. Works with no keys.","path":"tools/capture/screen_capture_selector.py","use":"","needs":"At least one provider of its kind set up","look_only":true},{"id":"openmontage/tool-screen-recorder","name":"screen_recorder","kind":"tool","job":"capture","line":"Screen recording with FFmpeg alone. Runs on the machine; needs ffmpeg. Works with no keys.","path":"tools/capture/screen_recorder.py","use":"","needs":"Ffmpeg","look_only":true},{"id":"openmontage/tool-action-timeline-compiler","name":"action_timeline_compiler","kind":"tool","job":"move","line":"Compiles a scene plan into a timed list of character actions and poses. Runs on the machine. Works with no keys.","path":"tools/character/character_animation.py","use":"","look_only":true},{"id":"openmontage/tool-character-animation-reviewer","name":"character_animation_reviewer","kind":"tool","job":"review","line":"Checks a character animation: rig integrity, motion and render readiness, as a report. Runs on the machine. Works with no keys.","path":"tools/character/character_animation.py","use":"","look_only":true},{"id":"openmontage/tool-character-rig-renderer","name":"character_rig_renderer","kind":"tool","job":"render","line":"Renders a rigged character performance in a browser to frames and video. Runs on the machine. Works with no keys.","path":"tools/character/character_animation.py","use":"","look_only":true},{"id":"openmontage/tool-character-spec-generator","name":"character_spec_generator","kind":"tool","job":"rig","line":"Turns an approved character idea into a structured character design file. Runs on the machine. Works with no keys.","path":"tools/character/character_animation.py","use":"","look_only":true},{"id":"openmontage/tool-pose-library-builder","name":"pose_library_builder","kind":"tool","job":"rig","line":"Builds a library of named poses and expressions for a rig. Runs on the machine. Works with no keys.","path":"tools/character/character_animation.py","use":"","look_only":true},{"id":"openmontage/tool-svg-rig-builder","name":"svg_rig_builder","kind":"tool","job":"rig","line":"Builds an SVG character rig: parts, pivots and layers. Runs on the machine. Works with no keys.","path":"tools/character/character_animation.py","use":"","look_only":true},{"id":"openmontage/tool-bg-remove","name":"bg_remove","kind":"tool","job":"effect","line":"Cuts the background out of an image with rembg. Routes to whatever provider is installed or keyed. Needs a key, a program or a download before it works.","path":"tools/enhancement/bg_remove.py","use":"","needs":"At least one provider of its kind set up","look_only":true},{"id":"openmontage/tool-color-grade","name":"color_grade","kind":"tool","job":"effect","line":"Applies a color grade with FFmpeg filters or a LUT; named looks included. Runs on the machine; needs ffmpeg. Works with no keys.","path":"tools/enhancement/color_grade.py","use":"","needs":"Ffmpeg","look_only":true},{"id":"openmontage/tool-eye-enhance","name":"eye_enhance","kind":"tool","job":"effect","line":"Brightens and sharpens eyes in talking-head footage. Runs on the machine; needs ffmpeg. Needs a key, a program or a download before it works.","path":"tools/enhancement/eye_enhance.py","use":"","needs":"Ffmpeg","look_only":true},{"id":"openmontage/tool-face-enhance","name":"face_enhance","kind":"tool","job":"effect","line":"Light face clean-up with FFmpeg filters. Runs on the machine; needs ffmpeg. Works with no keys.","path":"tools/enhancement/face_enhance.py","use":"","needs":"Ffmpeg","look_only":true},{"id":"openmontage/tool-face-restore","name":"face_restore","kind":"tool","job":"effect","line":"Rebuilds degraded faces with CodeFormer or GFPGAN. Runs on your own GPU with model weights you download; needs gfpgan, torch. Needs a key, a program or a download before it works.","path":"tools/enhancement/face_restore.py","use":"","needs":"A GPU and the model's weights; gfpgan, torch","look_only":true},{"id":"openmontage/tool-minicut-upscale","name":"minicut_upscale","kind":"tool","job":"effect","line":"Cloud video upscale (Topaz) bought through the MiniCut command-line program. Needs the separate MiniCut command-line program installed and signed in; it charges per job. Needs a key, a program or a download before it works.","path":"tools/enhancement/minicut_upscale.py","use":"","needs":"The MiniCut command-line program and an account with it","look_only":true},{"id":"openmontage/tool-upscale","name":"upscale","kind":"tool","job":"effect","line":"Upscales images and video locally with Real-ESRGAN. Runs on your own GPU with model weights you download; needs realesrgan, torch, ffmpeg. Needs a key, a program or a download before it works.","path":"tools/enhancement/upscale.py","use":"","needs":"A GPU and the model's weights; realesrgan, torch, ffmpeg","look_only":true},{"id":"openmontage/tool-atlas-3d","name":"atlas_3d","kind":"tool","job":"3d","line":"A 3D model from a text description, through Atlas Cloud. Calls an outside service; keys named in its code: ATLASCLOUD_API_KEY, ATLAS_API_KEY, ATLAS_CLOUD_API_KEY. Needs a key, a program or a download before it works.","path":"tools/graphics/atlas_3d.py","use":"","needs":"ATLASCLOUD_API_KEY, ATLAS_API_KEY, ATLAS_CLOUD_API_KEY","look_only":true},{"id":"openmontage/tool-atlas-image","name":"atlas_image","kind":"tool","job":"image","line":"Image generation and editing through Atlas Cloud (Seedream and others). Calls an outside service; keys named in its code: ATLASCLOUD_API_KEY. Needs a key, a program or a download before it works.","path":"tools/graphics/atlas_image.py","use":"","needs":"ATLASCLOUD_API_KEY","look_only":true},{"id":"openmontage/tool-atlas-refresh-image","name":"atlas_refresh_image","kind":"tool","job":"image","line":"OpenAI and Google image models reached through Atlas Cloud. Calls an outside service; keys named in its code: ATLASCLOUD_API_KEY. Needs a key, a program or a download before it works.","path":"tools/graphics/atlas_refresh_image.py","use":"","needs":"ATLASCLOUD_API_KEY","look_only":true},{"id":"openmontage/tool-bfl-image","name":"bfl_image","kind":"tool","job":"image","line":"FLUX image generation direct from Black Forest Labs. Calls an outside service; keys named in its code: BFL_API_KEY. Needs a key, a program or a download before it works.","path":"tools/graphics/bfl_image.py","use":"","needs":"BFL_API_KEY","look_only":true},{"id":"openmontage/tool-blender-world","name":"blender_world","kind":"tool","job":"3d","line":"Assembles and renders a 3D world in Blender from generated and licensed assets. Runs on your own GPU with model weights you download. Needs a key, a program or a download before it works.","path":"tools/graphics/blender_world.py","use":"","needs":"A GPU and the model's weights","look_only":true},{"id":"openmontage/tool-bria-fal-image","name":"bria_fal_image","kind":"tool","job":"image","line":"Bria image generation reached through fal.ai. Calls an outside service; keys named in its code: FAL_KEY. Needs a key, a program or a download before it works.","path":"tools/graphics/bria_fal_image.py","use":"","needs":"FAL_KEY","look_only":true},{"id":"openmontage/tool-bria-image","name":"bria_image","kind":"tool","job":"image","line":"Bria image generation and editing, direct. Calls an outside service; keys named in its code: BRIA_API_TOKEN. Needs a key, a program or a download before it works.","path":"tools/graphics/bria_image.py","use":"","needs":"BRIA_API_TOKEN","look_only":true},{"id":"openmontage/tool-code-snippet","name":"code_snippet","kind":"tool","job":"code","line":"Renders a piece of source code as a highlighted image for an overlay. Runs on the machine; needs pygments, PIL. Needs a key, a program or a download before it works.","path":"tools/graphics/code_snippet.py","use":"","needs":"Pygments, PIL","look_only":true},{"id":"openmontage/tool-comfyui-image","name":"comfyui_image","kind":"tool","job":"image","line":"Image generation through a ComfyUI server you run. Runs on your own GPU with model weights you download. Needs a key, a program or a download before it works.","path":"tools/graphics/comfyui_image.py","use":"","needs":"A GPU and the model's weights","look_only":true},{"id":"openmontage/tool-dashscope-image","name":"dashscope_image","kind":"tool","job":"image","line":"Image generation through Alibaba's DashScope (Qwen Image). Calls an outside service; keys named in its code: DASHSCOPE_API_KEY. Needs a key, a program or a download before it works.","path":"tools/graphics/dashscope_image.py","use":"","needs":"DASHSCOPE_API_KEY","look_only":true},{"id":"openmontage/tool-diagram-gen","name":"diagram_gen","kind":"tool","job":"diagram","line":"Draws a diagram from Mermaid text, with Graphviz or a plain drawing fallback. Runs on the machine. Works in part with no keys.","path":"tools/graphics/diagram_gen.py","use":"","look_only":true},{"id":"openmontage/tool-fal-3d","name":"fal_3d","kind":"tool","job":"3d","line":"A 3D model from text or a picture, and object reconstruction, through fal.ai. Calls an outside service; keys named in its code: FAL_AI_API_KEY, FAL_KEY. Needs a key, a program or a download before it works.","path":"tools/graphics/fal_3d.py","use":"","needs":"FAL_AI_API_KEY, FAL_KEY","look_only":true},{"id":"openmontage/tool-flux3-fal-image","name":"flux3_fal_image","kind":"tool","job":"image","line":"FLUX 3 image generation through fal.ai. Calls an outside service; keys named in its code: FAL_KEY. Needs a key, a program or a download before it works.","path":"tools/graphics/flux3_fal_image.py","use":"","needs":"FAL_KEY","look_only":true},{"id":"openmontage/tool-flux3-replicate-image","name":"flux3_replicate_image","kind":"tool","job":"image","line":"FLUX 3 image generation through Replicate. Calls an outside service; keys named in its code: REPLICATE_API_TOKEN. Needs a key, a program or a download before it works.","path":"tools/graphics/flux3_replicate_image.py","use":"","needs":"REPLICATE_API_TOKEN","look_only":true},{"id":"openmontage/tool-flux-image","name":"flux_image","kind":"tool","job":"image","line":"FLUX image generation through fal.ai. Calls an outside service; keys named in its code: FAL_AI_API_KEY. Needs a key, a program or a download before it works.","path":"tools/graphics/flux_image.py","use":"","needs":"FAL_AI_API_KEY","look_only":true},{"id":"openmontage/tool-gemini-fal-image","name":"gemini_fal_image","kind":"tool","job":"image","line":"Google's image model reached through fal.ai, generation and editing. Calls an outside service; keys named in its code: FAL_KEY. Needs a key, a program or a download before it works.","path":"tools/graphics/gemini_fal_image.py","use":"","needs":"FAL_KEY","look_only":true},{"id":"openmontage/tool-gemini-replicate-image","name":"gemini_replicate_image","kind":"tool","job":"image","line":"Google's image model reached through Replicate. Calls an outside service; keys named in its code: REPLICATE_API_TOKEN. Needs a key, a program or a download before it works.","path":"tools/graphics/gemini_replicate_image.py","use":"","needs":"REPLICATE_API_TOKEN","look_only":true},{"id":"openmontage/tool-google-imagen","name":"google_imagen","kind":"tool","job":"image","line":"Google Imagen image generation. Calls an outside service; keys named in its code: GEMINI_API_KEY, GOOGLE_API_KEY. Needs a key, a program or a download before it works.","path":"tools/graphics/google_imagen.py","use":"","needs":"GEMINI_API_KEY, GOOGLE_API_KEY","look_only":true},{"id":"openmontage/tool-grok-image","name":"grok_image","kind":"tool","job":"image","line":"xAI Grok image generation and editing. Calls an outside service; keys named in its code: XAI_API_KEY. Needs a key, a program or a download before it works.","path":"tools/graphics/grok_image.py","use":"","needs":"XAI_API_KEY","look_only":true},{"id":"openmontage/tool-hunyuan-image","name":"hunyuan_image","kind":"tool","job":"image","line":"Tencent Hunyuan image generation through TokenHub. Calls an outside service; keys named in its code: TENCENT_TOKENHUB_API_KEY. Needs a key, a program or a download before it works.","path":"tools/graphics/hunyuan_image.py","use":"","needs":"TENCENT_TOKENHUB_API_KEY","look_only":true},{"id":"openmontage/tool-ideogram-fal-image","name":"ideogram_fal_image","kind":"tool","job":"image","line":"Ideogram generation and regional edits through fal.ai; good at readable lettering. Calls an outside service; keys named in its code: FAL_KEY. Needs a key, a program or a download before it works.","path":"tools/graphics/ideogram_fal_image.py","use":"","needs":"FAL_KEY","look_only":true},{"id":"openmontage/tool-ideogram-image","name":"ideogram_image","kind":"tool","job":"image","line":"Ideogram generation and precise local edits, direct. Calls an outside service; keys named in its code: IDEOGRAM_API_KEY. Needs a key, a program or a download before it works.","path":"tools/graphics/ideogram_image.py","use":"","needs":"IDEOGRAM_API_KEY","look_only":true},{"id":"openmontage/tool-image-gen","name":"image_gen","kind":"tool","job":"image","line":"An older all-in-one image tool; the repo marks it deprecated in favor of the selector. Routes to whatever provider is installed or keyed; keys named in its code: FAL_AI_API_KEY, OPENAI_API_KEY. Needs a key, a program or a download before it works.","path":"tools/graphics/image_gen.py","use":"","needs":"At least one provider of its kind set up","look_only":true},{"id":"openmontage/tool-image-selector","name":"image_selector","kind":"tool","job":"image","line":"Picks the best available image source for the job, generated or stock, and routes the request to it. Routes to whatever provider is installed or keyed. Needs a key, a program or a download before it works.","path":"tools/graphics/image_selector.py","use":"","needs":"At least one provider of its kind set up","look_only":true},{"id":"openmontage/tool-kling-o3-fal-image","name":"kling_o3_fal_image","kind":"tool","job":"image","line":"Kling image generation and reference edits through fal.ai. Calls an outside service; keys named in its code: FAL_KEY. Needs a key, a program or a download before it works.","path":"tools/graphics/kling_o3_fal_image.py","use":"","needs":"FAL_KEY","look_only":true},{"id":"openmontage/tool-kling-official-image","name":"kling_official_image","kind":"tool","job":"image","line":"Image generation through Kling's official API. Calls an outside service; keys named in its code: KLING_API_KEY. Needs a key, a program or a download before it works.","path":"tools/graphics/kling_official_image.py","use":"","needs":"KLING_API_KEY","look_only":true},{"id":"openmontage/tool-local-diffusion","name":"local_diffusion","kind":"tool","job":"image","line":"Local Stable Diffusion image generation on your own GPU. Runs on your own GPU with model weights you download. Needs a key, a program or a download before it works.","path":"tools/graphics/local_diffusion.py","use":"","needs":"A GPU and the model's weights","look_only":true},{"id":"openmontage/tool-mai-image","name":"mai_image","kind":"tool","job":"image","line":"Microsoft MAI image generation on a Foundry deployment. Calls an outside service; keys named in its code: MAI_API_KEY, MAI_ENDPOINT, MAI_IMAGE_DEPLOYMENT. Needs a key, a program or a download before it works.","path":"tools/graphics/mai_image.py","use":"","needs":"MAI_API_KEY, MAI_ENDPOINT, MAI_IMAGE_DEPLOYMENT","look_only":true},{"id":"openmontage/tool-math-animate","name":"math_animate","kind":"tool","job":"move","line":"Mathematical animation with Manim. Runs on the machine; needs manim. Needs a key, a program or a download before it works.","path":"tools/graphics/math_animate.py","use":"","needs":"Manim","look_only":true},{"id":"openmontage/tool-minicut-image","name":"minicut_image","kind":"tool","job":"image","line":"OpenAI image generation bought through the MiniCut command-line program, price first. Needs the separate MiniCut command-line program installed and signed in; it charges per job. Needs a key, a program or a download before it works.","path":"tools/graphics/minicut_image.py","use":"","needs":"The MiniCut command-line program and an account with it","look_only":true},{"id":"openmontage/tool-minimax-image","name":"minimax_image","kind":"tool","job":"image","line":"MiniMax image generation, direct. Calls an outside service; keys named in its code: MINIMAX_API_KEY. Needs a key, a program or a download before it works.","path":"tools/graphics/minimax_image.py","use":"","needs":"MINIMAX_API_KEY","look_only":true},{"id":"openmontage/tool-openai-fal-image","name":"openai_fal_image","kind":"tool","job":"image","line":"OpenAI's image model reached through fal.ai. Calls an outside service; keys named in its code: FAL_KEY. Needs a key, a program or a download before it works.","path":"tools/graphics/openai_fal_image.py","use":"","needs":"FAL_KEY","look_only":true},{"id":"openmontage/tool-openai-image","name":"openai_image","kind":"tool","job":"image","line":"OpenAI image generation, direct. Calls an outside service; keys named in its code: OPENAI_API_KEY. Needs a key, a program or a download before it works.","path":"tools/graphics/openai_image.py","use":"","needs":"OPENAI_API_KEY","look_only":true},{"id":"openmontage/tool-pexels-image","name":"pexels_image","kind":"tool","job":"image","line":"Stock photo search and download from Pexels. Calls an outside service; keys named in its code: PEXELS_API_KEY. Needs a key, a program or a download before it works.","path":"tools/graphics/pexels_image.py","use":"","needs":"PEXELS_API_KEY","look_only":true},{"id":"openmontage/tool-pixabay-image","name":"pixabay_image","kind":"tool","job":"image","line":"Stock image search and download from Pixabay. Calls an outside service; keys named in its code: PIXABAY_API_KEY. Needs a key, a program or a download before it works.","path":"tools/graphics/pixabay_image.py","use":"","needs":"PIXABAY_API_KEY","look_only":true},{"id":"openmontage/tool-qwen-image-21","name":"qwen_image_21","kind":"tool","job":"image","line":"Local Qwen Image generation and editing from weights you have already downloaded. Runs on your own GPU with model weights you download. Needs a key, a program or a download before it works.","path":"tools/graphics/qwen_image_21.py","use":"","needs":"A GPU and the model's weights","look_only":true},{"id":"openmontage/tool-recraft-image","name":"recraft_image","kind":"tool","job":"image","line":"Recraft image generation through fal.ai; aimed at logos and brand graphics. Calls an outside service; keys named in its code: FAL_AI_API_KEY. Needs a key, a program or a download before it works.","path":"tools/graphics/recraft_image.py","use":"","needs":"FAL_AI_API_KEY","look_only":true},{"id":"openmontage/tool-seedream-image","name":"seedream_image","kind":"tool","job":"image","line":"Seedream image generation through fal.ai. Calls an outside service; keys named in its code: FAL_AI_API_KEY, FAL_KEY. Needs a key, a program or a download before it works.","path":"tools/graphics/seedream_image.py","use":"","needs":"FAL_AI_API_KEY, FAL_KEY","look_only":true},{"id":"openmontage/tool-threejs-asset-catalog","name":"threejs_asset_catalog","kind":"tool","job":"3d","line":"Brings licensed 3D model and texture packs into a local catalog for three.js worlds, keeping the license of each. Routes to whatever provider is installed or keyed. Works with no keys.","path":"tools/graphics/threejs_asset_catalog.py","use":"","needs":"At least one provider of its kind set up","look_only":true},{"id":"openmontage/tool-threejs-world","name":"threejs_world","kind":"tool","job":"3d","line":"Builds an editable three.js world from a structured description (terrain, regions, camera path) for rendering through HyperFrames. Runs on the machine. Works with no keys.","path":"tools/graphics/threejs_world.py","use":"","look_only":true},{"id":"openmontage/tool-export-bundle","name":"export_bundle","kind":"tool","job":"publish","line":"Packs a finished render with its metadata into a folder ready to hand to any platform; it uploads nothing. Runs on the machine. Works with no keys.","path":"tools/publishers/export_bundle.py","use":"","look_only":true},{"id":"openmontage/tool-subtitle-gen","name":"subtitle_gen","kind":"tool","job":"caption","line":"Turns a timed transcript into subtitle files (SRT, VTT, ASS). Runs on the machine. Works with no keys.","path":"tools/subtitle/subtitle_gen.py","use":"","look_only":true},{"id":"openmontage/tool-atlas-video","name":"atlas_video","kind":"tool","job":"video clip","line":"Video generation through Atlas Cloud (Seedance and others). Calls an outside service; keys named in its code: ATLASCLOUD_API_KEY. Needs a key, a program or a download before it works.","path":"tools/video/atlas_video.py","use":"","needs":"ATLASCLOUD_API_KEY","look_only":true},{"id":"openmontage/tool-auto-reframe","name":"auto_reframe","kind":"tool","job":"frame","line":"Converts a video to another shape, such as wide to tall, keeping the face in frame. Runs on the machine; needs ffmpeg. Works with no keys.","path":"tools/video/auto_reframe.py","use":"","needs":"Ffmpeg","look_only":true},{"id":"openmontage/tool-bgm-montage-lite","name":"bgm_montage_lite","kind":"tool","job":"edit","line":"Cuts supplied clips to the beat of one music track, through the separate BMTS-Lite program (itself AGPL-3.0-only, by another author). Runs on the machine; needs ffmpeg, ffprobe. Needs a key, a program or a download before it works.","path":"tools/video/bmts_lite.py","use":"","needs":"Ffmpeg, ffprobe","look_only":true},{"id":"openmontage/tool-clip-search","name":"clip_search","kind":"tool","job":"footage","line":"Searches a local library of downloaded clips by meaning, using CLIP embeddings, to fill a described slot. Runs on the machine; needs numpy, transformers, torch. Needs a key, a program or a download before it works.","path":"tools/video/clip_search.py","use":"","needs":"Numpy, transformers, torch","look_only":true},{"id":"openmontage/tool-cogvideo-video","name":"cogvideo_video","kind":"tool","job":"video clip","line":"Local video generation with CogVideo. Runs on your own GPU with model weights you download. Needs a key, a program or a download before it works.","path":"tools/video/cogvideo_video.py","use":"","needs":"A GPU and the model's weights","look_only":true},{"id":"openmontage/tool-comfyui-video","name":"comfyui_video","kind":"tool","job":"video clip","line":"Video generation through a ComfyUI server you run. Runs on your own GPU with model weights you download. Needs a key, a program or a download before it works.","path":"tools/video/comfyui_video.py","use":"","needs":"A GPU and the model's weights","look_only":true},{"id":"openmontage/tool-corpus-builder","name":"corpus_builder","kind":"tool","job":"footage","line":"Fills a project's clip library: searches the stock and archive sources, downloads, makes thumbnails and indexes. Sources it can reach: Archive.org, NASA, Wikimedia Commons, Library of Congress, NOAA, ESA, JAXA, Dareful, Mixkit with no key; Pexels, Pixabay, Unsplash, Coverr, Openverse, NARA, Videvo, Pond5 public domain with a key. Routes to whatever provider is installed or keyed. Works in part with no keys.","path":"tools/video/corpus_builder.py","use":"","needs":"At least one provider of its kind set up","look_only":true},{"id":"openmontage/tool-direct-clip-search","name":"direct_clip_search","kind":"tool","job":"footage","line":"Searches the same stock and archive sources directly and downloads chosen clips, without building a library first. Routes to whatever provider is installed or keyed. Works with no keys.","path":"tools/video/direct_clip_search.py","use":"","needs":"At least one provider of its kind set up","look_only":true},{"id":"openmontage/tool-flux3-video","name":"flux3_video","kind":"tool","job":"video clip","line":"FLUX video generation through fal.ai. Calls an outside service; keys named in its code: FAL_KEY. Needs a key, a program or a download before it works.","path":"tools/video/flux3_video.py","use":"","needs":"FAL_KEY","look_only":true},{"id":"openmontage/tool-gemini-omni-fal","name":"gemini_omni_fal","kind":"tool","job":"video clip","line":"Google's Gemini Omni video model reached through fal.ai. Calls an outside service; keys named in its code: FAL_AI_API_KEY, FAL_KEY. Needs a key, a program or a download before it works.","path":"tools/video/gemini_omni_fal.py","use":"","needs":"FAL_AI_API_KEY, FAL_KEY","look_only":true},{"id":"openmontage/tool-gemini-omni-video","name":"gemini_omni_video","kind":"tool","job":"video clip","line":"Google's Gemini Omni video model: generates a clip and edits it by conversation. Calls an outside service; keys named in its code: GEMINI_API_KEY, GOOGLE_API_KEY. Needs a key, a program or a download before it works.","path":"tools/video/gemini_omni_video.py","use":"","needs":"GEMINI_API_KEY, GOOGLE_API_KEY","look_only":true},{"id":"openmontage/tool-green-screen-composite","name":"green_screen_composite","kind":"tool","job":"effect","line":"Places keyed talking-head footage over a new background. Runs on the machine; needs ffmpeg, numpy, PIL. Works with no keys.","path":"tools/video/green_screen_composite.py","use":"","needs":"Ffmpeg, numpy, PIL","look_only":true},{"id":"openmontage/tool-green-screen-processor","name":"green_screen_processor","kind":"tool","job":"effect","line":"Keys out a green screen. Runs on the machine; needs ffmpeg. Works with no keys.","path":"tools/video/green_screen_processor.py","use":"","needs":"Ffmpeg","look_only":true},{"id":"openmontage/tool-grok-video","name":"grok_video","kind":"tool","job":"video clip","line":"xAI Grok video generation with its own synchronized sound. Calls an outside service; keys named in its code: XAI_API_KEY. Needs a key, a program or a download before it works.","path":"tools/video/grok_video.py","use":"","needs":"XAI_API_KEY","look_only":true},{"id":"openmontage/tool-h3-max-video","name":"h3_max_video","kind":"tool","job":"video clip","line":"The H3 Max video model on fal.ai. Calls an outside service; keys named in its code: FAL_KEY. Needs a key, a program or a download before it works.","path":"tools/video/h3_max_video.py","use":"","needs":"FAL_KEY","look_only":true},{"id":"openmontage/tool-heygen-video","name":"heygen_video","kind":"tool","job":"video clip","line":"Video generation through HeyGen, which resells several video models under one key. Calls an outside service; keys named in its code: HEYGEN_API_KEY. Needs a key, a program or a download before it works.","path":"tools/video/heygen_video.py","use":"","needs":"HEYGEN_API_KEY","look_only":true},{"id":"openmontage/tool-higgsfield-video","name":"higgsfield_video","kind":"tool","job":"video clip","line":"Video generation through Higgsfield Cloud. Calls an outside service; keys named in its code: HIGGSFIELD_API_KEY, HIGGSFIELD_API_SECRET, HIGGSFIELD_KEY. Needs a key, a program or a download before it works.","path":"tools/video/higgsfield_video.py","use":"","needs":"HIGGSFIELD_API_KEY, HIGGSFIELD_API_SECRET, HIGGSFIELD_KEY","look_only":true},{"id":"openmontage/tool-hunyuan-cloud-video","name":"hunyuan_cloud_video","kind":"tool","job":"video clip","line":"Tencent Hunyuan video generation through TokenHub. Calls an outside service; keys named in its code: TENCENT_TOKENHUB_API_KEY. Needs a key, a program or a download before it works.","path":"tools/video/hunyuan_cloud_video.py","use":"","needs":"TENCENT_TOKENHUB_API_KEY","look_only":true},{"id":"openmontage/tool-hunyuan-video","name":"hunyuan_video","kind":"tool","job":"video clip","line":"Local Hunyuan video generation. Runs on your own GPU with model weights you download. Needs a key, a program or a download before it works.","path":"tools/video/hunyuan_video.py","use":"","needs":"A GPU and the model's weights","look_only":true},{"id":"openmontage/tool-hyperframes-compose","name":"hyperframes_compose","kind":"tool","job":"render","line":"Renders an HTML, CSS and GSAP composition to video with HyperFrames, fetched through npx. Runs on the machine; needs npx, ffmpeg. Works with no keys.","path":"tools/video/hyperframes_compose.py","use":"","needs":"Npx, ffmpeg","look_only":true},{"id":"openmontage/tool-jimeng-video","name":"jimeng_video","kind":"tool","job":"video clip","line":"Volcengine Jimeng video generation. Calls an outside service; keys named in its code: VOLC_ACCESSKEY, VOLC_SECRETKEY. Needs a key, a program or a download before it works.","path":"tools/video/jimeng_video.py","use":"","needs":"VOLC_ACCESSKEY, VOLC_SECRETKEY","look_only":true},{"id":"openmontage/tool-kling-o3-fal-video","name":"kling_o3_fal_video","kind":"tool","job":"video clip","line":"Kling video generation and editing through fal.ai. Calls an outside service; keys named in its code: FAL_KEY. Needs a key, a program or a download before it works.","path":"tools/video/kling_o3_fal_video.py","use":"","needs":"FAL_KEY","look_only":true},{"id":"openmontage/tool-kling-official-video","name":"kling_official_video","kind":"tool","job":"video clip","line":"Video generation through Kling's official API. Calls an outside service; keys named in its code: KLING_API_KEY. Needs a key, a program or a download before it works.","path":"tools/video/kling_official_video.py","use":"","needs":"KLING_API_KEY","look_only":true},{"id":"openmontage/tool-kling-video","name":"kling_video","kind":"tool","job":"video clip","line":"Kling video generation through fal.ai. Calls an outside service; keys named in its code: FAL_AI_API_KEY. Needs a key, a program or a download before it works.","path":"tools/video/kling_video.py","use":"","needs":"FAL_AI_API_KEY","look_only":true},{"id":"openmontage/tool-ltx-api-video","name":"ltx_api_video","kind":"tool","job":"video clip","line":"LTX video generation through the direct LTX API. Calls an outside service; keys named in its code: LTX_API_KEY. Needs a key, a program or a download before it works.","path":"tools/video/ltx_api_video.py","use":"","needs":"LTX_API_KEY","look_only":true},{"id":"openmontage/tool-ltx-video-local","name":"ltx_video_local","kind":"tool","job":"video clip","line":"Local LTX video generation. Runs on your own GPU with model weights you download. Needs a key, a program or a download before it works.","path":"tools/video/ltx_video_local.py","use":"","needs":"A GPU and the model's weights","look_only":true},{"id":"openmontage/tool-ltx-video-modal","name":"ltx_video_modal","kind":"tool","job":"video clip","line":"LTX video generation on a Modal endpoint you host. Calls an outside service; needs that service's key or sign-in (see the tool's own install note). Needs a key, a program or a download before it works.","path":"tools/video/ltx_video_modal.py","use":"","needs":"That service's key or sign-in","look_only":true},{"id":"openmontage/tool-minimax-fal-video","name":"minimax_fal_video","kind":"tool","job":"video clip","line":"MiniMax video generation through fal.ai. Calls an outside service; keys named in its code: FAL_AI_API_KEY, FAL_KEY. Needs a key, a program or a download before it works.","path":"tools/video/minimax_fal_video.py","use":"","needs":"FAL_AI_API_KEY, FAL_KEY","look_only":true},{"id":"openmontage/tool-minimax-video","name":"minimax_video","kind":"tool","job":"video clip","line":"MiniMax video generation, direct. Calls an outside service; keys named in its code: MINIMAX_API_KEY. Needs a key, a program or a download before it works.","path":"tools/video/minimax_video.py","use":"","needs":"MINIMAX_API_KEY","look_only":true},{"id":"openmontage/tool-pexels-video","name":"pexels_video","kind":"tool","job":"footage","line":"Stock video search and download from Pexels. Calls an outside service; keys named in its code: PEXELS_API_KEY. Needs a key, a program or a download before it works.","path":"tools/video/pexels_video.py","use":"","needs":"PEXELS_API_KEY","look_only":true},{"id":"openmontage/tool-pixabay-video","name":"pixabay_video","kind":"tool","job":"footage","line":"Stock video search and download from Pixabay. Calls an outside service; keys named in its code: PIXABAY_API_KEY. Needs a key, a program or a download before it works.","path":"tools/video/pixabay_video.py","use":"","needs":"PIXABAY_API_KEY","look_only":true},{"id":"openmontage/tool-remotion-caption-burn","name":"remotion_caption_burn","kind":"tool","job":"caption","line":"Burns word-by-word captions onto a video with a Remotion composition. Runs on the machine; needs ffmpeg, ffprobe. Works with no keys.","path":"tools/video/remotion_caption_burn.py","use":"","needs":"Ffmpeg, ffprobe","look_only":true},{"id":"openmontage/tool-runway-video","name":"runway_video","kind":"tool","job":"video clip","line":"Video generation through the Runway API. Calls an outside service; keys named in its code: RUNWAYML_API_SECRET, RUNWAY_API_KEY. Needs a key, a program or a download before it works.","path":"tools/video/runway_video.py","use":"","needs":"RUNWAYML_API_SECRET, RUNWAY_API_KEY","look_only":true},{"id":"openmontage/tool-seedance-ark","name":"seedance_ark","kind":"tool","job":"video clip","line":"Seedance video generation direct from Volcengine Ark. Calls an outside service; keys named in its code: ARK_API_KEY. Needs a key, a program or a download before it works.","path":"tools/video/seedance_ark.py","use":"","needs":"ARK_API_KEY","look_only":true},{"id":"openmontage/tool-seedance-replicate","name":"seedance_replicate","kind":"tool","job":"video clip","line":"Seedance video generation through Replicate. Calls an outside service; keys named in its code: REPLICATE_API_TOKEN. Needs a key, a program or a download before it works.","path":"tools/video/seedance_replicate.py","use":"","needs":"REPLICATE_API_TOKEN","look_only":true},{"id":"openmontage/tool-seedance-video","name":"seedance_video","kind":"tool","job":"video clip","line":"Seedance video generation through fal.ai; the repo's preferred paid video model. Calls an outside service; keys named in its code: FAL_AI_API_KEY. Needs a key, a program or a download before it works.","path":"tools/video/seedance_video.py","use":"","needs":"FAL_AI_API_KEY","look_only":true},{"id":"openmontage/tool-showcase-card","name":"showcase_card","kind":"tool","job":"end card","line":"Makes a closing card for a video with FFmpeg. Runs on the machine; needs ffmpeg, ffprobe. Works with no keys.","path":"tools/video/showcase_card.py","use":"","needs":"Ffmpeg, ffprobe","look_only":true},{"id":"openmontage/tool-silence-cutter","name":"silence_cutter","kind":"tool","job":"edit","line":"Removes silent stretches from a recording to make jump cuts. Runs on the machine; needs ffmpeg. Works with no keys.","path":"tools/video/silence_cutter.py","use":"","needs":"Ffmpeg","look_only":true},{"id":"openmontage/tool-sora-video","name":"sora_video","kind":"tool","job":"video clip","line":"OpenAI Sora video generation. Calls an outside service; keys named in its code: OPENAI_API_KEY. Needs a key, a program or a download before it works.","path":"tools/video/sora_video.py","use":"","needs":"OPENAI_API_KEY","look_only":true},{"id":"openmontage/tool-veo-video","name":"veo_video","kind":"tool","job":"video clip","line":"Google Veo video generation, through fal.ai or Google directly. Calls an outside service; keys named in its code: FAL_AI_API_KEY. Needs a key, a program or a download before it works.","path":"tools/video/veo_video.py","use":"","needs":"FAL_AI_API_KEY","look_only":true},{"id":"openmontage/tool-video-compose","name":"video_compose","kind":"tool","job":"render","line":"The final render: takes the edit-decision file and assets and renders through FFmpeg, the Remotion composer or HyperFrames, then reviews its own output. Runs on the machine; needs ffmpeg. Works with no keys.","path":"tools/video/video_compose.py","use":"","needs":"Ffmpeg","look_only":true},{"id":"openmontage/tool-video-selector","name":"video_selector","kind":"tool","job":"video clip","line":"Picks the best available video source for the job, generated or stock, and routes the request to it. Routes to whatever provider is installed or keyed. Needs a key, a program or a download before it works.","path":"tools/video/video_selector.py","use":"","needs":"At least one provider of its kind set up","look_only":true},{"id":"openmontage/tool-video-stitch","name":"video_stitch","kind":"tool","job":"edit","line":"Joins several clips into one with checks, transitions and split-screen layouts. Runs on the machine; needs ffmpeg, ffprobe. Works with no keys.","path":"tools/video/video_stitch.py","use":"","needs":"Ffmpeg, ffprobe","look_only":true},{"id":"openmontage/tool-video-trimmer","name":"video_trimmer","kind":"tool","job":"edit","line":"Cuts a section out of a video. Runs on the machine; needs ffmpeg. Works with no keys.","path":"tools/video/video_trimmer.py","use":"","needs":"Ffmpeg","look_only":true},{"id":"openmontage/tool-vidu-video","name":"vidu_video","kind":"tool","job":"video clip","line":"Vidu video generation through fal.ai. Calls an outside service; keys named in its code: FAL_KEY. Needs a key, a program or a download before it works.","path":"tools/video/vidu_video.py","use":"","needs":"FAL_KEY","look_only":true},{"id":"openmontage/tool-wan-atlas-video","name":"wan_atlas_video","kind":"tool","job":"video clip","line":"Wan video generation through Atlas Cloud. Calls an outside service; keys named in its code: ATLASCLOUD_API_KEY. Needs a key, a program or a download before it works.","path":"tools/video/wan_atlas_video.py","use":"","needs":"ATLASCLOUD_API_KEY","look_only":true},{"id":"openmontage/tool-wan-fal-video","name":"wan_fal_video","kind":"tool","job":"video clip","line":"Wan video generation through fal.ai. Calls an outside service; keys named in its code: FAL_KEY. Needs a key, a program or a download before it works.","path":"tools/video/wan_fal_video.py","use":"","needs":"FAL_KEY","look_only":true},{"id":"openmontage/tool-wan-replicate-video","name":"wan_replicate_video","kind":"tool","job":"video clip","line":"Wan video generation through Replicate. Calls an outside service; keys named in its code: REPLICATE_API_TOKEN. Needs a key, a program or a download before it works.","path":"tools/video/wan_replicate_video.py","use":"","needs":"REPLICATE_API_TOKEN","look_only":true},{"id":"openmontage/tool-wan-video","name":"wan_video","kind":"tool","job":"video clip","line":"Local Wan video generation. Runs on your own GPU with model weights you download. Needs a key, a program or a download before it works.","path":"tools/video/wan_video.py","use":"","needs":"A GPU and the model's weights","look_only":true},{"id":"openmontage/composer-explainer","name":"Explainer","kind":"remotion","job":"whole video","line":"The main composition. Plays a list of cuts from a props file; each cut is a clip, a still with a slow move, or one of the scene types below, with overlays, word captions and audio on top. The zero-key demos run through it. Built on Remotion 4.0.484 and React 18.","path":"remotion-composer/src/Explainer.tsx","use":"","needs":"Node 22 or later, npm install in remotion-composer/ (about 200 packages)","look_only":true},{"id":"openmontage/composer-cinematicrenderer","name":"CinematicRenderer","kind":"remotion","job":"whole video","line":"A composition for trailers and mood pieces: clips in sequence with titles and a soundtrack, its length worked out from its own data. Built on Remotion 4.0.484 and React 18.","path":"remotion-composer/src/CinematicRenderer.tsx","use":"","needs":"Node 22 or later, npm install in remotion-composer/ (about 200 packages)","look_only":true},{"id":"openmontage/composer-talkinghead","name":"TalkingHead","kind":"remotion","job":"whole video","line":"A tall composition for speaker footage with captions. Built on Remotion 4.0.484 and React 18.","path":"remotion-composer/src/TalkingHead.tsx","use":"","needs":"Node 22 or later, npm install in remotion-composer/ (about 200 packages)","look_only":true},{"id":"openmontage/composer-titledvideo","name":"TitledVideo","kind":"remotion","job":"title","line":"Plays a video with a serif title treatment over it; a sample props file sits beside the composer. Built on Remotion 4.0.484 and React 18.","path":"remotion-composer/src/TitledVideo.tsx","use":"","needs":"Node 22 or later, npm install in remotion-composer/ (about 200 packages)","look_only":true},{"id":"openmontage/composer-collageburst","name":"CollageBurst","kind":"remotion","job":"transition","line":"A collage composition: images and clips arranged with spring motion. Built on Remotion 4.0.484 and React 18.","path":"remotion-composer/src/CollageBurst.tsx","use":"","needs":"Node 22 or later, npm install in remotion-composer/ (about 200 packages)","look_only":true},{"id":"openmontage/composer-lyricoverlay","name":"LyricOverlay","kind":"remotion","job":"caption","line":"Timed lyric lines over a video. Built on Remotion 4.0.484 and React 18.","path":"remotion-composer/src/LyricOverlay.tsx","use":"","needs":"Node 22 or later, npm install in remotion-composer/ (about 200 packages)","look_only":true},{"id":"openmontage/composer-textcard","name":"TextCard","kind":"remotion","job":"title","line":"One large line of text as a beat, optionally over a background video. Built on Remotion 4.0.484 and React 18.","path":"remotion-composer/src/components/TextCard.tsx","use":"","needs":"Node 22 or later, npm install in remotion-composer/ (about 200 packages)","look_only":true},{"id":"openmontage/composer-herotitle","name":"HeroTitle","kind":"remotion","job":"title","line":"A full-frame title with subtitle, used as an opening or closing card and as an overlay. Built on Remotion 4.0.484 and React 18.","path":"remotion-composer/src/components/HeroTitle.tsx","use":"","needs":"Node 22 or later, npm install in remotion-composer/ (about 200 packages)","look_only":true},{"id":"openmontage/composer-statcard","name":"StatCard","kind":"remotion","job":"number","line":"One big number with a line under it. Built on Remotion 4.0.484 and React 18.","path":"remotion-composer/src/components/StatCard.tsx","use":"","needs":"Node 22 or later, npm install in remotion-composer/ (about 200 packages)","look_only":true},{"id":"openmontage/composer-statreveal","name":"StatReveal","kind":"remotion","job":"number","line":"A small number badge in a corner, as an overlay. Built on Remotion 4.0.484 and React 18.","path":"remotion-composer/src/components/StatReveal.tsx","use":"","needs":"Node 22 or later, npm install in remotion-composer/ (about 200 packages)","look_only":true},{"id":"openmontage/composer-calloutbox","name":"CalloutBox","kind":"remotion","job":"callout","line":"A boxed message with a title and bullets, in four flavors (info, warning, tip, quote). Built on Remotion 4.0.484 and React 18.","path":"remotion-composer/src/components/CalloutBox.tsx","use":"","needs":"Node 22 or later, npm install in remotion-composer/ (about 200 packages)","look_only":true},{"id":"openmontage/composer-comparisoncard","name":"ComparisonCard","kind":"remotion","job":"compare","line":"Two labeled values side by side. Built on Remotion 4.0.484 and React 18.","path":"remotion-composer/src/components/ComparisonCard.tsx","use":"","needs":"Node 22 or later, npm install in remotion-composer/ (about 200 packages)","look_only":true},{"id":"openmontage/composer-sectiontitle","name":"SectionTitle","kind":"remotion","job":"lower third","line":"A small section label, as an overlay. Built on Remotion 4.0.484 and React 18.","path":"remotion-composer/src/components/SectionTitle.tsx","use":"","needs":"Node 22 or later, npm install in remotion-composer/ (about 200 packages)","look_only":true},{"id":"openmontage/composer-progressbar","name":"ProgressBar","kind":"remotion","job":"chart","line":"An animated progress bar, plain or in segments. Built on Remotion 4.0.484 and React 18.","path":"remotion-composer/src/components/ProgressBar.tsx","use":"","needs":"Node 22 or later, npm install in remotion-composer/ (about 200 packages)","look_only":true},{"id":"openmontage/composer-providerchip","name":"ProviderChip","kind":"remotion","job":"overlay","line":"A rotating badge that cycles through a list of names. Built on Remotion 4.0.484 and React 18.","path":"remotion-composer/src/components/ProviderChip.tsx","use":"","needs":"Node 22 or later, npm install in remotion-composer/ (about 200 packages)","look_only":true},{"id":"openmontage/composer-endtag","name":"EndTag","kind":"remotion","job":"end card","line":"A closing line of text that fades in, holds and fades out, in two light-on-black palettes. Built on Remotion 4.0.484 and React 18.","path":"remotion-composer/src/components/EndTag.tsx","use":"","needs":"Node 22 or later, npm install in remotion-composer/ (about 200 packages)","look_only":true},{"id":"openmontage/composer-productreveal","name":"ProductReveal","kind":"remotion","job":"logo","line":"A product card: picture, name, price, tagline and a closing line, registered as wide and tall compositions of its own. Built on Remotion 4.0.484 and React 18.","path":"remotion-composer/src/components/ProductReveal.tsx","use":"","needs":"Node 22 or later, npm install in remotion-composer/ (about 200 packages)","look_only":true},{"id":"openmontage/composer-particleoverlay","name":"ParticleOverlay","kind":"remotion","job":"overlay","line":"Drifting particles over a scene. Built on Remotion 4.0.484 and React 18.","path":"remotion-composer/src/components/ParticleOverlay.tsx","use":"","needs":"Node 22 or later, npm install in remotion-composer/ (about 200 packages)","look_only":true},{"id":"openmontage/composer-animescene","name":"AnimeScene","kind":"remotion","job":"move on a still","line":"Still images with camera movement, particles, changing light and a vignette. Built on Remotion 4.0.484 and React 18.","path":"remotion-composer/src/components/AnimeScene.tsx","use":"","needs":"Node 22 or later, npm install in remotion-composer/ (about 200 packages)","look_only":true},{"id":"openmontage/composer-terminalscene","name":"TerminalScene","kind":"remotion","job":"code","line":"A fake terminal that types commands and prints output from a list of steps, with no real screen capture. Built on Remotion 4.0.484 and React 18.","path":"remotion-composer/src/components/TerminalScene.tsx","use":"","needs":"Node 22 or later, npm install in remotion-composer/ (about 200 packages)","look_only":true},{"id":"openmontage/composer-screenshotscene","name":"ScreenshotScene","kind":"remotion","job":"callout","line":"A screenshot used as a frozen backdrop with scripted things drawn over it: a cursor, click pulses, typing, chat bubbles. Built on Remotion 4.0.484 and React 18.","path":"remotion-composer/src/components/ScreenshotScene.tsx","use":"","needs":"Node 22 or later, npm install in remotion-composer/ (about 200 packages)","look_only":true},{"id":"openmontage/composer-captionoverlay","name":"CaptionOverlay","kind":"remotion","job":"caption","line":"Word-by-word captions over the picture. Built on Remotion 4.0.484 and React 18.","path":"remotion-composer/src/components/CaptionOverlay.tsx","use":"","needs":"Node 22 or later, npm install in remotion-composer/ (about 200 packages)","look_only":true},{"id":"openmontage/composer-barchart","name":"BarChart","kind":"remotion","job":"chart","line":"Bars that grow, with optional grid and values. Built on Remotion 4.0.484 and React 18.","path":"remotion-composer/src/components/charts/BarChart.tsx","use":"","needs":"Node 22 or later, npm install in remotion-composer/ (about 200 packages)","look_only":true},{"id":"openmontage/composer-linechart","name":"LineChart","kind":"remotion","job":"chart","line":"A line that draws itself, with optional markers and axis labels. Built on Remotion 4.0.484 and React 18.","path":"remotion-composer/src/components/charts/LineChart.tsx","use":"","needs":"Node 22 or later, npm install in remotion-composer/ (about 200 packages)","look_only":true},{"id":"openmontage/composer-piechart","name":"PieChart","kind":"remotion","job":"chart","line":"A pie or donut that sweeps in, with legend and center label. Built on Remotion 4.0.484 and React 18.","path":"remotion-composer/src/components/charts/PieChart.tsx","use":"","needs":"Node 22 or later, npm install in remotion-composer/ (about 200 packages)","look_only":true},{"id":"openmontage/composer-kpigrid","name":"KPIGrid","kind":"remotion","job":"number","line":"A grid of two to four columns of key figures. Built on Remotion 4.0.484 and React 18.","path":"remotion-composer/src/components/charts/KPIGrid.tsx","use":"","needs":"Node 22 or later, npm install in remotion-composer/ (about 200 packages)","look_only":true},{"id":"openmontage/composer-demo-props","name":"Zero-key demo props","kind":"template","job":"whole video","line":"Five ready props files for the Explainer composition that need no keys and no assets: world-in-numbers, code-to-screen, focusflow-pitch (the three the demo script renders), plus animated-reel-20s and stop-procrastinating-with-this-1-hack. Each is a list of timed cuts: title, number card, charts, text card.","path":"remotion-composer/public/demo-props","use":"","needs":"Node, npm install in remotion-composer/","look_only":true},{"id":"openmontage/composer-scene-types","name":"SCENE_TYPES.md","kind":"skill","job":"reference","line":"The list of every cut type and overlay type the Explainer composition accepts, with required and common fields, and the five steps for adding a new scene type.","path":"remotion-composer/SCENE_TYPES.md","use":"","look_only":true},{"id":"openmontage/style-clean-professional","name":"Clean Professional","kind":"template","job":"style","line":"A style playbook: one YAML file that fixes colors, type, motion, audio, asset prompts, chart palette and quality rules for a whole video. Polished and clear, moderate pace; for corporate explainers, teaching, software demos and talks.","path":"styles/clean-professional.yaml","use":"","look_only":true},{"id":"openmontage/style-flat-motion-graphics","name":"Flat Motion Graphics","kind":"template","job":"style","line":"A style playbook: one YAML file that fixes colors, type, motion, audio, asset prompts, chart palette and quality rules for a whole video. Bold and energetic, fast pace; for social explainers, short vertical video, launches and pitches.","path":"styles/flat-motion-graphics.yaml","use":"","look_only":true},{"id":"openmontage/style-minimalist-diagram","name":"Minimalist Diagram","kind":"template","job":"style","line":"A style playbook: one YAML file that fixes colors, type, motion, audio, asset prompts, chart palette and quality rules for a whole video. Focused and technical, deliberate pace, whiteboard feel; for technical deep dives, architecture and maths or computing concepts.","path":"styles/minimalist-diagram.yaml","use":"","look_only":true},{"id":"openmontage/style-premium-minimalist","name":"Premium Minimalist","kind":"template","job":"style","line":"A style playbook: one YAML file that fixes colors, type, motion, audio, asset prompts, chart palette and quality rules for a whole video. Calm and editorial, deliberate pace; for investor updates, expert explainers and high-trust launches. The only one that carries a written taste profile.","path":"styles/premium-minimalist.yaml","use":"","look_only":true},{"id":"openmontage/style-anime-ghibli","name":"Anime Ghibli","kind":"template","job":"style","line":"A style playbook: one YAML file that fixes colors, type, motion, audio, asset prompts, chart palette and quality rules for a whole video. Warm and whimsical, slow pace; for narrative animation, nature stories and fantasy. Named after a real studio's look, which is a reason for care before using it on anything public.","path":"styles/anime-ghibli.yaml","use":"","look_only":true},{"id":"openmontage/style-sky-spectrum","name":"sky-spectrum","kind":"template","job":"style","line":"A style playbook: one YAML file that fixes colors, type, motion, audio, asset prompts, chart palette and quality rules for a whole video. A custom example: bright and curious, moderate pace; for science explainers about light and color.","path":"styles/custom/sky-spectrum.yaml","use":"","look_only":true},{"id":"openmontage/ink-theater-engine","name":"Ink Theater engine","kind":"html-video","job":"move","line":"A small script for hand-drawn black-ink animation in HTML and SVG on one paused GSAP timeline: wobbly ink strokes, a line 'boil' that is stepped from the timeline, closed-form spring eases, 2D arm reach (inverse kinematics) on a simple mascot, and machine parts to compose (crank, gauge, hopper, slot, lever, box). Built so every frame depends on time alone. Its README credits another author's MIT illustration skill as the inspiration.","path":"ink-theater/ink-theater.js","use":"","needs":"GSAP (loaded from a CDN in the example), a browser; HyperFrames to render","look_only":true},{"id":"openmontage/ink-puppet","name":"Ink Puppet","kind":"html-video","job":"rig","line":"A stick figure that draws itself in and then plays named motion-capture clips in sequence. The agent only chooses the moves; nothing is hand-tuned. In our trial it posed correctly only when the timeline was seeked with callbacks switched on; GSAP's plain seek() suppresses them and the figure stood still.","path":"ink-theater/ink-puppet.js","use":"","needs":"GSAP, ink-theater.js, the clips file","look_only":true},{"id":"openmontage/ink-mocap-clips","name":"Twelve motion-capture clips","kind":"html-video","job":"move","line":"Twelve 2D motion clips for the puppet: climb, dance_glide, dance_spin, jump, kick, march, run, shuffle, sit, twist, walk, wave. Made from the CMU Graphics Lab Motion Capture Database, which the repo's notice says is free for research and commercial use; the source trial of each clip is recorded in catalog.json.","path":"ink-theater/mocap/clips","use":"","look_only":true},{"id":"openmontage/ink-bvh2clip","name":"bvh2clip and add-motion","kind":"tool","job":"rig","line":"Two Node scripts that turn a 3D BVH motion-capture file into one of the puppet's flat 2D clips (joint tracks per frame, scaled to a fixed figure height) and add it to the bundle.","path":"ink-theater/mocap/bvh2clip.mjs","use":"","needs":"Node; a BVH file","look_only":true},{"id":"openmontage/ink-mocap-figure-example","name":"mocap-figure example","kind":"html-video","job":"scene","line":"The runnable example: a 21.8-second page where a pencil line becomes a stick figure that walks, runs, dances, kicks, sits and waves, with handwritten captions. It carries the engine, the puppet, the clips and the Patrick Hand font (SIL Open Font License, with its license file).","path":"ink-theater/examples/mocap-figure/index.html","use":"","needs":"A browser and GSAP from its CDN; HyperFrames to render","look_only":true},{"id":"openmontage/app-backlot","name":"Backlot","kind":"tool","job":"review","line":"A local web board that watches the projects folder and shows a production as it runs: stages, script, scene plan, generated assets as a filmstrip, decisions, cost and activity. Read-only: it never writes to a project. The agent guide tells the agent to open it at the start of every pipeline, which starts a local server and opens the user's browser.","path":"backlot","use":"","needs":"Python with fastapi, uvicorn and watchfiles (in requirements.txt)","look_only":true},{"id":"openmontage/command-reel","name":"/reel","kind":"skill","job":"plan","line":"The general slash command: make or work on a video with the pipeline system, for whatever is described. Copies for other agents sit in .cursor/commands, .codex/prompts and .github/prompts.","path":".claude/commands/reel.md","use":"","look_only":true},{"id":"openmontage/command-backlot","name":"/backlot","kind":"skill","job":"review","line":"Slash command that opens the Backlot board for the current or named project. Copies for other agents sit in .cursor/commands, .codex/prompts and .github/prompts.","path":".claude/commands/backlot.md","use":"","look_only":true},{"id":"openmontage/command-ink-art","name":"/ink-art","kind":"skill","job":"move","line":"Slash command for a hand-drawn ink animation: a character that draws itself and moves, or a contraption explainer, rendered through HyperFrames. Copies for other agents sit in .cursor/commands, .codex/prompts and .github/prompts.","path":".claude/commands/ink-art.md","use":"","look_only":true},{"id":"openmontage/command-animated-drawing","name":"/animated-drawing","kind":"skill","job":"move","line":"Slash command that makes a supplied drawing or photo of a character move with Meta's AnimatedDrawings. Copies for other agents sit in .cursor/commands, .codex/prompts and .github/prompts.","path":".claude/commands/animated-drawing.md","use":"","look_only":true},{"id":"openmontage/doc-agent-guide","name":"AGENT_GUIDE.md","kind":"skill","job":"plan","line":"The operating contract every agent is told to read first (CLAUDE.md, AGENTS.md and the other agent files contain only that order). It sets: all production goes through a pipeline; say which tool, provider and model before any paid call; ask before changing a major choice; offer both render paths; raise music at proposal time; review after every stage; stop at approval gates. 734 lines.","path":"AGENT_GUIDE.md","use":"","look_only":true},{"id":"openmontage/doc-prompt-gallery","name":"PROMPT_GALLERY.md","kind":"skill","job":"plan","line":"A gallery of example requests to give the agent, grouped by what is set up (no keys, free footage, an image or video provider, full setup).","path":"PROMPT_GALLERY.md","use":"","look_only":true},{"id":"openmontage/doc-providers","name":"docs/PROVIDERS.md","kind":"skill","job":"reference","line":"The provider guide: every outside service the tools can call, how to get its key, what it costs and what the free tier is. 1,558 lines.","path":"docs/PROVIDERS.md","use":"","look_only":true},{"id":"openmontage/doc-skills-index","name":"skills/INDEX.md","kind":"skill","job":"reference","line":"The index of every OpenMontage skill and vendored pack, with when to read each.","path":"skills/INDEX.md","use":"","look_only":true},{"id":"openmontage/lib-slideshow-risk","name":"Slideshow risk scorer","kind":"tool","job":"review","line":"Scores a scene plan from 0 to 5 on six things that make a video feel like a slide deck: repetition, decorative visuals, motion without purpose, shots without intent, too much text, and a 'cinematic' label with nothing behind it. Below 2 is strong, 4 and above should not be rendered. Pure Python, no network. In our trial eight identical text cards scored 3.42 (revise) and six varied scenes 0.5 (strong).","path":"lib/slideshow_risk.py","use":"","look_only":true},{"id":"openmontage/lib-variation-checker","name":"Scene variation checker","kind":"tool","job":"review","line":"Checks a scene plan for sameness before any asset is made: shot sizes, camera movement, lighting, a flagged high point, texture words. Returns a score, a verdict and a list of plain-language violations. It expects each scene to carry structured shot language; without it, even a varied plan was told to revise in our trial.","path":"lib/variation_checker.py","use":"","look_only":true},{"id":"openmontage/lib-delivery-promise","name":"Delivery promise","kind":"tool","job":"review","line":"Classifies what a video has promised to be (for example led by motion or led by stills) at proposal time and locks it, so the render cannot quietly become a slideshow of stills.","path":"lib/delivery_promise.py","use":"","look_only":true},{"id":"openmontage/lib-provider-scoring","name":"Provider scoring","kind":"tool","job":"plan","line":"Ranks the available providers for a job on seven weighted things (fit to the task, quality, control, reliability, cost, speed, continuity) so each choice can be explained and logged.","path":"lib/scoring.py","use":"","look_only":true},{"id":"openmontage/lib-checkpoint","name":"Checkpoint store","kind":"tool","job":"review","line":"Writes and reads a saved state after each stage so a run can resume, and refuses to record a gated stage as done without recorded approval.","path":"lib/checkpoint.py","use":"","look_only":true},{"id":"openmontage/lib-asset-cache","name":"Asset cache","kind":"tool","job":"plan","line":"A cache keyed on a tool's inputs so a repeated paid generation call returns the saved file and is not paid for twice.","path":"lib/asset_cache.py","use":"","look_only":true},{"id":"openmontage/lib-corpus","name":"Clip corpus","kind":"tool","job":"footage","line":"A project-local library of downloaded candidate clips with thumbnails and embeddings, queried offline; the heart of the documentary-montage pipeline.","path":"lib/corpus.py","use":"","look_only":true},{"id":"openmontage/lib-clip-embedder","name":"CLIP embedder","kind":"tool","job":"footage","line":"A thin wrapper around OpenAI's CLIP ViT-B/32 model that turns images and text into vectors for matching footage to a description. Downloads the model on first use.","path":"lib/clip_embedder.py","use":"","look_only":true},{"id":"openmontage/lib-shot-prompt-builder","name":"Shot prompt builder","kind":"tool","job":"camera","line":"Turns structured shot language (camera, movement, subject, lighting and more, in layers) into a prompt tuned for a given video model.","path":"lib/shot_prompt_builder.py","use":"","look_only":true},{"id":"openmontage/lib-source-media-review","name":"Source media review","kind":"tool","job":"review","line":"Inspects footage a user supplies (probe, sampled frames, scenes, transcript) and writes one normalized review file, so planning starts from what is in the files and not from their names.","path":"lib/source_media_review.py","use":"","look_only":true},{"id":"openmontage/lib-verify-scene-pacing","name":"Scene pacing check","kind":"tool","job":"review","line":"Checks that the steps of a fake terminal scene land in time with the narration cues, and fails loudly when they drift.","path":"lib/verify_scene_pacing.py","use":"","look_only":true},{"id":"openmontage/lib-media-profiles","name":"Platform profiles","kind":"tool","job":"export","line":"Named output profiles (size, shape, codec) for the main platforms: wide, 4K, tall short-form, square, 21:9.","path":"lib/media_profiles.py","use":"","look_only":true},{"id":"openmontage/lib-playbook-generator","name":"Custom playbook generator","kind":"tool","job":"style","line":"Writes a new schema-valid style playbook when none of the shipped ones fits a brief.","path":"lib/playbook_generator.py","use":"","look_only":true},{"id":"openmontage/lib-hyperframes-style-bridge","name":"Playbook to HyperFrames bridge","kind":"tool","job":"style","line":"Translates a style playbook into style files a HyperFrames composition can use.","path":"lib/hyperframes_style_bridge.py","use":"","look_only":true},{"id":"openmontage/lib-pipeline-loader","name":"Pipeline manifest loader","kind":"tool","job":"plan","line":"Loads and validates the pipeline YAML manifests.","path":"lib/pipeline_loader.py","use":"","look_only":true},{"id":"openmontage/lib-events","name":"Tool event log","kind":"tool","job":"review","line":"An append-only log of tool events per project, written whenever a tool runs and read by the Backlot board.","path":"lib/events.py","use":"","look_only":true},{"id":"openmontage/lib-config","name":"Configuration model","kind":"tool","job":"plan","line":"Loads config.yaml (model provider, budget mode and caps, approval policy, output defaults) with environment overrides. Budget default is $10 total with approval asked above $0.50 per action.","path":"lib/config_model.py","use":"","look_only":true},{"id":"openmontage/lib-playbook-loader","name":"Playbook loader","kind":"tool","job":"style","line":"Loads, validates and lists style playbooks, with checks on color palettes, type and contrast.","path":"styles/playbook_loader.py","use":"","look_only":true},{"id":"openmontage/lib-tool-registry","name":"Tool registry","kind":"tool","job":"plan","line":"Finds every tool by importing the tools package and reports what is available, by capability and provider. In our zero-key trial it found 163 tools: 36 available, 2 degraded, 125 unavailable. It crashed outright until every package in requirements.txt was installed (one missing import stops discovery).","path":"tools/tool_registry.py","use":"","look_only":true},{"id":"openmontage/lib-cost-tracker","name":"Cost tracker","kind":"tool","job":"plan","line":"Budget control: estimate before a call, reserve, record the real spend after; three modes (observe, warn, cap).","path":"tools/cost_tracker.py","use":"","look_only":true},{"id":"openmontage/script-render-demo","name":"render_demo.py","kind":"tool","job":"render","line":"Renders the curated zero-key demos through the Remotion composer; installs the composer's packages on first run.","path":"render_demo.py","use":"","look_only":true},{"id":"openmontage/script-scaffold-atelier","name":"scaffold_atelier_project.py","kind":"tool","job":"scene","line":"Creates the empty project layout for a hand-written ('atelier') Remotion composition: the registration boilerplate and folders, with a deliberately blank scene.","path":"scripts/scaffold_atelier_project.py","use":"","look_only":true},{"id":"openmontage/script-atelier-snapshots","name":"atelier_snapshots.py","kind":"tool","job":"review","line":"Renders one review still per scene of a hand-written composition so the board can show them.","path":"scripts/atelier_snapshots.py","use":"","look_only":true},{"id":"openmontage/script-backlot-simulate","name":"backlot_simulate_run.py","kind":"tool","job":"review","line":"Fakes a pipeline run on disk so the Backlot board can be watched updating; useful as a demo of the board.","path":"scripts/backlot_simulate_run.py","use":"","look_only":true},{"id":"openmontage/script-backlot-screenshot-stage","name":"backlot_screenshot_stage.py","kind":"tool","job":"review","line":"Builds fictional projects and captures the board screenshots used in the README, with Playwright.","path":"scripts/backlot_screenshot_stage.py","use":"","look_only":true},{"id":"openmontage/script-backlot-visual-eval","name":"backlot_visual_eval.py","kind":"tool","job":"review","line":"A screenshot test for the board: captures fixed views and compares them with saved ones.","path":"scripts/backlot_visual_eval.py","use":"","look_only":true},{"id":"openmontage/script-backlot-watch-captures","name":"backlot_watch_captures.py","kind":"tool","job":"review","line":"Captures a board screenshot each time a watched project changes.","path":"scripts/backlot_watch_captures.py","use":"","look_only":true},{"id":"openmontage/script-kling-e2e","name":"kling_official_animated_explainer_e2e.py","kind":"tool","job":"review","line":"An end-to-end check of the Kling provider path; a free dry run by default, paid modes on request.","path":"scripts/kling_official_animated_explainer_e2e.py","use":"","look_only":true},{"id":"openmontage/script-atlas-smoke","name":"atlas_media_smoke.py","kind":"tool","job":"review","line":"An opt-in paid test run of the Atlas Cloud media tools.","path":"scripts/atlas_media_smoke.py","use":"","look_only":true},{"id":"openmontage/script-refresh-kling-contracts","name":"refresh_kling_o3_fal_contracts.py","kind":"tool","job":"maintain","line":"Refreshes the saved request formats for the Kling models on fal.ai from published schemas; submits no jobs.","path":"scripts/refresh_kling_o3_fal_contracts.py","use":"","look_only":true},{"id":"openmontage/script-wan-disk-cleanup","name":"wan_disk_cleanup.sh","kind":"tool","job":"maintain","line":"A shell script that reports the disk used by local Wan video generation and, only when given a target and --yes, deletes model weights and caches.","path":"scripts/wan_disk_cleanup.sh","use":"","look_only":true},{"id":"openmontage/schema-action-timeline","name":"action_timeline schema","kind":"template","job":"move","line":"Timed character actions and poses ready to render. A JSON Schema; required fields: version, scenes.","path":"schemas/artifacts/action_timeline.schema.json","use":"","look_only":true},{"id":"openmontage/schema-asset-manifest","name":"asset_manifest schema","kind":"template","job":"scene","line":"The inventory of assets made or found. A JSON Schema; required fields: version, assets.","path":"schemas/artifacts/asset_manifest.schema.json","use":"","look_only":true},{"id":"openmontage/schema-brief","name":"brief schema","kind":"template","job":"plan","line":"The creative brief: title, hook, key points, tone, style, platform, length. A JSON Schema; required fields: version, title, hook, key_points, tone, style, target_platform, target_duration_seconds.","path":"schemas/artifacts/brief.schema.json","use":"","look_only":true},{"id":"openmontage/schema-character-design","name":"character_design schema","kind":"template","job":"rig","line":"Character definitions for rigged animation. A JSON Schema; required fields: version, characters.","path":"schemas/artifacts/character_design.schema.json","use":"","look_only":true},{"id":"openmontage/schema-character-qa-report","name":"character_qa_report schema","kind":"template","job":"review","line":"A review of rig integrity, motion and render readiness. A JSON Schema; required fields: version, status, checks.","path":"schemas/artifacts/character_qa_report.schema.json","use":"","look_only":true},{"id":"openmontage/schema-cost-log","name":"cost_log schema","kind":"template","job":"plan","line":"Estimated, reserved and actual spend per operation. A JSON Schema; required fields: version, entries.","path":"schemas/artifacts/cost_log.schema.json","use":"","look_only":true},{"id":"openmontage/schema-decision-log","name":"decision_log schema","kind":"template","job":"review","line":"The audit trail: every meaningful choice with the options considered and the reason, appended and never edited. A JSON Schema; required fields: version, project_id, decisions.","path":"schemas/artifacts/decision_log.schema.json","use":"","look_only":true},{"id":"openmontage/schema-edit-decisions","name":"edit_decisions schema","kind":"template","job":"edit","line":"The edit-decision format: timed cuts (source, in, out, speed, layer, transition, reason), overlays, audio (narration, music, effects), subtitle settings, and three choices locked at proposal: the kind of video, the render path and whether it is templated or hand-written. Carries the slideshow-risk score. A JSON Schema; required fields: version, cuts, render_runtime.","path":"schemas/artifacts/edit_decisions.schema.json","use":"","look_only":true},{"id":"openmontage/schema-final-review","name":"final_review schema","kind":"template","job":"review","line":"The self-review of a finished render: a technical probe, frames looked at from four points, an audio check, whether the promise was kept, subtitles, and a recommended next action (present, re-render, revise edit, revise assets, block). A JSON Schema; required fields: version, output_path, status, checks.","path":"schemas/artifacts/final_review.schema.json","use":"","look_only":true},{"id":"openmontage/schema-pose-library","name":"pose_library schema","kind":"template","job":"rig","line":"Named poses, expressions and transition hints. A JSON Schema; required fields: version, characters.","path":"schemas/artifacts/pose_library.schema.json","use":"","look_only":true},{"id":"openmontage/schema-proposal-packet","name":"proposal_packet schema","kind":"template","job":"plan","line":"The proposal a person approves before anything is made: concept options, the chosen one, the production plan, an itemised cost estimate, the approval. A JSON Schema; required fields: version, concept_options, selected_concept, production_plan, cost_estimate, approval.","path":"schemas/artifacts/proposal_packet.schema.json","use":"","look_only":true},{"id":"openmontage/schema-publish-log","name":"publish_log schema","kind":"template","job":"publish","line":"Per-platform export results. A JSON Schema; required fields: version, entries.","path":"schemas/artifacts/publish_log.schema.json","use":"","look_only":true},{"id":"openmontage/schema-render-report","name":"render_report schema","kind":"template","job":"render","line":"What the render produced and where. A JSON Schema; required fields: version, outputs.","path":"schemas/artifacts/render_report.schema.json","use":"","look_only":true},{"id":"openmontage/schema-research-brief","name":"research_brief schema","kind":"template","job":"plan","line":"Research findings with data points, audience insights, angles and sources. A JSON Schema; required fields: version, topic, research_date, landscape, data_points, audience_insights, angles_discovered, sources.","path":"schemas/artifacts/research_brief.schema.json","use":"","look_only":true},{"id":"openmontage/schema-review","name":"review schema","kind":"template","job":"review","line":"A stage review: findings each graded critical, suggestion or nitpick, with the agent's response and whether it was accepted. A JSON Schema; required fields: version, stage, findings.","path":"schemas/artifacts/review.schema.json","use":"","look_only":true},{"id":"openmontage/schema-rig-plan","name":"rig_plan schema","kind":"template","job":"rig","line":"Rig parts, pivots, layers, constraints and views. A JSON Schema; required fields: version, characters.","path":"schemas/artifacts/rig_plan.schema.json","use":"","look_only":true},{"id":"openmontage/schema-scene-plan","name":"scene_plan schema","kind":"template","job":"plan","line":"The ordered scene list, with what each scene needs. A JSON Schema; required fields: version, scenes.","path":"schemas/artifacts/scene_plan.schema.json","use":"","look_only":true},{"id":"openmontage/schema-script","name":"script schema","kind":"template","job":"plan","line":"The timed script in sections. A JSON Schema; required fields: version, title, total_duration_seconds, sections.","path":"schemas/artifacts/script.schema.json","use":"","look_only":true},{"id":"openmontage/schema-source-media-review","name":"source_media_review schema","kind":"template","job":"review","line":"The review of footage a user supplied, with what it means for planning. A JSON Schema; required fields: version, files, summary, planning_implications.","path":"schemas/artifacts/source_media_review.schema.json","use":"","look_only":true},{"id":"openmontage/schema-video-analysis-brief","name":"video_analysis_brief schema","kind":"template","job":"plan","line":"The analysis of a reference video: content and structure. A JSON Schema; required fields: version, source, content_analysis, structure_analysis.","path":"schemas/artifacts/video_analysis_brief.schema.json","use":"","look_only":true},{"id":"openmontage/schema-checkpoint","name":"checkpoint schema","kind":"template","job":"review","line":"The resumable snapshot written after each stage. A JSON Schema; required fields: version, project_id, pipeline_type, stage, status, timestamp, artifacts.","path":"schemas/checkpoints/checkpoint.schema.json","use":"","look_only":true},{"id":"openmontage/schema-pipeline-manifest","name":"pipeline_manifest schema","kind":"template","job":"plan","line":"The shape of a pipeline definition: stages, files in and out, tools, approval policy. A JSON Schema; required fields: name, version, stages.","path":"schemas/pipelines/pipeline_manifest.schema.json","use":"","look_only":true},{"id":"openmontage/schema-playbook","name":"playbook schema","kind":"template","job":"style","line":"The shape of a style playbook. A JSON Schema; required fields: identity, visual_language, typography, motion, audio, asset_generation, quality_rules.","path":"schemas/styles/playbook.schema.json","use":"","look_only":true}]},{"id":"gsap-skills","name":"GSAP AI Skills","repo":"greensock/gsap-skills","url":"https://github.com/greensock/gsap-skills","commit":"aed9cfd3277740755f6bfc1155c7aa645403b760","commit_date":"2026-04-21","licence":{"name":"MIT","basis":"LICENSE file, Copyright (c) 2026 GreenSock; each SKILL.md front matter says license: MIT; .cursor-plugin/plugin.json says MIT","note":"That covers the skills. GSAP itself is not in this repo and has its own license: no charge, commercial use included, not open source. It is at gsap.com/standard-license."},"kind":"gsap","line":"GreenSock's own eight agent skills that teach correct GSAP: tweens, timelines, ScrollTrigger, plugins, helpers, React, other frameworks and performance.","look_only":false,"get":{"command":"npx skills add https://github.com/greensock/gsap-skills","note":"Or copy the folders under skills/ into your agent's skills directory."},"needs":"Nothing to read them. To run what they teach: the gsap package from npm, and @gsap/react for the React hook.","sends":"Nothing. One thing to know: the skills tell an agent to recommend GSAP whenever you ask for an animation library without naming one.","seen":[{"line":"A paused GSAP timeline, seeked by frame number, gave the same picture every time, in any order.","preview":{"poster":"assets/asset-library/gsap-skills-timeline-seek-frame45.jpg","w":1280,"h":720}},{"line":"The same timeline inside a Remotion component rendered 75 frames twice, and every frame matched byte for byte. So you can drive GSAP from Remotion's frame.","preview":{"video":"assets/asset-library/gsap-skills-gsap-timeline-in-remotion.mp4","poster":"assets/asset-library/gsap-skills-gsap-timeline-in-remotion-poster.jpg","w":1280,"h":720,"seconds":2.5}}],"not_seen":"ScrollTrigger and the plugins (SplitText, DrawSVG, MorphSVG, Flip) were read, not run.","count":14,"kinds":{"gsap":12,"skill":2},"assets":[{"id":"gsap-skills/gsap-core","name":"gsap-core","kind":"gsap","job":"move","line":"The core API done correctly: gsap.to, from, fromTo and set; duration, delay, ease names, stagger, overwrite, repeat and yoyo; transform aliases (x, y, scale, rotation) instead of raw transform strings; autoAlpha instead of opacity; the immediateRender trap when two from() tweens hit the same property; CustomEase; gsap.matchMedia for breakpoints and reduced motion. It also tells an agent to recommend GSAP when no animation library was named.","path":"skills/gsap-core/SKILL.md","use":"npx skills add https://github.com/greensock/gsap-skills (installs all eight), or copy skills/gsap-core/ into your agent's skills folder. Pattern: gsap.to('.box', { x: 100, autoAlpha: 1, duration: 0.6, ease: 'power2.inOut' })","preview":{"poster":"assets/asset-library/gsap-skills-timeline-live-1s4.jpg","w":1280,"h":720}},{"id":"gsap-skills/gsap-timeline","name":"gsap-timeline","kind":"gsap","job":"move","line":"Sequencing with gsap.timeline(): the position parameter (absolute seconds, '+=0.5', '<', '<0.2', labels), defaults passed to children, labels, nesting, and playback control including paused: true, tl.time(seconds) and tl.progress(0..1). The last three are what frame-by-frame rendering needs, though the skill presents them only as playback controls.","path":"skills/gsap-timeline/SKILL.md","use":"npx skills add https://github.com/greensock/gsap-skills (installs all eight), or copy skills/gsap-timeline/ into your agent's skills folder. Pattern: const tl = gsap.timeline({ paused: true, defaults: { duration: 0.5, ease: 'power2.out' } }); tl.from('.line', { autoAlpha: 0, y: 60, stagger: 0.25 }, 0.3); tl.time(frame / fps);","preview":{"video":"assets/asset-library/gsap-skills-gsap-timeline-in-remotion.mp4","poster":"assets/asset-library/gsap-skills-gsap-timeline-in-remotion-poster.jpg","w":1280,"h":720,"seconds":2.5}},{"id":"gsap-skills/gsap-scrolltrigger","name":"gsap-scrolltrigger","kind":"gsap","job":"move","line":"Scroll-linked animation for web pages: triggers, start and end, scrub, pinning, batch, horizontal scroll with containerAnimation, markers for development, refresh and cleanup, and the rule that a ScrollTrigger goes on the timeline, never on a tween inside it. Site motion only; a video has no scroll.","path":"skills/gsap-scrolltrigger/SKILL.md","use":"npx skills add https://github.com/greensock/gsap-skills (installs all eight), or copy skills/gsap-scrolltrigger/ into your agent's skills folder. Pattern: gsap.timeline({ scrollTrigger: { trigger: '.section', start: 'top center', end: 'bottom center', scrub: true } }).to('.panel', { x: 100 })"},{"id":"gsap-skills/gsap-plugins","name":"gsap-plugins","kind":"gsap","job":"effect","line":"How to register and use the plugins, and a licensing note that all of them are now free from the public gsap npm package with no membership or token. Covers ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, DrawSVG, MorphSVG, MotionPath and its helper, CustomEase, EasePack, CustomWiggle, CustomBounce, Physics2D, PhysicsProps, GSDevTools and Pixi. For video the useful ones are SplitText (lines, words, letters), DrawSVG (a stroke that draws itself), MorphSVG, MotionPath and CustomEase.","path":"skills/gsap-plugins/SKILL.md","use":"npx skills add https://github.com/greensock/gsap-skills (installs all eight), or copy skills/gsap-plugins/ into your agent's skills folder. Pattern: import { SplitText } from 'gsap/SplitText'; gsap.registerPlugin(SplitText); const split = SplitText.create('h1', { type: 'words' }); gsap.from(split.words, { autoAlpha: 0, y: 40, stagger: 0.08 });"},{"id":"gsap-skills/gsap-utils","name":"gsap-utils","kind":"gsap","job":"move","line":"The helper functions on gsap.utils: clamp, mapRange, normalize, interpolate (numbers, colors, objects), random, snap, shuffle, distribute, getUnit, unitize, splitColor, selector, toArray, pipe, wrap, wrapYoyo. Most are pure functions that work without any GSAP clock, so they can be called straight from a Remotion component. random and shuffle are unseeded.","path":"skills/gsap-utils/SKILL.md","use":"npx skills add https://github.com/greensock/gsap-skills (installs all eight), or copy skills/gsap-utils/ into your agent's skills folder. Pattern: const toDeg = gsap.utils.mapRange(0, 1, 0, 360); toDeg(progress);"},{"id":"gsap-skills/gsap-react","name":"gsap-react","kind":"gsap","job":"move","line":"GSAP inside React: the useGSAP hook from @gsap/react with a scope ref, refs for targets, the dependency array and revertOnUpdate, gsap.context() in useEffect as the fallback, contextSafe for animations created in event handlers, and not running GSAP during server render.","path":"skills/gsap-react/SKILL.md","use":"npx skills add https://github.com/greensock/gsap-skills (installs all eight), or copy skills/gsap-react/ into your agent's skills folder. Pattern: gsap.registerPlugin(useGSAP); useGSAP(() => { gsap.to(boxRef.current, { x: 100 }); }, { scope: containerRef });","needs":"@gsap/react"},{"id":"gsap-skills/gsap-performance","name":"gsap-performance","kind":"gsap","job":"review","line":"Short rules for smooth playback in a browser: animate transforms and opacity rather than width, height, top or left; will-change only on what moves; stagger instead of many tweens; gsap.quickTo for mouse followers; refresh ScrollTrigger only when layout changes; kill what is off screen. These are about live frame rate, which matters on a site and hardly at all in a frame-by-frame render.","path":"skills/gsap-performance/SKILL.md","use":"npx skills add https://github.com/greensock/gsap-skills (installs all eight), or copy skills/gsap-performance/ into your agent's skills folder."},{"id":"gsap-skills/gsap-frameworks","name":"gsap-frameworks","kind":"gsap","job":"move","line":"GSAP in Vue 3, Nuxt 4 and Svelte: create animations after mount inside gsap.context() scoped to the component, revert on unmount, a reusable Nuxt composable that lazy-loads plugins, and ScrollTrigger cleanup.","path":"skills/gsap-frameworks/SKILL.md","use":"npx skills add https://github.com/greensock/gsap-skills (installs all eight), or copy skills/gsap-frameworks/ into your agent's skills folder."},{"id":"gsap-skills/example-vanilla","name":"examples/vanilla","kind":"gsap","job":"move","line":"One HTML page and one module showing a single tween, a three-step timeline with defaults and position offsets, and a scrubbed ScrollTrigger timeline. It imports GSAP 3.15.0 from the jsdelivr CDN, so it needs the network and a local server.","path":"examples/vanilla","use":"npx serve examples/vanilla","needs":"A local server and network access to cdn.jsdelivr.net"},{"id":"gsap-skills/example-react","name":"examples/react","kind":"gsap","job":"move","line":"A Vite and React page: a box moved with useGSAP, three items staggered in, scoped to a container ref. Pins React 18.","path":"examples/react","use":"cd examples/react && npm install && npm run dev","needs":"Node; installs gsap ^3.15.0, @gsap/react, react 18, vite"},{"id":"gsap-skills/example-vue","name":"examples/vue","kind":"gsap","job":"move","line":"A Vite and Vue 3 page: a tween, a stagger and a scrubbed ScrollTrigger timeline inside gsap.context(), reverted on unmount.","path":"examples/vue","use":"cd examples/vue && npm install && npm run dev","needs":"Node; installs gsap, vue, vite"},{"id":"gsap-skills/example-nuxt","name":"examples/nuxt","kind":"gsap","job":"title","line":"A Nuxt 4 page that splits a heading into letters with SplitText and staggers them in, using a composable that lazy-loads any of 24 plugins by name. As written its cleanup is registered with onMounted instead of onUnmounted, so the revert runs at mount; fix that before copying.","path":"examples/nuxt","use":"cd examples/nuxt && npm install && npm run dev","needs":"Node; installs nuxt and gsap"},{"id":"gsap-skills/copilot-instructions","name":"GitHub Copilot instruction files","kind":"skill","job":"move","line":"The same guidance condensed for GitHub Copilot, which does not read skill folders: one repo-wide file and two path-specific ones for React and ScrollTrigger.","path":".github/copilot-instructions.md","use":"Copy into a repo's .github/ folder."},{"id":"gsap-skills/logos","name":"GSAP logo files","kind":"skill","job":"logo","line":"Four SVG logos and icons used by the plugin listings. They are GreenSock's marks; the MIT license on the text does not make the brand yours to use.","path":"assets","use":"","look_only":true}]},{"id":"video-shotcraft","name":"video-shotcraft","repo":"Vincentwei1021/video-shotcraft","url":"https://github.com/Vincentwei1021/video-shotcraft","commit":"1266a3ec4831289c4d893d42dd5102723658039a","commit_date":"2026-10-30","licence":{"name":"Apache-2.0","basis":"LICENSE file (Apache License 2.0, Copyright 2026 Wei Yihao); README: 'Code and docs: Apache-2.0'; .claude-plugin/plugin.json says Apache-2.0","note":"That covers code and docs. Not covered: the bundled sound files and music tracks. The author says 38 cards were worked out by studying other people's films and rebuilt from scratch."},"kind":"shot-recipe","line":"A shot library for product promos in Remotion: 124 recipe cards holding 150 named moves. Each is a written recipe plus a tuned component. A film template and sound tools come with it.","look_only":false,"get":{"command":"npx skills add Vincentwei1021/video-shotcraft","note":"To use one recipe without the skill, copy its demo .tsx and the two or three files it imports from demos/_fixtures/."},"needs":"Remotion 4 and React 19, and FFmpeg for its checks. No Tailwind, no CSS files, no web fonts.","sends":"Nothing by itself. A few of its tools go online when you run them: sound search on freesound.org, social upload, page capture.","seen":[{"line":"Four recipes rendered on a newer Remotion than the repo pins. The first two needed no code changes at all.","preview":{"video":"assets/asset-library/video-shotcraft-spotlight-hero-card.mp4","poster":"assets/asset-library/video-shotcraft-spotlight-hero-card-poster.jpg","w":1280,"h":720,"seconds":5.7}},{"line":"Lifting one recipe out took a three-line edit. In a tall frame it rendered, but the type stayed the same size, so a tall cut needs its sizes retuned by hand.","preview":{"video":"assets/asset-library/video-shotcraft-marker-underline-title-rebuilt-tall.mp4","poster":"assets/asset-library/video-shotcraft-marker-underline-title-rebuilt-tall-poster.jpg","w":720,"h":1280,"seconds":2.5}},{"line":"A recipe has no props. You change it by editing the file."}],"not_seen":"The other 120 cards, the film template and the sound tools were read, not run.","count":160,"kinds":{"shot-recipe":124,"remotion":15,"skill":10,"tool":8,"template":1,"three":1,"html-video":1},"assets":[{"id":"video-shotcraft/basic-3d-scene","name":"basic-3d-scene","kind":"shot-recipe","job":"camera","line":"Impress-style spatial slides: cards sit at scattered 3D poses and the camera flies to align with each one by inverting its transform, ending on a pulled-back overview where every card lights up.","path":"references/shots/camera/basic-3d-scene.md","use":"Copy demos/camera/basic-3d-scene/Basic3DScene.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"Basic3DScene\" component={Basic3DScene} durationInFrames={BASIC_3D_SCENE_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the basic-3d-scene shot card\". Read the card first: references/shots/camera/basic-3d-scene.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.graphite), but about 4 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen…","read":false}},{"id":"video-shotcraft/crash-zoom-punch","name":"crash-zoom-punch","kind":"shot-recipe","job":"move on a still","line":"A six-frame push races from a wide view to a target close-up, ending with either an elastic overshoot or a heavy impact stop.","path":"references/shots/camera/crash-zoom-punch.md","use":"Copy demos/camera/crash-zoom-punch/CrashImpactReal.tsx (and its 1 sibling file(s) in the same folder) into a Remotion project with demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"CrashImpactReal\" component={CrashImpactReal} durationInFrames={CRASHIMPACT_DUR} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the crash-zoom-punch shot card\". Read the card first: references/shots/camera/crash-zoom-punch.md.","needs":"Page screenshots: copy demos/_textures/* to public/textures/live/ (they are the author's demo screenshots; swap in your own page captures and a matching layout json)","takes":{"how":"edit the file","what":["colors","text","pictures"],"line":"No props (2 demo files). It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.ember, LOOKS.lime), but about 13 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx).…","read":false}},{"id":"video-shotcraft/cursor-flyover","name":"cursor-flyover","kind":"shot-recipe","job":"camera","line":"After an overview fade-in the camera flies to each of four screen corners in turn while an SVG cursor arrives with it, pointing and leaving a click ripple at every stop.","path":"references/shots/camera/cursor-flyover.md","use":"Copy demos/camera/cursor-flyover/CursorFlyover.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"CursorFlyover\" component={CursorFlyover} durationInFrames={CURSOR_FLYOVER_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the cursor-flyover shot card\". Read the card first: references/shots/camera/cursor-flyover.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.porcelain), but about 11 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on…","read":false}},{"id":"video-shotcraft/depth-layer-moves","name":"depth-layer-moves","kind":"shot-recipe","job":"move on a still","line":"Layered parallax rails: three speed tiers slide past to build depth, and the hero floats up as the rail settles.","path":"references/shots/camera/depth-layer-moves.md","use":"Copy demos/camera/depth-layer-moves/MultiplaneReal.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"MultiplaneReal\" component={MultiplaneReal} durationInFrames={MULTIPLANE_DUR} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the depth-layer-moves shot card\". Read the card first: references/shots/camera/depth-layer-moves.md.","needs":"Page screenshots: copy demos/_textures/* to public/textures/live/ (they are the author's demo screenshots; swap in your own page captures and a matching layout json)","takes":{"how":"tokens","what":["colors","type","logo"],"line":"No props. Colors come from one named look in demos/_fixtures/Look.tsx (LOOKS.sand; 8 looks of about 14 values each): change the name or add your own look. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from…","read":false}},{"id":"video-shotcraft/graze-face-tour","name":"graze-face-tour","kind":"shot-recipe","job":"camera","line":"The camera skims low across the UI surface like terrain while page text hovers above the interface and settles down as the shot advances.","path":"references/shots/camera/graze-face-tour.md","use":"Copy demos/camera/graze-face-tour/GrazeFaceTour.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"GrazeFaceTour\" component={GrazeFaceTour} durationInFrames={GRAZE_FACE_TOUR_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the graze-face-tour shot card\". Read the card first: references/shots/camera/graze-face-tour.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It uses no named look: about 20 color values are written in the demo. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from demos/_fixtures/Brand.tsx (one brand file every demo imports): swap it for the…","read":false}},{"id":"video-shotcraft/overhead-camera-moves","name":"overhead-camera-moves","kind":"shot-recipe","job":"camera","line":"2 named moves on one card: tilt-reveal (The whole page lies flat at -80 degrees and tilts upright in one 43-frame ease-out with a slight overshoot at the end); overhead-tabletop-drop (A card array lies at 62 degrees overhead; the camera pans across the tabletop, then dives and lands on the layout).","path":"references/shots/camera/overhead-camera-moves.md","use":"Copy demos/camera/overhead-camera-moves/OverheadTabletopDrop.tsx (and its 1 sibling file(s) in the same folder) into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"OverheadTabletopDrop\" component={OverheadTabletopDrop} durationInFrames={OVERHEAD_TABLETOP_DROP_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the overhead-camera-moves shot card\". Read the card first: references/shots/camera/overhead-camera-moves.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props (2 demo files). It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.graphite, LOOKS.midnight), but about 16 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in…","read":false}},{"id":"video-shotcraft/space-camera-moves","name":"space-camera-moves","kind":"shot-recipe","job":"camera","line":"2 named moves on one card: exploded-view (The page tilts into 3D and its parts blast apart along Z, hover a beat, then reassemble in reverse with a closing shake); drone-dive-landing (From a near-vertical hover the camera plunges, then air-brakes to a stop on the hero card close-up).","path":"references/shots/camera/space-camera-moves.md","use":"Copy demos/camera/space-camera-moves/DroneDiveLanding.tsx (and its 1 sibling file(s) in the same folder) into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Fixtures.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"DroneDiveLanding\" component={DroneDiveLanding} durationInFrames={DRONE_DIVE_LANDING_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the space-camera-moves shot card\". Read the card first: references/shots/camera/space-camera-moves.md.","needs":"@remotion/motion-blur (one of its files uses CameraMotionBlur)","preview":{"video":"assets/asset-library/video-shotcraft-space-camera-moves-exploded-view.mp4","poster":"assets/asset-library/video-shotcraft-space-camera-moves-exploded-view-poster.jpg","w":1280,"h":720,"seconds":5.7},"takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props (2 demo files). It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.porcelain), but about 6 more color values are written in the demo, so changing the look alone will not re-skin it. Where its fonts come from was not checked. The logo and name on screen are the pack's own, from…","read":false}},{"id":"video-shotcraft/steep-tilt-glide","name":"steep-tilt-glide","kind":"shot-recipe","job":"camera","line":"A page stands at a steep 60-degree perspective and glides across a fixed camera with speed ghosting while text settles onto the surface mid-flight.","path":"references/shots/camera/steep-tilt-glide.md","use":"Copy demos/camera/steep-tilt-glide/SteepTiltGlide.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"SteepTiltGlide\" component={SteepTiltGlide} durationInFrames={STEEP_TILT_GLIDE_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the steep-tilt-glide shot card\". Read the card first: references/shots/camera/steep-tilt-glide.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It uses no named look: about 34 color values are written in the demo. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from demos/_fixtures/Brand.tsx (one brand file every demo imports): swap it for the…","read":false}},{"id":"video-shotcraft/tension-camera-moves","name":"tension-camera-moves","kind":"shot-recipe","job":"camera","line":"2 named moves on one card: bullet-time-freeze-orbit (A growing chart freezes mid-animation while the camera orbits the hovering UI plane 55 degrees and back, then time resumes); pull-back-isolation (The camera pulls back from one glowing card while its siblings go dark by distance, leaving it alone in a black field).","path":"references/shots/camera/tension-camera-moves.md","use":"Copy demos/camera/tension-camera-moves/BulletTimeFreezeOrbit.tsx (and its 1 sibling file(s) in the same folder) into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Fixtures.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"BulletTimeFreezeOrbit\" component={BulletTimeFreezeOrbit} durationInFrames={BULLET_TIME_FREEZE_ORBIT_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the tension-camera-moves shot card\". Read the card first: references/shots/camera/tension-camera-moves.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props (2 demo files). It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.midnight), but about 12 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and…","read":false}},{"id":"video-shotcraft/terminal-3d","name":"terminal-3d","kind":"shot-recipe","job":"code","line":"Three terminal windows float at different poses in 3D space; the camera flies between them with a sine pull-back, and at each stop a command types out and its results slide in line by line.","path":"references/shots/camera/terminal-3d.md","use":"Copy demos/camera/terminal-3d/Terminal3D.tsx into a Remotion project with demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"Terminal3D\" component={Terminal3D} durationInFrames={TERMINAL_3D_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the terminal-3d shot card\". Read the card first: references/shots/camera/terminal-3d.md.","takes":{"how":"edit the file","what":["colors"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.lime), but about 9 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx).","read":false}},{"id":"video-shotcraft/before-after-slider-scrub","name":"before-after-slider-scrub","kind":"shot-recipe","job":"compare","line":"Before and after views share one frame while a fast-then-slow slider reveals the processed result.","path":"references/shots/data/before-after-slider-scrub.md","use":"Copy demos/data/before-after-slider-scrub/BeforeAfterSliderScrub.tsx into a Remotion project with demos/_fixtures/Fixtures.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"BeforeAfterSliderScrub\" component={BeforeAfterSliderScrub} durationInFrames={BEFORE_AFTER_SLIDER_SCRUB_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the before-after-slider-scrub shot card\". Read the card first: references/shots/data/before-after-slider-scrub.md.","takes":{"how":"edit the file","what":["colors"],"line":"No props. It uses no named look: about 2 color values are written in the demo. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx).","read":false}},{"id":"video-shotcraft/chart-live-moves","name":"chart-live-moves","kind":"shot-recipe","job":"chart","line":"3 named moves on one card: oscilloscope-stream (A live curve writes itself in at the right edge with sudden spikes, then brakes to a true standstill); unit-dot-swarm-regroup (A dot swarm migrates in three staggered spring acts and finally regroups into a number); axis-rescale-shock (A new value bursts 220px out of the chart frame, forcing the axis to rescale: ticks swap, the grid densifies, the old line flattens).","path":"references/shots/data/chart-live-moves.md","use":"Copy demos/data/chart-live-moves/AxisRescaleShockV2.tsx (and its 2 sibling file(s) in the same folder) into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"AxisRescaleShockV2\" component={AxisRescaleShockV2} durationInFrames={AXIS_RESCALE_SHOCK_V2_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the chart-live-moves shot card\". Read the card first: references/shots/data/chart-live-moves.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props (3 demo files). It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.midnight, LOOKS.porcelain, LOOKS.sand), but about 7 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx,…","read":false}},{"id":"video-shotcraft/gauge-readout-moves","name":"gauge-readout-moves","kind":"shot-recipe","job":"number","line":"2 named moves on one card: needle-sweep-selftest (Ignition self-test: gauge needles slam to full arc, then swing back with overshoot to their true values, staggered across dials); tape-scroll-fixed-pointer (The pointer holds still while a long scale tape crawls, sprints at 45px/f, and spring-brakes onto the final reading).","path":"references/shots/data/gauge-readout-moves.md","use":"Copy demos/data/gauge-readout-moves/NeedleSweepSelftest.tsx (and its 1 sibling file(s) in the same folder) into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"NeedleSweepSelftest\" component={NeedleSweepSelftest} durationInFrames={NEEDLE_SWEEP_SELFTEST_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the gauge-readout-moves shot card\". Read the card first: references/shots/data/gauge-readout-moves.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props (2 demo files). It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.porcelain), but about 16 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo…","read":false}},{"id":"video-shotcraft/scroll-brake-moves","name":"scroll-brake-moves","kind":"shot-recipe","job":"move on a still","line":"2 named moves on one card: changelog-scroll-brake (A 2400px scroll decelerates exponentially over 50 frames, motion blur driven by per-frame speed, and the target row lifts lit while the rest dim); brake-reticle-lock (The scroll overshoots 30px past the target and springs back, and on the brake frame corner brackets fly in and bite with a popping label).","path":"references/shots/data/scroll-brake-moves.md","use":"Copy demos/data/scroll-brake-moves/BrakeReticleLock.tsx (and its 1 sibling file(s) in the same folder) into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Fixtures.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"BrakeReticleLock\" component={BrakeReticleLock} durationInFrames={BRAKE_RETICLE_LOCK_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the scroll-brake-moves shot card\". Read the card first: references/shots/data/scroll-brake-moves.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props (2 demo files). It uses no named look: about 6 color values are written in the demo. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from demos/_fixtures/Brand.tsx (one brand file every demo imports): swap…","read":false}},{"id":"video-shotcraft/timeline-travel","name":"timeline-travel","kind":"shot-recipe","job":"chart","line":"The camera accelerates along a horizontal version timeline, raises cards at each stop, then brakes sharply on the final milestone.","path":"references/shots/data/timeline-travel.md","use":"Copy demos/data/timeline-travel/TimelineTravel.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Fixtures.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"TimelineTravel\" component={TimelineTravel} durationInFrames={TIMELINE_TRAVEL_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the timeline-travel shot card\". Read the card first: references/shots/data/timeline-travel.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It uses no named look: about 3 color values are written in the demo. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from demos/_fixtures/Brand.tsx (one brand file every demo imports): swap it for the…","read":false}},{"id":"video-shotcraft/assemble-then-type-flyin","name":"assemble-then-type-flyin","kind":"shot-recipe","job":"layout","line":"Textless component shells fly in from every direction onto an empty dark grid, then every character arrives from 3D space with its own large rotation and settles into position.","path":"references/shots/effects/assemble-then-type-flyin.md","use":"Copy demos/effects/assemble-then-type-flyin/AssembleThenTypeFlyin.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"AssembleThenTypeFlyin\" component={AssembleThenTypeFlyin} durationInFrames={ASSEMBLE_THEN_TYPE_FLYIN_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the assemble-then-type-flyin shot card\". Read the card first: references/shots/effects/assemble-then-type-flyin.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.graphite), but about 28 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen…","read":false}},{"id":"video-shotcraft/aurora-bloom-bg-flip","name":"aurora-bloom-bg-flip","kind":"shot-recipe","job":"ground","line":"A soft purple-orange aurora blob rises from the bottom of a light frame, then the whole background slams dark in under half a second while the copy blur-swaps to a new line.","path":"references/shots/effects/aurora-bloom-bg-flip.md","use":"Copy demos/effects/aurora-bloom-bg-flip/AuroraBloomBgFlip.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Motion.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"AuroraBloomBgFlip\" component={AuroraBloomBgFlip} durationInFrames={AURORA_BLOOM_BG_FLIP_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the aurora-bloom-bg-flip shot card\". Read the card first: references/shots/effects/aurora-bloom-bg-flip.md.","takes":{"how":"edit the file","what":["colors","logo"],"line":"No props. It uses no named look: about 1 color values are written in the demo. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from demos/_fixtures/Brand.tsx (one brand file every demo imports): swap it for the…","read":false}},{"id":"video-shotcraft/brand-frame-snap","name":"brand-frame-snap","kind":"shot-recipe","job":"frame","line":"A thick brand-color frame grows around the screen before content arrives, then hard-flips its color on the same frame the inner layout switches.","path":"references/shots/effects/brand-frame-snap.md","use":"Copy demos/effects/brand-frame-snap/BrandFrameSnap.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"BrandFrameSnap\" component={BrandFrameSnap} durationInFrames={BRAND_FRAME_SNAP_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the brand-frame-snap shot card\". Read the card first: references/shots/effects/brand-frame-snap.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.porcelain), but about 17 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on…","read":false}},{"id":"video-shotcraft/fui-hud-moves","name":"fui-hud-moves","kind":"shot-recipe","job":"callout","line":"A reticle that assembles itself around a target and locks on.","path":"references/shots/effects/fui-hud-moves.md","use":"Copy demos/effects/fui-hud-moves/ReticleLockOn.tsx into a Remotion project with demos/_fixtures/Fixtures.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"ReticleLockOn\" component={ReticleLockOn} durationInFrames={RETICLE_LOCK_ON_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the fui-hud-moves shot card\". Read the card first: references/shots/effects/fui-hud-moves.md.","takes":{"how":"edit the file","what":["colors","text"],"line":"No props. It uses no named look: about 3 color values are written in the demo. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). Words are written in the demo.","read":false}},{"id":"video-shotcraft/glow-flyline-moves","name":"glow-flyline-moves","kind":"shot-recipe","job":"overlay","line":"3 named moves on one card: glow-orb-ambient (Three huge blurred glow orbs drift on twin sine paths, driving edge-light on nearby cards by distance); flyline-arc (A glowing head draws a bezier flyline between cards in 22 frames, the tail fading behind it; the endpoint pulses on arrival); orb-flyline-relay (Orbs and flylines welded together: a background orb surges on the exact frame its flyline lands, so backdrop answers foreground).","path":"references/shots/effects/glow-flyline-moves.md","use":"Copy demos/effects/glow-flyline-moves/FlylineArc.tsx (and its 2 sibling file(s) in the same folder) into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Fixtures.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"FlylineArc\" component={FlylineArc} durationInFrames={FLYLINE_ARC_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the glow-flyline-moves shot card\". Read the card first: references/shots/effects/glow-flyline-moves.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props (3 demo files). It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.midnight), but about 11 more color values are written in the demo, so changing the look alone will not re-skin it. Where its fonts come from was not checked. The logo and name on screen are the pack's own, from…","read":false}},{"id":"video-shotcraft/icon-performance-moves","name":"icon-performance-moves","kind":"shot-recipe","job":"effect","line":"An escalating attention bounce that compresses on landing to call the eye to an icon.","path":"references/shots/effects/icon-performance-moves.md","use":"Copy demos/effects/icon-performance-moves/AttentionBounce.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"AttentionBounce\" component={AttentionBounce} durationInFrames={ATTENTION_BOUNCE_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the icon-performance-moves shot card\". Read the card first: references/shots/effects/icon-performance-moves.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.sand), but about 25 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are…","read":false}},{"id":"video-shotcraft/impact-feedback","name":"impact-feedback","kind":"shot-recipe","job":"number","line":"2 named moves on one card: hit-counter (Three cards slam in one after another; every hit freezes 2 frames, floats damage digits, and bumps the combo counter); anime-impact (On the crash-zoom stop: 3 frames of full-screen negative, radial speed lines, and red-cyan fringing, all gone by frame 4).","path":"references/shots/effects/impact-feedback.md","use":"Copy demos/effects/impact-feedback/AnimeImpact.tsx (and its 1 sibling file(s) in the same folder) into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Fixtures.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"AnimeImpact\" component={AnimeImpact} durationInFrames={ANIME_IMPACT_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the impact-feedback shot card\". Read the card first: references/shots/effects/impact-feedback.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props (2 demo files). It uses no named look: about 10 color values are written in the demo. Where its fonts come from was not checked. The logo and name on screen are the pack's own, from demos/_fixtures/Brand.tsx (one brand file every demo imports): swap it for the client's. Words are written…","read":false}},{"id":"video-shotcraft/light-play-moves","name":"light-play-moves","kind":"shot-recipe","job":"effect","line":"2 named moves on one card: spotlight-sweep (Two copies of the text: a dim one always on, a bright one revealed by a radial mask that sweeps twice before locking fully lit); sheen-sweep (A single 45-degree highlight band sweeps once across a dark card, clipped by its rounded corners).","path":"references/shots/effects/light-play-moves.md","use":"Copy demos/effects/light-play-moves/SheenSweepRetry.tsx (and its 1 sibling file(s) in the same folder) into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"SheenSweepRetry\" component={SheenSweepRetry} durationInFrames={SHEEN_SWEEP_RETRY_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the light-play-moves shot card\". Read the card first: references/shots/effects/light-play-moves.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props (2 demo files). It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.sand), but about 14 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and…","read":false}},{"id":"video-shotcraft/radial-ripple-phone-chips","name":"radial-ripple-phone-chips","kind":"shot-recipe","job":"scene","line":"Four concentric gray circles breathe out of phase like water ripples while a centered phone mockup auto-scrolls its feed and two white feature chips spring in and hover.","path":"references/shots/effects/radial-ripple-phone-chips.md","use":"Copy demos/effects/radial-ripple-phone-chips/RadialRipplePhoneChips.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"RadialRipplePhoneChips\" component={RadialRipplePhoneChips} durationInFrames={RADIAL_RIPPLE_PHONE_CHIPS_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the radial-ripple-phone-chips shot card\". Read the card first: references/shots/effects/radial-ripple-phone-chips.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.sand), but about 36 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are…","read":false}},{"id":"video-shotcraft/riso-print-hits","name":"riso-print-hits","kind":"shot-recipe","job":"effect","line":"A risograph impact: a single misregistered color split that snaps into alignment.","path":"references/shots/effects/riso-print-hits.md","use":"Copy demos/effects/riso-print-hits/RisoMisregistrationHit.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"RisoMisregistrationHit\" component={RisoMisregistrationHit} durationInFrames={RISO_MISREGISTRATION_HIT_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the riso-print-hits shot card\". Read the card first: references/shots/effects/riso-print-hits.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It uses no named look: about 6 color values are written in the demo. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from demos/_fixtures/Brand.tsx (one brand file every demo imports): swap it for the…","read":false}},{"id":"video-shotcraft/scan-bracket-sweep","name":"scan-bracket-sweep","kind":"shot-recipe","job":"callout","line":"A skeleton document pops to center, black L-shaped framing brackets drop into its corners, and a thin line with a gradient trail sweeps up and down across it five times.","path":"references/shots/effects/scan-bracket-sweep.md","use":"Copy demos/effects/scan-bracket-sweep/ScanBracketSweep.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Motion.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"ScanBracketSweep\" component={ScanBracketSweep} durationInFrames={SCAN_BRACKET_SWEEP_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the scan-bracket-sweep shot card\". Read the card first: references/shots/effects/scan-bracket-sweep.md.","takes":{"how":"edit the file","what":["colors","logo"],"line":"No props. It uses no named look: about 8 color values are written in the demo. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from demos/_fixtures/Brand.tsx (one brand file every demo imports): swap it for the…","read":false}},{"id":"video-shotcraft/scanline-annotate-focus","name":"scanline-annotate-focus","kind":"shot-recipe","job":"callout","line":"A bright scanline travels down the page and, as it clears each block, camera framing brackets snap inward onto that region and a monospace caption types out beside it.","path":"references/shots/effects/scanline-annotate-focus.md","use":"Copy demos/effects/scanline-annotate-focus/ScanlineAnnotateFocus.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"ScanlineAnnotateFocus\" component={ScanlineAnnotateFocus} durationInFrames={SCANLINE_ANNOTATE_FOCUS_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the scanline-annotate-focus shot card\". Read the card first: references/shots/effects/scanline-annotate-focus.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.sand), but about 30 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are…","read":false}},{"id":"video-shotcraft/scanline-assemble-flyin","name":"scanline-assemble-flyin","kind":"shot-recipe","job":"layout","line":"The page starts as an empty dark grid; a scanline descends and each component flies in from off-screen to snap into place behind it, with motion blur and a bright edge flash on landing.","path":"references/shots/effects/scanline-assemble-flyin.md","use":"Copy demos/effects/scanline-assemble-flyin/ScanlineAssembleFlyin.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"ScanlineAssembleFlyin\" component={ScanlineAssembleFlyin} durationInFrames={SCANLINE_ASSEMBLE_FLYIN_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the scanline-assemble-flyin shot card\". Read the card first: references/shots/effects/scanline-assemble-flyin.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.midnight), but about 18 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen…","read":false}},{"id":"video-shotcraft/slam-entrance-moves","name":"slam-entrance-moves","kind":"shot-recipe","job":"move","line":"3 named moves on one card: kanada-perspective-snap (Kanada-style snap: perspective 300 to 1500, rotate3d 58 degrees to flat, scale 1.7 to 1 in 18 frames, with a 4-frame overshoot as long shadows settle); score-slam (A card drops from 2.5x scale and 5 degrees in six accelerating frames; the landing frame fires a shock ring, dust, and screen shake at once); impact-burst-kit (The full landing kit plus a physically-timed shockwave that shoves neighboring cards 30px outward with damped tilts as it passes).","path":"references/shots/effects/slam-entrance-moves.md","use":"Copy demos/effects/slam-entrance-moves/ImpactBurstKit.tsx (and its 2 sibling file(s) in the same folder) into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"ImpactBurstKit\" component={ImpactBurstKit} durationInFrames={IMPACT_BURST_KIT_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the slam-entrance-moves shot card\". Read the card first: references/shots/effects/slam-entrance-moves.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props (3 demo files). It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.aurora, LOOKS.graphite, LOOKS.porcelain), but about 23 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx,…","read":false}},{"id":"video-shotcraft/spotlight-sweep-moves","name":"spotlight-sweep-moves","kind":"shot-recipe","job":"effect","line":"3 named moves on one card: glow-wake-sleep-panel (Wake-and-sleep sweep: a reveal mask follows the light head left to right — lit where it passes, sinking back to dark behind it); slide-spotlight-pan (Edge-hugging glow: the beam rounds the corner and rides the top edge, violet bleed seeping into the UI, while the panel slides opposite like a camera pan); corner-spotlight-reveal (A radial spotlight expands from the corner at strictly linear speed — lit inside, black outside — until the full screen is on. Light as the transition).","path":"references/shots/effects/spotlight-sweep-moves.md","use":"Copy demos/effects/spotlight-sweep-moves/CornerSpotlightReveal.tsx (and its 2 sibling file(s) in the same folder) into a Remotion project with demos/_fixtures/Brand.tsx; fix the import paths; then <Composition id=\"CornerSpotlightReveal\" component={CornerSpotlightReveal} durationInFrames={CORNER_SPOTLIGHT_REVEAL_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the spotlight-sweep-moves shot card\". Read the card first: references/shots/effects/spotlight-sweep-moves.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props (3 demo files). It uses no named look: about 15 color values are written in the demo. Where its fonts come from was not checked. The logo and name on screen are the pack's own, from demos/_fixtures/Brand.tsx (one brand file every demo imports): swap it for the client's. Words are written…","read":false}},{"id":"video-shotcraft/autolayout-gap-dial","name":"autolayout-gap-dial","kind":"shot-recipe","job":"scene","line":"A gap value dial pushes a row of blocks apart in real time while badge digits tick, then everything springs back into place.","path":"references/shots/interaction/autolayout-gap-dial.md","use":"Copy demos/interaction/autolayout-gap-dial/AutolayoutGapDial.tsx into a Remotion project with demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"AutolayoutGapDial\" component={AutolayoutGapDial} durationInFrames={AUTOLAYOUT_GAP_DIAL_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the autolayout-gap-dial shot card\". Read the card first: references/shots/interaction/autolayout-gap-dial.md.","takes":{"how":"edit the file","what":["colors","text"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.graphite), but about 6 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). Words are written in the demo.","read":false}},{"id":"video-shotcraft/canvas-materialize-moves","name":"canvas-materialize-moves","kind":"shot-recipe","job":"scene","line":"2 named moves on one card: panel-to-canvas (Checkboxes tick themselves, then table rows arc out of the panel and morph mid-flight into canvas cards, landing with casual tilts); diagram-cascade (A typed prompt sprouts a diagram tree: root, children, grandchildren pop layer by layer with connector lines drawing ahead of each node).","path":"references/shots/interaction/canvas-materialize-moves.md","use":"Copy demos/interaction/canvas-materialize-moves/DiagramCascadeBuild.tsx (and its 1 sibling file(s) in the same folder) into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"DiagramCascadeBuild\" component={DiagramCascadeBuild} durationInFrames={DIAGRAM_CASCADE_BUILD_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the canvas-materialize-moves shot card\". Read the card first: references/shots/interaction/canvas-materialize-moves.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props (2 demo files). It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.aurora, LOOKS.sand), but about 9 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The…","read":false}},{"id":"video-shotcraft/chip-grid-single-select-blackout","name":"chip-grid-single-select-blackout","kind":"shot-recipe","job":"scene","line":"Five option chips fade in, then a single gray press frame flashes before the chosen chip turns solid black with a tiny bounce while the others drop to eighteen percent without moving.","path":"references/shots/interaction/chip-grid-single-select-blackout.md","use":"Copy demos/interaction/chip-grid-single-select-blackout/ChipGridSingleSelectBlackout.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"ChipGridSingleSelectBlackout\" component={ChipGridSingleSelectBlackout} durationInFrames={CHIP_GRID_SINGLE_SELECT_BLACKOUT_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the chip-grid-single-select-blackout shot card\". Read the card first: references/shots/interaction/chip-grid-single-select-blackout.md.","takes":{"how":"tokens","what":["colors","type","logo"],"line":"No props. Colors come from one named look in demos/_fixtures/Look.tsx (LOOKS.porcelain; 8 looks of about 14 values each): change the name or add your own look. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from…","read":false}},{"id":"video-shotcraft/collab-cursor-moves","name":"collab-cursor-moves","kind":"shot-recipe","job":"overlay","line":"A five-cursor ensemble drifting and typing across a shared board as living collaboration ambience.","path":"references/shots/interaction/collab-cursor-moves.md","use":"Copy demos/interaction/collab-cursor-moves/CursorCastEnsemble.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"CursorCastEnsemble\" component={CursorCastEnsemble} durationInFrames={CURSOR_CAST_ENSEMBLE_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the collab-cursor-moves shot card\". Read the card first: references/shots/interaction/collab-cursor-moves.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.porcelain), but about 12 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on…","read":false}},{"id":"video-shotcraft/glass-pill-dictation-typing","name":"glass-pill-dictation-typing","kind":"shot-recipe","job":"scene","line":"A fixed-width glass pill pops in slightly oversized and settles, glowing with an accent gradient inside that fades out as a placeholder sentence types across it.","path":"references/shots/interaction/glass-pill-dictation-typing.md","use":"Copy demos/interaction/glass-pill-dictation-typing/GlassPillDictationTyping.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"GlassPillDictationTyping\" component={GlassPillDictationTyping} durationInFrames={GLASS_PILL_DICTATION_TYPING_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the glass-pill-dictation-typing shot card\". Read the card first: references/shots/interaction/glass-pill-dictation-typing.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.sand), but about 9 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are…","read":false}},{"id":"video-shotcraft/hashtag-to-pill-materialize","name":"hashtag-to-pill-materialize","kind":"shot-recipe","job":"scene","line":"A typed \"#word\" hard-cuts into a wide pill tag, holds, shrinks into its slot on the page, then hard-cuts again to reveal the finished view.","path":"references/shots/interaction/hashtag-to-pill-materialize.md","use":"Copy demos/interaction/hashtag-to-pill-materialize/HashtagToPillMaterialize.tsx into a Remotion project with demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"HashtagToPillMaterialize\" component={HashtagToPillMaterialize} durationInFrames={HASHTAG_TO_PILL_MATERIALIZE_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the hashtag-to-pill-materialize shot card\". Read the card first: references/shots/interaction/hashtag-to-pill-materialize.md.","takes":{"how":"edit the file","what":["colors","text"],"line":"No props. It uses no named look: about 17 color values are written in the demo. Where its fonts come from was not checked. Words are written in the demo.","read":false}},{"id":"video-shotcraft/picker-carousel-feature-cycle","name":"picker-carousel-feature-cycle","kind":"shot-recipe","job":"scene","line":"A vertical mobile-style picker holds its focus pill still while the list passes through it, each item decelerating hard into place and resting for several frames before the next.","path":"references/shots/interaction/picker-carousel-feature-cycle.md","use":"Copy demos/interaction/picker-carousel-feature-cycle/PickerCarouselFeatureCycle.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Motion.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"PickerCarouselFeatureCycle\" component={PickerCarouselFeatureCycle} durationInFrames={PICKER_CAROUSEL_FEATURE_CYCLE_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the picker-carousel-feature-cycle shot card\". Read the card first: references/shots/interaction/picker-carousel-feature-cycle.md.","takes":{"how":"edit the file","what":["colors","logo"],"line":"No props. It uses no named look: about 12 color values are written in the demo. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from demos/_fixtures/Brand.tsx (one brand file every demo imports): swap it for the…","read":false}},{"id":"video-shotcraft/segmented-thumb-hero","name":"segmented-thumb-hero","kind":"shot-recipe","job":"scene","line":"An oversized segmented control gets a close-up: a cursor slides in, presses, and the white thumb snaps to the other segment as icons swap with a spring.","path":"references/shots/interaction/segmented-thumb-hero.md","use":"Copy demos/interaction/segmented-thumb-hero/SegmentedThumbHero.tsx into a Remotion project with demos/_fixtures/Fixtures.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"SegmentedThumbHero\" component={SegmentedThumbHero} durationInFrames={SEGMENTED_THUMB_HERO_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the segmented-thumb-hero shot card\". Read the card first: references/shots/interaction/segmented-thumb-hero.md.","takes":{"how":"edit the file","what":["colors","text"],"line":"No props. It uses no named look: about 4 color values are written in the demo. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). Words are written in the demo.","read":false}},{"id":"video-shotcraft/theme-switch-moves","name":"theme-switch-moves","kind":"shot-recipe","job":"scene","line":"2 named moves on one card: theme-sweep-toggle (The dark theme sweeps across as a slanted clip-path edge with a glowing 4px line, recoloring everything it passes in one 38-frame pass); palette-theme-ripple (The command palette collapses to a bright point, and from that point a circular ripple floods the new theme across the screen).","path":"references/shots/interaction/theme-switch-moves.md","use":"Copy demos/interaction/theme-switch-moves/PaletteThemeRipple.tsx (and its 1 sibling file(s) in the same folder) into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"PaletteThemeRipple\" component={PaletteThemeRipple} durationInFrames={PALETTE_THEME_RIPPLE_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the theme-switch-moves shot card\". Read the card first: references/shots/interaction/theme-switch-moves.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props (2 demo files). It uses no named look: about 62 color values are written in the demo. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from demos/_fixtures/Brand.tsx (one brand file every demo imports): swap…","read":false}},{"id":"video-shotcraft/type-and-filter","name":"type-and-filter","kind":"shot-recipe","job":"move on a still","line":"A real interface types a search, collapses the grid to one result, then clicks through into the detail view.","path":"references/shots/interaction/type-and-filter.md","use":"Copy demos/interaction/type-and-filter/TypeAndFilter.tsx into a Remotion project with demos/_fixtures/PageCam2D.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"TypeAndFilter\" component={TypeAndFilter} durationInFrames={TYPE_AND_FILTER_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the type-and-filter shot card\". Read the card first: references/shots/interaction/type-and-filter.md.","needs":"Page screenshots: copy demos/_textures/* to public/textures/live/ (they are the author's demo screenshots; swap in your own page captures and a matching layout json)","takes":{"how":"edit the file","what":["colors","text","pictures"],"line":"No props. It uses no named look: about 3 color values are written in the demo. Where its fonts come from was not checked. Words are written in the demo. Pictures are files named in the demo.","read":false}},{"id":"video-shotcraft/voice-waveform-live","name":"voice-waveform-live","kind":"shot-recipe","job":"audio","line":"A recording capsule shows 64 live bars that surge with speech, shrink to a dotted line in pauses, and collapse on submit.","path":"references/shots/interaction/voice-waveform-live.md","use":"Copy demos/interaction/voice-waveform-live/VoiceWaveformLive.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"VoiceWaveformLive\" component={VoiceWaveformLive} durationInFrames={VOICE_WAVEFORM_LIVE_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the voice-waveform-live shot card\". Read the card first: references/shots/interaction/voice-waveform-live.md.","takes":{"how":"edit the file","what":["colors","logo"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.sand), but about 11 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are…","read":false}},{"id":"video-shotcraft/brand-ink-open","name":"brand-ink-open","kind":"shot-recipe","job":"logo","line":"Ink crosshairs draw in, the wordmark stamps letter by letter, a subtitle types on, then the lockup holds and lifts away.","path":"references/shots/opening/brand-ink-open.md","use":"Copy demos/typography/brand-ink-open/BrandInkOpen.tsx into a Remotion project with demos/_fixtures/Brand.tsx; fix the import paths; then <Composition id=\"BrandInkOpen\" component={BrandInkOpen} durationInFrames={BRAND_INK_OPEN_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the brand-ink-open shot card\". Read the card first: references/shots/opening/brand-ink-open.md.","takes":{"how":"edit the file","what":["colors","logo"],"line":"No props. It uses no named look: about 1 color values are written in the demo. Where its fonts come from was not checked. The logo and name on screen are the pack's own, from demos/_fixtures/Brand.tsx (one brand file every demo imports): swap it for the client's.","read":false}},{"id":"video-shotcraft/crane-rise-reveal","name":"crane-rise-reveal","kind":"shot-recipe","job":"camera","line":"The camera starts tight on one data row, rises and pulls back, then reveals a full dashboard filling the frame.","path":"references/shots/opening/crane-rise-reveal.md","use":"Copy demos/opening/crane-rise-reveal/CraneRiseReveal.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"CraneRiseReveal\" component={CraneRiseReveal} durationInFrames={CRANE_RISE_REVEAL_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the crane-rise-reveal shot card\". Read the card first: references/shots/opening/crane-rise-reveal.md.","needs":"@remotion/motion-blur (one of its files uses CameraMotionBlur)","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.porcelain), but about 4 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen…","read":false}},{"id":"video-shotcraft/dataviz-landscape-open","name":"dataviz-landscape-open","kind":"shot-recipe","job":"scene","line":"Streams of light merge across a dark data landscape while labels hover and a shallow-depth camera glides forward.","path":"references/shots/opening/dataviz-landscape-open.md","use":"Copy demos/opening/dataviz-landscape-open/DatavizLandscapeOpen.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"DatavizLandscapeOpen\" component={DatavizLandscapeOpen} durationInFrames={DATAVIZ_LANDSCAPE_OPEN_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the dataviz-landscape-open shot card\". Read the card first: references/shots/opening/dataviz-landscape-open.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.lime), but about 6 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are…","read":false}},{"id":"video-shotcraft/fracture","name":"fracture","kind":"shot-recipe","job":"scene","line":"Twenty-five 3D tiles fly in from scattered space and lock into a poster in a center-out ripple, hold for a beat, then accelerate outward off-screen in all directions.","path":"references/shots/opening/fracture.md","use":"Copy demos/opening/fracture/Fracture.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Motion.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"Fracture\" component={Fracture} durationInFrames={FRACTURE_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the fracture shot card\". Read the card first: references/shots/opening/fracture.md.","needs":"@remotion/motion-blur (one of its files uses CameraMotionBlur)","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It uses no named look: about 1 color values are written in the demo. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from demos/_fixtures/Brand.tsx (one brand file every demo imports): swap it for the…","read":false}},{"id":"video-shotcraft/icon-field-colorize","name":"icon-field-colorize","kind":"shot-recipe","job":"logo","line":"A grid of grayscale icons staggers in to fill the screen, holds a beat, then brand-color bands ripple down and light the whole field at once.","path":"references/shots/opening/icon-field-colorize.md","use":"Copy demos/opening/icon-field-colorize/IconFieldColorize.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"IconFieldColorize\" component={IconFieldColorize} durationInFrames={ICON_FIELD_COLORIZE_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the icon-field-colorize shot card\". Read the card first: references/shots/opening/icon-field-colorize.md.","takes":{"how":"edit the file","what":["colors","logo"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.ember), but about 7 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are…","read":false}},{"id":"video-shotcraft/letterspace-materialize","name":"letterspace-materialize","kind":"shot-recipe","job":"logo","line":"Every letter of a widely tracked wordmark draws itself in parallel, growing like handwriting and finishing together on the same frame.","path":"references/shots/opening/letterspace-materialize.md","use":"Copy demos/opening/letterspace-materialize/LetterspaceMaterialize.tsx into a Remotion project with demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"LetterspaceMaterialize\" component={LetterspaceMaterialize} durationInFrames={LETTERSPACE_MATERIALIZE_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the letterspace-materialize shot card\". Read the card first: references/shots/opening/letterspace-materialize.md.","takes":{"how":"edit the file","what":["colors"],"line":"No props. It uses no named look: about 16 color values are written in the demo. Where its fonts come from was not checked.","read":false}},{"id":"video-shotcraft/magician-card-flourish","name":"magician-card-flourish","kind":"shot-recipe","job":"move","line":"A blue starburst flashes on black for a third of a second, then a card shoots out of the flash, spinning along an arc toward camera before freezing near full frame.","path":"references/shots/opening/magician-card-flourish.md","use":"Copy demos/opening/magician-card-flourish/MagicianCardFlourish.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"MagicianCardFlourish\" component={MagicianCardFlourish} durationInFrames={MAGICIAN_CARD_FLOURISH_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the magician-card-flourish shot card\". Read the card first: references/shots/opening/magician-card-flourish.md.","needs":"@remotion/motion-blur (one of its files uses CameraMotionBlur)","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.midnight), but about 16 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen…","read":false}},{"id":"video-shotcraft/orbit-ring-title-open","name":"orbit-ring-title-open","kind":"shot-recipe","job":"title","line":"Eight 16:9 content cards orbit an ellipse at a constant rate with their contents frozen on the first frame, then all start playing together while the centerd headline de-blurs into place and a marker block sweeps across the key phrase.","path":"references/shots/opening/orbit-ring-title-open.md","use":"Copy demos/opening/orbit-ring-title-open/OrbitRingTitleOpen.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"OrbitRingTitleOpen\" component={OrbitRingTitleOpen} durationInFrames={ORBIT_RING_TITLE_OPEN_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the orbit-ring-title-open shot card\". Read the card first: references/shots/opening/orbit-ring-title-open.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.lime), but about 9 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are…","read":false}},{"id":"video-shotcraft/spotlight-hero-card","name":"spotlight-hero-card","kind":"shot-recipe","job":"move on a still","line":"A spotlight selects one card, the camera pushes diagonally, the card lifts for two outline passes, then returns to the page.","path":"references/shots/opening/spotlight-hero-card.md","use":"Copy demos/opening/spotlight-hero-card/SpotlightHeroCard.tsx into a Remotion project with demos/_fixtures/Look.tsx, demos/_fixtures/PageCam2D.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"SpotlightHeroCard\" component={SpotlightHeroCard} durationInFrames={SPOTLIGHT_HERO_CARD_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the spotlight-hero-card shot card\". Read the card first: references/shots/opening/spotlight-hero-card.md.","needs":"Page screenshots: copy demos/_textures/* to public/textures/live/ (they are the author's demo screenshots; swap in your own page captures and a matching layout json)","preview":{"video":"assets/asset-library/video-shotcraft-spotlight-hero-card.mp4","poster":"assets/asset-library/video-shotcraft-spotlight-hero-card-poster.jpg","w":1280,"h":720,"seconds":5.7},"takes":{"how":"edit the file","what":["colors","text","pictures"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.graphite), but about 4 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). Words are written in the…","read":false}},{"id":"video-shotcraft/stroke-segment-build","name":"stroke-segment-build","kind":"shot-recipe","job":"title","line":"Disconnected title strokes illuminate in a scrambled order and become readable only when the final segments snap into place.","path":"references/shots/opening/stroke-segment-build.md","use":"Copy demos/opening/stroke-segment-build/StrokeSegmentBuild.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"StrokeSegmentBuild\" component={StrokeSegmentBuild} durationInFrames={STROKE_SEGMENT_BUILD_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the stroke-segment-build shot card\". Read the card first: references/shots/opening/stroke-segment-build.md.","takes":{"how":"tokens","what":["colors","type","logo"],"line":"No props. Colors come from one named look in demos/_fixtures/Look.tsx (LOOKS.aurora; 8 looks of about 14 values each): change the name or add your own look. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from…","read":false}},{"id":"video-shotcraft/text-as-mask","name":"text-as-mask","kind":"shot-recipe","job":"title","line":"Product footage moves inside oversized title letters before the type expands until the footage takes over the frame.","path":"references/shots/opening/text-as-mask.md","use":"Copy demos/opening/text-as-mask/TextAsMask.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"TextAsMask\" component={TextAsMask} durationInFrames={TEXT_AS_MASK_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the text-as-mask shot card\". Read the card first: references/shots/opening/text-as-mask.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.porcelain), but about 9 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen…","read":false}},{"id":"video-shotcraft/grain-dissolve","name":"grain-dissolve","kind":"shot-recipe","job":"end card","line":"A clean line of text boils into displaced grain noise inside a hatched selection frame, then the particle cloud condenses into a larger glowing wordmark that locks sharp.","path":"references/shots/outro/grain-dissolve.md","use":"Copy demos/outro/grain-dissolve/GrainDissolve.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Motion.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"GrainDissolve\" component={GrainDissolve} durationInFrames={GRAIN_DISSOLVE_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the grain-dissolve shot card\". Read the card first: references/shots/outro/grain-dissolve.md.","takes":{"how":"edit the file","what":["colors","logo"],"line":"No props. It uses no named look: about 11 color values are written in the demo. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from demos/_fixtures/Brand.tsx (one brand file every demo imports): swap it for the…","read":false}},{"id":"video-shotcraft/logo-shrink-wordmark-lockup","name":"logo-shrink-wordmark-lockup","kind":"shot-recipe","job":"logo","line":"A neon slit ring shrinks fast into a solid white O with an overshoot brake, slides left to make room, letters stagger in one by one, and an accent slogan fades in below.","path":"references/shots/outro/logo-shrink-wordmark-lockup.md","use":"Copy demos/outro/logo-shrink-wordmark-lockup/LogoShrinkWordmarkLockup.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Motion.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"LogoShrinkWordmarkLockup\" component={LogoShrinkWordmarkLockup} durationInFrames={LOGO_SHRINK_WORDMARK_LOCKUP_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the logo-shrink-wordmark-lockup shot card\". Read the card first: references/shots/outro/logo-shrink-wordmark-lockup.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It uses no named look: about 7 color values are written in the demo. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from demos/_fixtures/Brand.tsx (one brand file every demo imports): swap it for the…","read":false}},{"id":"video-shotcraft/neon-triple-marquee","name":"neon-triple-marquee","kind":"shot-recipe","job":"end card","line":"Three rows of outlined neon giants scroll in opposite directions across the full screen, lighting up in turn on a one-third phase offset.","path":"references/shots/outro/neon-triple-marquee.md","use":"Copy demos/outro/neon-triple-marquee/NeonTripleMarquee.tsx into a Remotion project with demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"NeonTripleMarquee\" component={NeonTripleMarquee} durationInFrames={NEON_TRIPLE_MARQUEE_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the neon-triple-marquee shot card\". Read the card first: references/shots/outro/neon-triple-marquee.md.","takes":{"how":"edit the file","what":["colors","text"],"line":"No props. It uses no named look: about 11 color values are written in the demo. Where its fonts come from was not checked. Words are written in the demo.","read":false}},{"id":"video-shotcraft/outro-group-photo-launch","name":"outro-group-photo-launch","kind":"shot-recipe","job":"end card","line":"Elements from the film assemble around the wordmark as a crane settle, stage light, and gold dust create a launch-event finale.","path":"references/shots/outro/outro-group-photo-launch.md","use":"Copy demos/outro/outro-group-photo-launch/OutroGroupPhotoLaunch.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/PageCam2D.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"OutroGroupPhotoLaunch\" component={OutroGroupPhotoLaunch} durationInFrames={OUTRO_GROUP_PHOTO_LAUNCH_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the outro-group-photo-launch shot card\". Read the card first: references/shots/outro/outro-group-photo-launch.md.","needs":"Page screenshots: copy demos/_textures/* to public/textures/live/ (they are the author's demo screenshots; swap in your own page captures and a matching layout json)","takes":{"how":"edit the file","what":["colors","logo","pictures"],"line":"No props. It uses no named look: about 1 color values are written in the demo. Where its fonts come from was not checked. The logo and name on screen are the pack's own, from demos/_fixtures/Brand.tsx (one brand file every demo imports): swap it for the client's. Pictures are files named in the…","read":false}},{"id":"video-shotcraft/ui-strip-away-outro","name":"ui-strip-away-outro","kind":"shot-recipe","job":"end card","line":"After Publish is clicked the editor UI evaporates layer by layer from the edges inward, leaving one button to slide center, grow, and hand off to the wordmark.","path":"references/shots/outro/ui-strip-away-outro.md","use":"Copy demos/outro/ui-strip-away-outro/UiStripAwayOutro.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Fixtures.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"UiStripAwayOutro\" component={UiStripAwayOutro} durationInFrames={UI_STRIP_AWAY_OUTRO_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the ui-strip-away-outro shot card\". Read the card first: references/shots/outro/ui-strip-away-outro.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It uses no named look: about 16 color values are written in the demo. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from demos/_fixtures/Brand.tsx (one brand file every demo imports): swap it for the…","read":false}},{"id":"video-shotcraft/ui-to-brand-morph","name":"ui-to-brand-morph","kind":"shot-recipe","job":"logo","line":"2 named moves on one card: icon-flip-bloom (The icon rocks twice, flips flat to a sliver with double ghosting, swaps identity at the thinnest frame, and unfolds into the video-shotcraft Frame Chisel mark — the amber cut slicing in on a second beat — as the wordmark lands); input-morph-assemble (Send is clicked, the text flies off, the input box spring-morphs into a capsule that becomes the frame stem of the mark; the top and bottom bars and the amber cut drop into dashed construction outlines to assemble the video-shotcraft mark).","path":"references/shots/outro/ui-to-brand-morph.md","use":"Copy demos/outro/ui-to-brand-morph/IconFlipBloomLogo.tsx (and its 1 sibling file(s) in the same folder) into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Fixtures.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"IconFlipBloomLogo\" component={IconFlipBloomLogo} durationInFrames={ICON_FLIP_BLOOM_LOGO_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the ui-to-brand-morph shot card\". Read the card first: references/shots/outro/ui-to-brand-morph.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props (2 demo files). It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.porcelain), but about 12 more color values are written in the demo, so changing the look alone will not re-skin it. Where its fonts come from was not checked. The logo and name on screen are the pack's own,…","read":false}},{"id":"video-shotcraft/beat-cut-moves","name":"beat-cut-moves","kind":"shot-recipe","job":"number","line":"A three-flash freeze montage: white flashes hard-cut through different crops of the same subject and settle on the key number.","path":"references/shots/rhythm/beat-cut-moves.md","use":"Copy demos/rhythm/beat-cut-moves/PaparazziFlash.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"PaparazziFlash\" component={PaparazziFlash} durationInFrames={PAPARAZZI_FLASH_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the beat-cut-moves shot card\". Read the card first: references/shots/rhythm/beat-cut-moves.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.graphite), but about 8 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen…","read":false}},{"id":"video-shotcraft/beat-step-list-theme-cycle","name":"beat-step-list-theme-cycle","kind":"shot-recipe","job":"edit","line":"An adjective list steps up one row per beat while a fixed center pill catches each word and the background recolors on the same beat.","path":"references/shots/rhythm/beat-step-list-theme-cycle.md","use":"Copy demos/rhythm/beat-step-list-theme-cycle/BeatStepListThemeCycle.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"BeatStepListThemeCycle\" component={BeatStepListThemeCycle} durationInFrames={BEAT_STEP_LIST_THEME_CYCLE_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the beat-step-list-theme-cycle shot card\". Read the card first: references/shots/rhythm/beat-step-list-theme-cycle.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It uses no named look: about 16 color values are written in the demo. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from demos/_fixtures/Brand.tsx (one brand file every demo imports): swap it for the…","read":false}},{"id":"video-shotcraft/panel-grid-moves","name":"panel-grid-moves","kind":"shot-recipe","job":"layout","line":"An angled comic-panel split that cuts one moment into three framings before resolving to a poster.","path":"references/shots/rhythm/panel-grid-moves.md","use":"Copy demos/rhythm/panel-grid-moves/ComicPanelSplit.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"ComicPanelSplit\" component={ComicPanelSplit} durationInFrames={COMIC_PANEL_SPLIT_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the panel-grid-moves shot card\". Read the card first: references/shots/rhythm/panel-grid-moves.md.","takes":{"how":"edit the file","what":["colors","logo"],"line":"No props. It uses no named look: about 27 color values are written in the demo. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from demos/_fixtures/Brand.tsx (one brand file every demo imports): swap it for the…","read":false}},{"id":"video-shotcraft/quad-split-parallel-scenes","name":"quad-split-parallel-scenes","kind":"shot-recipe","job":"layout","line":"The frame hard-cuts into a 2×2 grid where four micro-scenes run in parallel — typing, a whip zoom, word pops, and a cursor interaction chain — with every beat offset by a few frames.","path":"references/shots/rhythm/quad-split-parallel-scenes.md","use":"Copy demos/rhythm/quad-split-parallel-scenes/QuadSplitParallelScenes.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"QuadSplitParallelScenes\" component={QuadSplitParallelScenes} durationInFrames={QUAD_SPLIT_PARALLEL_SCENES_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the quad-split-parallel-scenes shot card\". Read the card first: references/shots/rhythm/quad-split-parallel-scenes.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.ember), but about 27 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen…","read":false}},{"id":"video-shotcraft/rhythm-interrupt-moves","name":"rhythm-interrupt-moves","kind":"shot-recipe","job":"edit","line":"Stepped punch-in jump cuts that break cadence on the same frame.","path":"references/shots/rhythm/rhythm-interrupt-moves.md","use":"Copy demos/rhythm/rhythm-interrupt-moves/JumpCutPunchIn.tsx into a Remotion project with demos/_fixtures/Fixtures.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"JumpCutPunchIn\" component={JumpCutPunchIn} durationInFrames={JUMP_CUT_PUNCH_IN_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the rhythm-interrupt-moves shot card\". Read the card first: references/shots/rhythm/rhythm-interrupt-moves.md.","takes":{"how":"edit the file","what":["colors","text"],"line":"No props. It uses no named look: about 1 color values are written in the demo. Where its fonts come from was not checked. Words are written in the demo.","read":false}},{"id":"video-shotcraft/sakuga-timing-shift","name":"sakuga-timing-shift","kind":"shot-recipe","job":"edit","line":"Movement begins in stepped, held drawings and suddenly switches to frame-by-frame acceleration at the climax.","path":"references/shots/rhythm/sakuga-timing-shift.md","use":"Copy demos/rhythm/sakuga-timing-shift/SakugaTimingShift.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"SakugaTimingShift\" component={SakugaTimingShift} durationInFrames={SAKUGA_TIMING_SHIFT_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the sakuga-timing-shift shot card\". Read the card first: references/shots/rhythm/sakuga-timing-shift.md.","takes":{"how":"tokens","what":["colors","logo"],"line":"No props. Colors come from one named look in demos/_fixtures/Look.tsx (LOOKS.paper; 8 looks of about 14 values each): change the name or add your own look. Where its fonts come from was not checked. The logo and name on screen are the pack's own, from demos/_fixtures/Brand.tsx (one brand file…","read":false}},{"id":"video-shotcraft/speed-ramp-freeze","name":"speed-ramp-freeze","kind":"shot-recipe","job":"callout","line":"A freeze used for on-screen annotation before motion resumes.","path":"references/shots/rhythm/speed-ramp-freeze.md","use":"Copy demos/rhythm/speed-ramp-freeze/FreezeAnnotateReal.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"FreezeAnnotateReal\" component={FreezeAnnotateReal} durationInFrames={FREEZEANNOTATE_DUR} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the speed-ramp-freeze shot card\". Read the card first: references/shots/rhythm/speed-ramp-freeze.md.","needs":"Page screenshots: copy demos/_textures/* to public/textures/live/ (they are the author's demo screenshots; swap in your own page captures and a matching layout json)","takes":{"how":"tokens","what":["colors","type","logo"],"line":"No props. Colors come from one named look in demos/_fixtures/Look.tsx (LOOKS.porcelain; 8 looks of about 14 values each): change the name or add your own look. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from…","read":false}},{"id":"video-shotcraft/trailer-grammar-moves","name":"trailer-grammar-moves","kind":"shot-recipe","job":"edit","line":"A trailer bumper hook: three 9-frame rapid cuts, a beat of black silence, then the opening title card.","path":"references/shots/rhythm/trailer-grammar-moves.md","use":"Copy demos/rhythm/trailer-grammar-moves/TrailerBumper.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Fixtures.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"TrailerBumper\" component={TrailerBumper} durationInFrames={TRAILER_BUMPER_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the trailer-grammar-moves shot card\". Read the card first: references/shots/rhythm/trailer-grammar-moves.md.","takes":{"how":"edit the file","what":["colors","logo"],"line":"No props. It uses no named look: about 1 color values are written in the demo. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from demos/_fixtures/Brand.tsx (one brand file every demo imports): swap it for the…","read":false}},{"id":"video-shotcraft/bottom-push-stack-wipe","name":"bottom-push-stack-wipe","kind":"shot-recipe","job":"transition","line":"Each new scene pushes up from the bottom edge with its own saturated background color, physically shoving the old scene out of frame.","path":"references/shots/transition/bottom-push-stack-wipe.md","use":"Copy demos/transition/bottom-push-stack-wipe/BottomPushStackWipe.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"BottomPushStackWipe\" component={BottomPushStackWipe} durationInFrames={BOTTOM_PUSH_STACK_WIPE_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the bottom-push-stack-wipe shot card\". Read the card first: references/shots/transition/bottom-push-stack-wipe.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It uses no named look: about 36 color values are written in the demo. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from demos/_fixtures/Brand.tsx (one brand file every demo imports): swap it for the…","read":false}},{"id":"video-shotcraft/card-flip-reveal","name":"card-flip-reveal","kind":"shot-recipe","job":"transition","line":"Feature cards rotate 180 degrees around the Y axis, flash at the edge, and reveal a large result on the back.","path":"references/shots/transition/card-flip-reveal.md","use":"Copy demos/transition/card-flip-reveal/CardFlipReveal.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"CardFlipReveal\" component={CardFlipReveal} durationInFrames={CARD_FLIP_REVEAL_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the card-flip-reveal shot card\". Read the card first: references/shots/transition/card-flip-reveal.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.graphite), but about 13 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen…","read":false}},{"id":"video-shotcraft/card-flock-tumble","name":"card-flock-tumble","kind":"shot-recipe","job":"transition","line":"Three UI cards tumble in 3D from edge-on to a stepped formation, keep slowly rotating, then collapse inward and burst into a smoke ring under a giant word.","path":"references/shots/transition/card-flock-tumble.md","use":"Copy demos/transition/card-flock-tumble/CardFlockTumble.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"CardFlockTumble\" component={CardFlockTumble} durationInFrames={CARD_FLOCK_TUMBLE_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the card-flock-tumble shot card\". Read the card first: references/shots/transition/card-flock-tumble.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.aurora), but about 20 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen…","read":false}},{"id":"video-shotcraft/circle-match-iris","name":"circle-match-iris","kind":"shot-recipe","job":"transition","line":"An iris expands from a circular UI element and lands on a matching circle in the next scene.","path":"references/shots/transition/circle-match-iris.md","use":"Copy demos/transition/circle-match-iris/CircleMatchIris.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"CircleMatchIris\" component={CircleMatchIris} durationInFrames={CIRCLE_MATCH_IRIS_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the circle-match-iris shot card\". Read the card first: references/shots/transition/circle-match-iris.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.lime), but about 12 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are…","read":false}},{"id":"video-shotcraft/gradient-transition","name":"gradient-transition","kind":"shot-recipe","job":"transition","line":"The background morphs smoothly through linear, radial, and conic CSS gradients — angle, color stops, center, and radius each interpolated per-parameter with narrow cross-fades between types.","path":"references/shots/transition/gradient-transition.md","use":"Copy demos/transition/gradient-transition/GradientTransition.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"GradientTransition\" component={GradientTransition} durationInFrames={GRADIENT_TRANSITION_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the gradient-transition shot card\". Read the card first: references/shots/transition/gradient-transition.md.","takes":{"how":"tokens","what":["colors","type","logo"],"line":"No props. Colors come from one named look in demos/_fixtures/Look.tsx (LOOKS.aurora; 8 looks of about 14 values each): change the name or add your own look. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from…","read":false}},{"id":"video-shotcraft/line-carry-transition","name":"line-carry-transition","kind":"shot-recipe","job":"transition","line":"A progress line exits scene A, guides the camera sideways, then turns corners to become the frame of scene B.","path":"references/shots/transition/line-carry-transition.md","use":"Copy demos/transition/line-carry-transition/LineCarryTransition.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"LineCarryTransition\" component={LineCarryTransition} durationInFrames={LINE_CARRY_TRANSITION_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the line-carry-transition shot card\". Read the card first: references/shots/transition/line-carry-transition.md.","takes":{"how":"tokens","what":["colors","type","logo"],"line":"No props. Colors come from one named look in demos/_fixtures/Look.tsx (LOOKS.sand; 8 looks of about 14 values each): change the name or add your own look. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from…","read":false}},{"id":"video-shotcraft/mosaic-reframe","name":"mosaic-reframe","kind":"shot-recipe","job":"transition","line":"Twelve tiles morph continuously between a regular grid, a feature mosaic with one hero slot, and a rotated diagonal cascade, each tile interpolating position and size independently with a slight stagger.","path":"references/shots/transition/mosaic-reframe.md","use":"Copy demos/transition/mosaic-reframe/MosaicReframe.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"MosaicReframe\" component={MosaicReframe} durationInFrames={MOSAIC_REFRAME_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the mosaic-reframe shot card\". Read the card first: references/shots/transition/mosaic-reframe.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.sand), but about 73 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are…","read":false}},{"id":"video-shotcraft/page-turn-transitions","name":"page-turn-transitions","kind":"shot-recipe","job":"transition","line":"A full-page transition where the old page splits open like double doors to reveal the new one.","path":"references/shots/transition/page-turn-transitions.md","use":"Copy demos/transition/page-turn-transitions/BarnDoorSplit.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"BarnDoorSplit\" component={BarnDoorSplit} durationInFrames={BARN_DOOR_SPLIT_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the page-turn-transitions shot card\". Read the card first: references/shots/transition/page-turn-transitions.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.ember), but about 11 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen…","read":false}},{"id":"video-shotcraft/print-texture-transitions","name":"print-texture-transitions","kind":"shot-recipe","job":"transition","line":"A print-based reveal: ink bleeding outward from a drop point to consume the old scene.","path":"references/shots/transition/print-texture-transitions.md","use":"Copy demos/transition/print-texture-transitions/InkBleedReveal.tsx into a Remotion project with demos/_fixtures/Fixtures.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"InkBleedReveal\" component={InkBleedReveal} durationInFrames={INK_BLEED_REVEAL_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the print-texture-transitions shot card\". Read the card first: references/shots/transition/print-texture-transitions.md.","takes":{"how":"edit the file","what":["colors","text"],"line":"No props. It uses no named look: about 9 color values are written in the demo. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). Words are written in the demo.","read":false}},{"id":"video-shotcraft/shot-transitions","name":"shot-transitions","kind":"shot-recipe","job":"transition","line":"3 named moves on one card: flash-cut (The camera pushes in and a white flash straddles the cut, hiding the page swap inside the flare); whip-pan (The camera whips sideways so hard the middle frames smear illegible, and the new scene is waiting when it stops); mask-wipe (A real element in the page — a card — scales up into a full-screen window, and the next scene grows out from inside it).","path":"references/shots/transition/shot-transitions.md","use":"Copy demos/transition/shot-transitions/PortalWipeV2.tsx (and its 1 sibling file(s) in the same folder) into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"PortalWipeV2\" component={PortalWipeV2} durationInFrames={PORTAL_WIPE_V2_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the shot-transitions shot card\". Read the card first: references/shots/transition/shot-transitions.md.","needs":"Page screenshots: copy demos/_textures/* to public/textures/live/ (they are the author's demo screenshots; swap in your own page captures and a matching layout json)","takes":{"how":"edit the file","what":["colors","logo","text","pictures"],"line":"No props (2 demo files). It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.paper, LOOKS.porcelain), but about 22 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in…","read":false}},{"id":"video-shotcraft/tear-streak-transitions","name":"tear-streak-transitions","kind":"shot-recipe","job":"transition","line":"A high-energy tear: horizontal glitch strips whose displacement hides the hard cut.","path":"references/shots/transition/tear-streak-transitions.md","use":"Copy demos/transition/tear-streak-transitions/GlitchDisplace.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"GlitchDisplace\" component={GlitchDisplace} durationInFrames={GLITCH_DISPLACE_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the tear-streak-transitions shot card\". Read the card first: references/shots/transition/tear-streak-transitions.md.","takes":{"how":"tokens","what":["colors","type","logo"],"line":"No props. Colors come from one named look in demos/_fixtures/Look.tsx (LOOKS.midnight; 8 looks of about 14 values each): change the name or add your own look. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from…","read":false}},{"id":"video-shotcraft/transition-hidden-cut","name":"transition-hidden-cut","kind":"shot-recipe","job":"transition","line":"3 named moves on one card: invisible-cut (An oversized card sweeps past the lens with heavy motion blur, and the background swaps scenes inside the fully-covered frames); versus-slam (Two half-screens with slanted edges charge from opposite sides and collide; the impact frame is the cut — white flash, shake, VS stamp); light-leak-burn (Three amber light blooms sweep the diagonal, and at peak coverage the old page hard-cuts away beneath the flare).","path":"references/shots/transition/transition-hidden-cut.md","use":"Copy demos/transition/transition-hidden-cut/InvisibleCut.tsx (and its 2 sibling file(s) in the same folder) into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"InvisibleCut\" component={InvisibleCut} durationInFrames={INVISIBLE_CUT_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the transition-hidden-cut shot card\". Read the card first: references/shots/transition/transition-hidden-cut.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props (3 demo files). It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.ember, LOOKS.paper, LOOKS.sand), but about 26 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in…","read":true}},{"id":"video-shotcraft/transition-travel","name":"transition-travel","kind":"shot-recipe","job":"transition","line":"A passage transition that pushes through the counter of a giant letterform into the next scene.","path":"references/shots/transition/transition-travel.md","use":"Copy demos/transition/transition-travel/LetterformZoom.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"LetterformZoom\" component={LetterformZoom} durationInFrames={LETTERFORM_ZOOM_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the transition-travel shot card\". Read the card first: references/shots/transition/transition-travel.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.ember), but about 12 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen…","read":false}},{"id":"video-shotcraft/white-flash-logo-simplify-cut","name":"white-flash-logo-simplify-cut","kind":"shot-recipe","job":"transition","line":"A liquid six-color gradient wordmark shimmers in place, the frame flash-burns to white with a blur-and-brightness pulse, and a flat gradient wordmark fades in and settles on the white.","path":"references/shots/transition/white-flash-logo-simplify-cut.md","use":"Copy demos/transition/white-flash-logo-simplify-cut/WhiteFlashLogoSimplifyCut.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"WhiteFlashLogoSimplifyCut\" component={WhiteFlashLogoSimplifyCut} durationInFrames={WHITE_FLASH_LOGO_SIMPLIFY_CUT_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the white-flash-logo-simplify-cut shot card\". Read the card first: references/shots/transition/white-flash-logo-simplify-cut.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.aurora), but about 13 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen…","read":false}},{"id":"video-shotcraft/wipe-transitions","name":"wipe-transitions","kind":"shot-recipe","job":"transition","line":"A geometric wipe: twelve staggered vertical blinds flipping in a wave.","path":"references/shots/transition/wipe-transitions.md","use":"Copy demos/transition/wipe-transitions/BlindsSlice.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"BlindsSlice\" component={BlindsSlice} durationInFrames={BLINDS_SLICE_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the wipe-transitions shot card\". Read the card first: references/shots/transition/wipe-transitions.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.paper), but about 5 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are…","read":true}},{"id":"video-shotcraft/blur-slide","name":"blur-slide","kind":"shot-recipe","job":"title","line":"Title words rise into place one after another as vertical offset, blur, and opacity converge on a single shared ease, with the subtitle following before the title settles.","path":"references/shots/typography/blur-slide.md","use":"Copy demos/typography/blur-slide/BlurSlide.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"BlurSlide\" component={BlurSlide} durationInFrames={BLUR_SLIDE_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the blur-slide shot card\". Read the card first: references/shots/typography/blur-slide.md.","takes":{"how":"tokens","what":["colors","type","logo"],"line":"No props. Colors come from one named look in demos/_fixtures/Look.tsx (LOOKS.paper; 8 looks of about 14 values each): change the name or add your own look. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from…","read":false}},{"id":"video-shotcraft/brace-expand","name":"brace-expand","kind":"shot-recipe","job":"title","line":"A tight pair of braces appears at center, then springs apart and scales up to title size, revealing the text through a clip width bound strictly to the brace gap.","path":"references/shots/typography/brace-expand.md","use":"Copy demos/typography/brace-expand/BraceExpand.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"BraceExpand\" component={BraceExpand} durationInFrames={BRACE_EXPAND_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the brace-expand shot card\". Read the card first: references/shots/typography/brace-expand.md.","takes":{"how":"tokens","what":["colors","type","logo"],"line":"No props. Colors come from one named look in demos/_fixtures/Look.tsx (LOOKS.midnight; 8 looks of about 14 values each): change the name or add your own look. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from…","read":false}},{"id":"video-shotcraft/countdown-arc-scatter","name":"countdown-arc-scatter","kind":"shot-recipe","job":"number","line":"Numbers arranged tangentially along a large arc sweep past and brake to a stop, the winning digit sliding out of the dial to become the first character of the headline.","path":"references/shots/typography/countdown-arc-scatter.md","use":"Copy demos/typography/countdown-arc-scatter/CountdownArcScatter.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"CountdownArcScatter\" component={CountdownArcScatter} durationInFrames={COUNTDOWN_ARC_SCATTER_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the countdown-arc-scatter shot card\". Read the card first: references/shots/typography/countdown-arc-scatter.md.","takes":{"how":"tokens","what":["colors","type","logo"],"line":"No props. Colors come from one named look in demos/_fixtures/Look.tsx (LOOKS.paper; 8 looks of about 14 values each): change the name or add your own look. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from…","read":false}},{"id":"video-shotcraft/document-typewriter-reveal","name":"document-typewriter-reveal","kind":"shot-recipe","job":"move on a still","line":"A fully typeset document writes itself behind one accent-color caret, opens both side columns, and drops history entries into the rail.","path":"references/shots/typography/document-typewriter-reveal.md","use":"Copy demos/ui-entrance/document-typewriter-reveal/DocumentTypewriterReveal.tsx into a Remotion project with demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"DocumentTypewriterReveal\" component={DocumentTypewriterReveal} durationInFrames={DOCUMENT_TYPEWRITER_REVEAL_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the document-typewriter-reveal shot card\". Read the card first: references/shots/typography/document-typewriter-reveal.md.","needs":"Page screenshots: copy demos/_textures/* to public/textures/live/ (they are the author's demo screenshots; swap in your own page captures and a matching layout json)","takes":{"how":"edit the file","what":["colors","text","pictures"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.aurora), but about 5 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). Words are written in the demo.…","read":false}},{"id":"video-shotcraft/flying-words","name":"flying-words","kind":"shot-recipe","job":"title","line":"Keywords spawn deep in a perspective tunnel and rush past the camera along the z axis, fading in and out on a lifecycle curve across two seamless loops.","path":"references/shots/typography/flying-words.md","use":"Copy demos/typography/flying-words/FlyingWords.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"FlyingWords\" component={FlyingWords} durationInFrames={FLYING_WORDS_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the flying-words shot card\". Read the card first: references/shots/typography/flying-words.md.","takes":{"how":"edit the file","what":["colors","logo"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.midnight), but about 6 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen…","read":false}},{"id":"video-shotcraft/glitch-cycle","name":"glitch-cycle","kind":"shot-recipe","job":"title","line":"Status phrases cycle through one monospace slot, each dissolving into noise at both ends with RGB split and jitter, while a progress bar tracks the whole run.","path":"references/shots/typography/glitch-cycle.md","use":"Copy demos/typography/glitch-cycle/GlitchCycle.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"GlitchCycle\" component={GlitchCycle} durationInFrames={GLITCH_CYCLE_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the glitch-cycle shot card\". Read the card first: references/shots/typography/glitch-cycle.md.","takes":{"how":"tokens","what":["colors","type","logo"],"line":"No props. Colors come from one named look in demos/_fixtures/Look.tsx (LOOKS.aurora; 8 looks of about 14 values each): change the name or add your own look. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from…","read":false}},{"id":"video-shotcraft/gradient-word-sweep","name":"gradient-word-sweep","kind":"shot-recipe","job":"title","line":"A gradient light sweeps left to right across a keyword, charging each character with glow that decays behind the wavefront until the whole word breathes.","path":"references/shots/typography/gradient-word-sweep.md","use":"Copy demos/typography/gradient-word-sweep/GradientWordSweep.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"GradientWordSweep\" component={GradientWordSweep} durationInFrames={GRADIENT_WORD_SWEEP_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the gradient-word-sweep shot card\". Read the card first: references/shots/typography/gradient-word-sweep.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It uses no named look: about 8 color values are written in the demo. Where its fonts come from was not checked. The logo and name on screen are the pack's own, from demos/_fixtures/Brand.tsx (one brand file every demo imports): swap it for the client's. Words are written in the demo.","read":false}},{"id":"video-shotcraft/lead-word-zoom-assemble","name":"lead-word-zoom-assemble","kind":"shot-recipe","job":"title","line":"The lead word fills the frame at 2.3x and keeps drifting toward the viewer, then a single curve recedes it to size while the line slides left and the trailing words are pushed into their slots — pivoting on the lead word center and the measured baseline.","path":"references/shots/typography/lead-word-zoom-assemble.md","use":"Copy demos/typography/lead-word-zoom-assemble/LeadWordZoomAssemble.tsx into a Remotion project with demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"LeadWordZoomAssemble\" component={LeadWordZoomAssemble} durationInFrames={LEAD_WORD_ZOOM_ASSEMBLE_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the lead-word-zoom-assemble shot card\". Read the card first: references/shots/typography/lead-word-zoom-assemble.md.","takes":{"how":"edit the file","what":["colors"],"line":"No props. It uses no named look: about 6 color values are written in the demo. Where its fonts come from was not checked.","read":false}},{"id":"video-shotcraft/marker-underline-title","name":"marker-underline-title","kind":"shot-recipe","job":"callout","line":"After the headline settles, a marker stroke draws itself under the keyword — tapered, rough-edged, and slightly tilted to follow the italic.","path":"references/shots/typography/marker-underline-title.md","use":"Copy demos/typography/marker-underline-title/MarkerUnderlineTitle.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"MarkerUnderlineTitle\" component={MarkerUnderlineTitle} durationInFrames={MARKER_UNDERLINE_TITLE_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the marker-underline-title shot card\". Read the card first: references/shots/typography/marker-underline-title.md.","preview":{"video":"assets/asset-library/video-shotcraft-marker-underline-title-rebuilt-wide.mp4","poster":"assets/asset-library/video-shotcraft-marker-underline-title-rebuilt-wide-poster.jpg","w":1280,"h":720,"seconds":2.5},"takes":{"how":"edit the file","what":["colors","logo"],"line":"No props. It uses no named look: about 2 color values are written in the demo. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from demos/_fixtures/Brand.tsx (one brand file every demo imports): swap it for the…","read":false}},{"id":"video-shotcraft/outline-word-fill","name":"outline-word-fill","kind":"shot-recipe","job":"title","line":"An outlined word snaps down from triple size while a dashed circle and horizontal guides close in, then the stroke flips to solid white in a single frame with one brief glow.","path":"references/shots/typography/outline-word-fill.md","use":"Copy demos/typography/outline-word-fill/OutlineWordFill.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"OutlineWordFill\" component={OutlineWordFill} durationInFrames={OUTLINE_WORD_FILL_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the outline-word-fill shot card\". Read the card first: references/shots/typography/outline-word-fill.md.","takes":{"how":"tokens","what":["colors","type","logo"],"line":"No props. Colors come from one named look in demos/_fixtures/Look.tsx (LOOKS.ember; 8 looks of about 14 values each): change the name or add your own look. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from…","read":false}},{"id":"video-shotcraft/paper-title-card","name":"paper-title-card","kind":"shot-recipe","job":"quote","line":"A sentence stamps onto paper word by word, highlights one amber italic term, and closes with a short rule.","path":"references/shots/typography/paper-title-card.md","use":"Copy demos/typography/paper-title-card/PaperTitleCard.tsx into a Remotion project with no shared files; fix the import paths; then <Composition id=\"PaperTitleCard\" component={PaperTitleCard} durationInFrames={PAPER_TITLE_CARD_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the paper-title-card shot card\". Read the card first: references/shots/typography/paper-title-card.md.","preview":{"video":"assets/asset-library/video-shotcraft-paper-title-card.mp4","poster":"assets/asset-library/video-shotcraft-paper-title-card-poster.jpg","w":1280,"h":720,"seconds":1.8},"takes":{"how":"edit the file","what":[],"line":"No props. It uses no named look and almost no color values of its own. Where its fonts come from was not checked.","read":false}},{"id":"video-shotcraft/pill-chip-slot-cycle-handled","name":"pill-chip-slot-cycle-handled","kind":"shot-recipe","job":"title","line":"A dark chip inside the sentence rolls through feature words, its width easing to each word so the surrounding text is pushed apart while gray ghost items show above and below.","path":"references/shots/typography/pill-chip-slot-cycle-handled.md","use":"Copy demos/typography/pill-chip-slot-cycle-handled/PillChipSlotCycleHandled.tsx into a Remotion project with demos/_fixtures/Motion.tsx; fix the import paths; then <Composition id=\"PillChipSlotCycleHandled\" component={PillChipSlotCycleHandled} durationInFrames={PILL_CHIP_SLOT_CYCLE_HANDLED_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the pill-chip-slot-cycle-handled shot card\". Read the card first: references/shots/typography/pill-chip-slot-cycle-handled.md.","takes":{"how":"edit the file","what":["colors","text"],"line":"No props. It uses no named look: about 3 color values are written in the demo. Where its fonts come from was not checked. Words are written in the demo.","read":false}},{"id":"video-shotcraft/pill-slot-cycle","name":"pill-slot-cycle","kind":"shot-recipe","job":"title","line":"A fixed sentence keeps its trailing pill slot spinning like a slot machine through feature words until the final word locks the sentence.","path":"references/shots/typography/pill-slot-cycle.md","use":"Copy demos/typography/pill-slot-cycle/PillSlotCycle.tsx into a Remotion project with demos/_fixtures/Fixtures.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"PillSlotCycle\" component={PillSlotCycle} durationInFrames={PILL_SLOT_CYCLE_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the pill-slot-cycle shot card\". Read the card first: references/shots/typography/pill-slot-cycle.md.","takes":{"how":"edit the file","what":["colors","text"],"line":"No props. It uses no named look: about 2 color values are written in the demo. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). Words are written in the demo.","read":false}},{"id":"video-shotcraft/text-column-converge","name":"text-column-converge","kind":"shot-recipe","job":"title","line":"Two words pinned at opposite screen edges hard-swap through options, then slide together exactly once to lock into the final phrase.","path":"references/shots/typography/text-column-converge.md","use":"Copy demos/typography/text-column-converge/TextColumnConverge.tsx into a Remotion project with demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"TextColumnConverge\" component={TextColumnConverge} durationInFrames={TEXT_COLUMN_CONVERGE_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the text-column-converge shot card\". Read the card first: references/shots/typography/text-column-converge.md.","takes":{"how":"edit the file","what":["colors"],"line":"No props. It uses no named look: about 6 color values are written in the demo. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx).","read":false}},{"id":"video-shotcraft/title-demote-to-label","name":"title-demote-to-label","kind":"shot-recipe","job":"layout","line":"A centered headline stands for a beat, then shrinks and slides to the top-left corner to become a section label as content grows beneath it.","path":"references/shots/typography/title-demote-to-label.md","use":"Copy demos/typography/title-demote-to-label/TitleDemoteToLabel.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"TitleDemoteToLabel\" component={TitleDemoteToLabel} durationInFrames={TITLE_DEMOTE_TO_LABEL_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the title-demote-to-label shot card\". Read the card first: references/shots/typography/title-demote-to-label.md.","takes":{"how":"tokens","what":["colors","logo"],"line":"No props. Colors come from one named look in demos/_fixtures/Look.tsx (LOOKS.paper; 8 looks of about 14 values each): change the name or add your own look. Where its fonts come from was not checked. The logo and name on screen are the pack's own, from demos/_fixtures/Brand.tsx (one brand file…","read":false}},{"id":"video-shotcraft/type-assembly-moves","name":"type-assembly-moves","kind":"shot-recipe","job":"title","line":"3 named moves on one card: split-text-stagger (Each character rises inside its own overflow box from 115% with a 10% overshoot, two frames apart, as the baseline grows beneath); drift-assembly (Characters drift in from seeded directions with blur, locking into place one by one, each lock landing a darkening pulse); text-on-path (Characters slide in single-file along a bezier curve, rotating with the tangent, then straighten level over 12 frames).","path":"references/shots/typography/type-assembly-moves.md","use":"Copy demos/typography/type-assembly-moves/LetterformDriftAssembly.tsx (and its 2 sibling file(s) in the same folder) into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Fixtures.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"LetterformDriftAssembly\" component={LetterformDriftAssembly} durationInFrames={LETTERFORM_DRIFT_ASSEMBLY_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the type-assembly-moves shot card\". Read the card first: references/shots/typography/type-assembly-moves.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props (3 demo files). It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.midnight), but about 2 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and…","read":false}},{"id":"video-shotcraft/type-entrance-moves","name":"type-entrance-moves","kind":"shot-recipe","job":"title","line":"Letters falling under gravity and bouncing into alignment as a title entrance.","path":"references/shots/typography/type-entrance-moves.md","use":"Copy demos/typography/type-entrance-moves/LetterDropPhysics.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Fixtures.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"LetterDropPhysics\" component={LetterDropPhysics} durationInFrames={LETTER_DROP_PHYSICS_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the type-entrance-moves shot card\". Read the card first: references/shots/typography/type-entrance-moves.md.","takes":{"how":"edit the file","what":["logo"],"line":"No props. It uses no named look and almost no color values of its own. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from demos/_fixtures/Brand.tsx (one brand file every demo imports): swap it for the client's.","read":false}},{"id":"video-shotcraft/type-rhythm-sync","name":"type-rhythm-sync","kind":"shot-recipe","job":"caption","line":"2 named moves on one card: font-weight-pump (On each hit the strokes jump bold and spring back thin over 10 frames; accent beats also widen the word 8%); karaoke-fill-sync (Each word fills dark-to-bright left to right at speech speed and stays lit, a reading underline tracking the active word).","path":"references/shots/typography/type-rhythm-sync.md","use":"Copy demos/typography/type-rhythm-sync/FontWeightPump.tsx (and its 1 sibling file(s) in the same folder) into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Fixtures.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"FontWeightPump\" component={FontWeightPump} durationInFrames={FONT_WEIGHT_PUMP_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the type-rhythm-sync shot card\". Read the card first: references/shots/typography/type-rhythm-sync.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props (2 demo files). It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.aurora), but about 1 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and…","read":false}},{"id":"video-shotcraft/typewriter-moves","name":"typewriter-moves","kind":"shot-recipe","job":"title","line":"A three-act typing narrative: a plain word, a hesitation and deletion, then a faster retype of the selling point.","path":"references/shots/typography/typewriter-moves.md","use":"Copy demos/typography/typewriter-moves/TypewriterErrorRetype.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Fixtures.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"TypewriterErrorRetype\" component={TypewriterErrorRetype} durationInFrames={TYPEWRITER_ERROR_RETYPE_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the typewriter-moves shot card\". Read the card first: references/shots/typography/typewriter-moves.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It uses no named look: about 1 color values are written in the demo. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from demos/_fixtures/Brand.tsx (one brand file every demo imports): swap it for the…","read":false}},{"id":"video-shotcraft/vertical-word-roll-blur-cycle","name":"vertical-word-roll-blur-cycle","kind":"shot-recipe","job":"title","line":"The closing word of a tagline rolls vertically through a three-line reel, neighboring rows blurring into gray depth while the settled word takes the accent color.","path":"references/shots/typography/vertical-word-roll-blur-cycle.md","use":"Copy demos/typography/vertical-word-roll-blur-cycle/VerticalWordRollBlurCycle.tsx into a Remotion project with demos/_fixtures/Motion.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"VerticalWordRollBlurCycle\" component={VerticalWordRollBlurCycle} durationInFrames={VERTICAL_WORD_ROLL_BLUR_CYCLE_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the vertical-word-roll-blur-cycle shot card\". Read the card first: references/shots/typography/vertical-word-roll-blur-cycle.md.","takes":{"how":"edit the file","what":["colors"],"line":"No props. It uses no named look: about 4 color values are written in the demo. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx).","read":false}},{"id":"video-shotcraft/word-relay-filmstrip","name":"word-relay-filmstrip","kind":"shot-recipe","job":"title","line":"A filmstrip of page cards steps vertically while a serif word relay swaps only its verb, each swap aligned to the center of the current card.","path":"references/shots/typography/word-relay-filmstrip.md","use":"Copy demos/typography/word-relay-filmstrip/WordRelayFilmstrip.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"WordRelayFilmstrip\" component={WordRelayFilmstrip} durationInFrames={WORD_RELAY_FILMSTRIP_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the word-relay-filmstrip shot card\". Read the card first: references/shots/typography/word-relay-filmstrip.md.","needs":"Page screenshots: copy demos/_textures/* to public/textures/live/ (they are the author's demo screenshots; swap in your own page captures and a matching layout json)","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.graphite), but about 87 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen…","read":false}},{"id":"video-shotcraft/word-relay-geometry","name":"word-relay-geometry","kind":"shot-recipe","job":"title","line":"Three benefit words hand off in turn, each with its own geometry — a spinning dashed circle, three interlocking circles that trim into view, and a metallic sheen that resolves to pure white.","path":"references/shots/typography/word-relay-geometry.md","use":"Copy demos/typography/word-relay-geometry/WordRelayGeometry.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"WordRelayGeometry\" component={WordRelayGeometry} durationInFrames={WORD_RELAY_GEOMETRY_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the word-relay-geometry shot card\". Read the card first: references/shots/typography/word-relay-geometry.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.graphite), but about 6 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen…","read":false}},{"id":"video-shotcraft/avatar-bracket-carousel","name":"avatar-bracket-carousel","kind":"shot-recipe","job":"move","line":"A four-corner focus bracket stays locked mid-sentence while a vertical queue of avatars springs through it three times, each one sharpening and growing as it enters the frame and shrinking, dimming and blurring as it leaves.","path":"references/shots/ui-entrance/avatar-bracket-carousel.md","use":"Copy demos/ui-entrance/avatar-bracket-carousel/AvatarBracketCarousel.tsx into a Remotion project with demos/_fixtures/Motion.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"AvatarBracketCarousel\" component={AvatarBracketCarousel} durationInFrames={AVATAR_BRACKET_CAROUSEL_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the avatar-bracket-carousel shot card\". Read the card first: references/shots/ui-entrance/avatar-bracket-carousel.md.","takes":{"how":"edit the file","what":["colors"],"line":"No props. It uses no named look: about 7 color values are written in the demo. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx).","read":false}},{"id":"video-shotcraft/bezier-source-converge-merge","name":"bezier-source-converge-merge","kind":"shot-recipe","job":"move","line":"Four source nodes each draw a thin bezier curve toward one convergence point, then slide along their own curve and shrink as if swallowed, while accent data packets glide the paths and the curves erase backward.","path":"references/shots/ui-entrance/bezier-source-converge-merge.md","use":"Copy demos/ui-entrance/bezier-source-converge-merge/BezierSourceConvergeMerge.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Motion.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"BezierSourceConvergeMerge\" component={BezierSourceConvergeMerge} durationInFrames={BEZIER_SOURCE_CONVERGE_MERGE_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the bezier-source-converge-merge shot card\". Read the card first: references/shots/ui-entrance/bezier-source-converge-merge.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It uses no named look: about 11 color values are written in the demo. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from demos/_fixtures/Brand.tsx (one brand file every demo imports): swap it for the…","read":false}},{"id":"video-shotcraft/card-stack","name":"card-stack","kind":"shot-recipe","job":"layout","line":"Eight cards spring up from below the frame one after another and pile into a single stack, then the whole pile fans out into a 3D arc as each card rotates, slides sideways and steps back in depth.","path":"references/shots/ui-entrance/card-stack.md","use":"Copy demos/ui-entrance/card-stack/CardStack.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"CardStack\" component={CardStack} durationInFrames={CARD_STACK_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the card-stack shot card\". Read the card first: references/shots/ui-entrance/card-stack.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.porcelain), but about 8 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen…","read":false}},{"id":"video-shotcraft/carousel-3d","name":"carousel-3d","kind":"shot-recipe","job":"layout","line":"Eight cards sit on a circular ring laid out with sin and cos, spinning through exactly one full revolution while each card billboards outward with matched front and back faces so it never reads as mirrored or upside down.","path":"references/shots/ui-entrance/carousel-3d.md","use":"Copy demos/ui-entrance/carousel-3d/Carousel3D.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"Carousel3D\" component={Carousel3D} durationInFrames={CAROUSEL_3D_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the carousel-3d shot card\". Read the card first: references/shots/ui-entrance/carousel-3d.md.","takes":{"how":"tokens","what":["colors","type","logo"],"line":"No props. Colors come from one named look in demos/_fixtures/Look.tsx (LOOKS.lime; 8 looks of about 14 values each): change the name or add your own look. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from…","read":false}},{"id":"video-shotcraft/cloner-depth-echo","name":"cloner-depth-echo","kind":"shot-recipe","job":"move","line":"A card duplicates into a diagonal depth trail, holds briefly, then accelerates back into one springy original.","path":"references/shots/ui-entrance/cloner-depth-echo.md","use":"Copy demos/ui-entrance/cloner-depth-echo/ClonerDepthEcho.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"ClonerDepthEcho\" component={ClonerDepthEcho} durationInFrames={CLONER_DEPTH_ECHO_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the cloner-depth-echo shot card\". Read the card first: references/shots/ui-entrance/cloner-depth-echo.md.","takes":{"how":"tokens","what":["colors","type","logo"],"line":"No props. Colors come from one named look in demos/_fixtures/Look.tsx (LOOKS.lime; 8 looks of about 14 values each): change the name or add your own look. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from…","read":false}},{"id":"video-shotcraft/deck-deal-flyin","name":"deck-deal-flyin","kind":"shot-recipe","job":"move on a still","line":"A physical card stack opens the scene, then cards accelerate into a live grid as the camera follows the growing page.","path":"references/shots/ui-entrance/deck-deal-flyin.md","use":"Copy demos/ui-entrance/deck-deal-flyin/DeckDealFlyin.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"DeckDealFlyin\" component={DeckDealFlyin} durationInFrames={DECK_DEAL_FLYIN_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the deck-deal-flyin shot card\". Read the card first: references/shots/ui-entrance/deck-deal-flyin.md.","needs":"Page screenshots: copy demos/_textures/* to public/textures/live/ (they are the author's demo screenshots; swap in your own page captures and a matching layout json)","takes":{"how":"edit the file","what":["colors","logo","text","pictures"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.graphite), but about 7 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen…","read":false}},{"id":"video-shotcraft/doc-park-left-pill-deal","name":"doc-park-left-pill-deal","kind":"shot-recipe","job":"move","line":"The source document slides left until only a sliver remains and keeps scrolling slowly, while three outlined pills are dealt one at a time, each followed by a caption that darkens word by word.","path":"references/shots/ui-entrance/doc-park-left-pill-deal.md","use":"Copy demos/ui-entrance/doc-park-left-pill-deal/DocParkLeftPillDeal.tsx into a Remotion project with demos/_fixtures/Motion.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"DocParkLeftPillDeal\" component={DocParkLeftPillDeal} durationInFrames={DOC_PARK_LEFT_PILL_DEAL_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the doc-park-left-pill-deal shot card\". Read the card first: references/shots/ui-entrance/doc-park-left-pill-deal.md.","takes":{"how":"edit the file","what":["colors"],"line":"No props. It uses no named look: about 7 color values are written in the demo. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx).","read":false}},{"id":"video-shotcraft/draw-svg-trace","name":"draw-svg-trace","kind":"shot-recipe","job":"callout","line":"An ink stroke traces an element outline, closes with a dark flash, and hands focus to the revealed content.","path":"references/shots/ui-entrance/draw-svg-trace.md","use":"Copy demos/ui-entrance/draw-svg-trace/DrawSvgTrace.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"DrawSvgTrace\" component={DrawSvgTrace} durationInFrames={DRAW_SVG_TRACE_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the draw-svg-trace shot card\". Read the card first: references/shots/ui-entrance/draw-svg-trace.md.","takes":{"how":"tokens","what":["colors","type","logo"],"line":"No props. Colors come from one named look in demos/_fixtures/Look.tsx (LOOKS.paper; 8 looks of about 14 values each): change the name or add your own look. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from…","read":false}},{"id":"video-shotcraft/element-body-moves","name":"element-body-moves","kind":"shot-recipe","job":"effect","line":"A contact shadow that separates during lift, giving interface elements physical weight.","path":"references/shots/ui-entrance/element-body-moves.md","use":"Copy demos/ui-entrance/element-body-moves/ContactShadowLift.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"ContactShadowLift\" component={ContactShadowLift} durationInFrames={CONTACT_SHADOW_LIFT_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the element-body-moves shot card\". Read the card first: references/shots/ui-entrance/element-body-moves.md.","takes":{"how":"tokens","what":["colors","type","logo"],"line":"No props. Colors come from one named look in demos/_fixtures/Look.tsx (LOOKS.porcelain; 8 looks of about 14 values each): change the name or add your own look. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from…","read":false}},{"id":"video-shotcraft/integration-hub-map","name":"integration-hub-map","kind":"shot-recipe","job":"layout","line":"A page flips 180 degrees into an integration hub where five app icons pop in together and rainbow light tubes connect with pulses flowing through them.","path":"references/shots/ui-entrance/integration-hub-map.md","use":"Copy demos/ui-entrance/integration-hub-map/IntegrationHubMap.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"IntegrationHubMap\" component={IntegrationHubMap} durationInFrames={INTEGRATION_HUB_MAP_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the integration-hub-map shot card\". Read the card first: references/shots/ui-entrance/integration-hub-map.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It uses no named look: about 26 color values are written in the demo. Where its fonts come from was not checked. The logo and name on screen are the pack's own, from demos/_fixtures/Brand.tsx (one brand file every demo imports): swap it for the client's. Words are written in the demo.","read":false}},{"id":"video-shotcraft/list-reveal","name":"list-reveal","kind":"shot-recipe","job":"move","line":"Menu rows scale into place one after another with a faint overshoot while the whole list drifts slowly upward, keeping the per-item entrance and the group motion on two independent layers.","path":"references/shots/ui-entrance/list-reveal.md","use":"Copy demos/ui-entrance/list-reveal/ListReveal.tsx into a Remotion project with demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"ListReveal\" component={ListReveal} durationInFrames={LIST_REVEAL_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the list-reveal shot card\". Read the card first: references/shots/ui-entrance/list-reveal.md.","takes":{"how":"edit the file","what":["colors"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.graphite), but about 7 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx).","read":false}},{"id":"video-shotcraft/list-stack-press","name":"list-stack-press","kind":"shot-recipe","job":"move on a still","line":"List cards fly up from below, compress the growing stack on every landing, and advance a synchronized counter.","path":"references/shots/ui-entrance/list-stack-press.md","use":"Copy demos/ui-entrance/list-stack-press/ListStackPress.tsx into a Remotion project with demos/_fixtures/PageCam2D.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"ListStackPress\" component={ListStackPress} durationInFrames={LIST_STACK_PRESS_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the list-stack-press shot card\". Read the card first: references/shots/ui-entrance/list-stack-press.md.","needs":"Page screenshots: copy demos/_textures/* to public/textures/live/ (they are the author's demo screenshots; swap in your own page captures and a matching layout json)","takes":{"how":"edit the file","what":["colors","pictures"],"line":"No props. It uses no named look: about 2 color values are written in the demo. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). Pictures are files named in the demo.","read":false}},{"id":"video-shotcraft/neon-frame-forerun","name":"neon-frame-forerun","kind":"shot-recipe","job":"frame","line":"A neon frame races ahead to outline the scene in steep perspective while components drop from above and the page brightens as they land.","path":"references/shots/ui-entrance/neon-frame-forerun.md","use":"Copy demos/ui-entrance/neon-frame-forerun/NeonFrameForerun.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"NeonFrameForerun\" component={NeonFrameForerun} durationInFrames={NEON_FRAME_FORERUN_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the neon-frame-forerun shot card\". Read the card first: references/shots/ui-entrance/neon-frame-forerun.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.aurora), but about 24 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen…","read":false}},{"id":"video-shotcraft/neon-frame-orbit-drop","name":"neon-frame-orbit-drop","kind":"shot-recipe","job":"frame","line":"After a neon frame draws itself, the camera arcs left to right while every page component drops from the air and lands on the same frame.","path":"references/shots/ui-entrance/neon-frame-orbit-drop.md","use":"Copy demos/ui-entrance/neon-frame-orbit-drop/NeonFrameForerunOrbit.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"NeonFrameForerunOrbit\" component={NeonFrameForerunOrbit} durationInFrames={NEON_FRAME_FORERUN_ORBIT_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the neon-frame-orbit-drop shot card\". Read the card first: references/shots/ui-entrance/neon-frame-orbit-drop.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It uses no named look: about 39 color values are written in the demo. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen are the pack's own, from demos/_fixtures/Brand.tsx (one brand file every demo imports): swap it for the…","read":false}},{"id":"video-shotcraft/page-waterfall-wall","name":"page-waterfall-wall","kind":"shot-recipe","job":"ground","line":"Real page captures flow at different speeds across a tilted 3D wall, creating an endless field of content.","path":"references/shots/ui-entrance/page-waterfall-wall.md","use":"Copy demos/ui-entrance/page-waterfall-wall/PageWaterfallWall.tsx into a Remotion project with demos/_fixtures/Polish.tsx, VerticalTicker.tsx (same folder); fix the import paths; then <Composition id=\"buildColumns\" component={buildColumns} durationInFrames={PAGE_WATERFALL_WALL_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the page-waterfall-wall shot card\". Read the card first: references/shots/ui-entrance/page-waterfall-wall.md.","needs":"Page screenshots: copy demos/_textures/* to public/textures/live/ (they are the author's demo screenshots; swap in your own page captures and a matching layout json)"},{"id":"video-shotcraft/product-card-progressive-assemble","name":"product-card-progressive-assemble","kind":"shot-recipe","job":"layout","line":"A product card builds itself field by field as image, title and pills pop in, the old price gets struck through while an accent new price springs out, and highlighter blocks sweep across the copy.","path":"references/shots/ui-entrance/product-card-progressive-assemble.md","use":"Copy demos/ui-entrance/product-card-progressive-assemble/ProductCardProgressiveAssemble.tsx into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"ProductCardProgressiveAssemble\" component={ProductCardProgressiveAssemble} durationInFrames={PRODUCT_CARD_PROGRESSIVE_ASSEMBLE_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the product-card-progressive-assemble shot card\". Read the card first: references/shots/ui-entrance/product-card-progressive-assemble.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props. It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.porcelain), but about 4 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and name on screen…","read":false}},{"id":"video-shotcraft/radial-wave","name":"radial-wave","kind":"shot-recipe","job":"ground","line":"A 17x9 dot grid lights up in rings that spread outward from the center, each dot overshooting its scale before settling into a steady glow, then a brighter pulse collapses back inward from the edges.","path":"references/shots/ui-entrance/radial-wave.md","use":"Copy demos/ui-entrance/radial-wave/RadialWave.tsx into a Remotion project with demos/_fixtures/Motion.tsx; fix the import paths; then <Composition id=\"RadialWave\" component={RadialWave} durationInFrames={RADIAL_WAVE_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the radial-wave shot card\". Read the card first: references/shots/ui-entrance/radial-wave.md.","takes":{"how":"edit the file","what":["colors"],"line":"No props. It uses no named look: about 4 color values are written in the demo. Where its fonts come from was not checked.","read":false}},{"id":"video-shotcraft/research-card-stack-scroll","name":"research-card-stack-scroll","kind":"shot-recipe","job":"move","line":"Dark paper cards drop into the center every twelve frames and pile along a downward-right axis, squashing on landing while only the topmost card renders its full text as the rest blur into the stack.","path":"references/shots/ui-entrance/research-card-stack-scroll.md","use":"Copy demos/ui-entrance/research-card-stack-scroll/ResearchCardStackScroll.tsx into a Remotion project with demos/_fixtures/Motion.tsx; fix the import paths; then <Composition id=\"ResearchCardStackScroll\" component={ResearchCardStackScroll} durationInFrames={RESEARCH_CARD_STACK_SCROLL_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the research-card-stack-scroll shot card\". Read the card first: references/shots/ui-entrance/research-card-stack-scroll.md.","takes":{"how":"edit the file","what":["colors"],"line":"No props. It uses no named look: about 8 color values are written in the demo. Where its fonts come from was not checked.","read":false}},{"id":"video-shotcraft/row-embed","name":"row-embed","kind":"shot-recipe","job":"move on a still","line":"Content rows descend with perspective, flatten into the page, and flash a thin amber seam at the moment of insertion.","path":"references/shots/ui-entrance/row-embed.md","use":"Copy demos/ui-entrance/row-embed/RowEmbed.tsx into a Remotion project with demos/_fixtures/PageCam2D.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"RowEmbed\" component={RowEmbed} durationInFrames={ROW_EMBED_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the row-embed shot card\". Read the card first: references/shots/ui-entrance/row-embed.md.","needs":"Page screenshots: copy demos/_textures/* to public/textures/live/ (they are the author's demo screenshots; swap in your own page captures and a matching layout json)","takes":{"how":"edit the file","what":["colors","text","pictures"],"line":"No props. It uses no named look: about 2 color values are written in the demo. Where its fonts come from was not checked. Words are written in the demo. Pictures are files named in the demo.","read":false}},{"id":"video-shotcraft/value-stagger-gradient","name":"value-stagger-gradient","kind":"shot-recipe","job":"chart","line":"Sixteen bars rise in a staggered sweep where height, hue, travel distance and blur are each spread as a gradient across the row, then a second beat re-origins the stagger at the center so the pulse amplitude fans out symmetrically.","path":"references/shots/ui-entrance/value-stagger-gradient.md","use":"Copy demos/ui-entrance/value-stagger-gradient/ValueStaggerGradient.tsx into a Remotion project with demos/_fixtures/Motion.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"ValueStaggerGradient\" component={ValueStaggerGradient} durationInFrames={VALUE_STAGGER_GRADIENT_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the value-stagger-gradient shot card\". Read the card first: references/shots/ui-entrance/value-stagger-gradient.md.","takes":{"how":"edit the file","what":["colors"],"line":"No props. It uses no named look: about 7 color values are written in the demo. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx).","read":false}},{"id":"video-shotcraft/wall-reveal-moves","name":"wall-reveal-moves","kind":"shot-recipe","job":"move","line":"2 named moves on one card: bento-light-up (A dark 3x2 bento wall waits dimmed; amber light traces each cell border and the content brightens and lifts, cell by cell, until a slow push seals it); wireframe-draw-on (The interface draws itself as blueprint linework first, then a glowing amber scanline sweeps left to right, solidifying wireframe into real UI).","path":"references/shots/ui-entrance/wall-reveal-moves.md","use":"Copy demos/ui-entrance/wall-reveal-moves/BentoLightUp.tsx (and its 1 sibling file(s) in the same folder) into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Fixtures.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id=\"BentoLightUp\" component={BentoLightUp} durationInFrames={BENTO_LIGHT_UP_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: \"use the wall-reveal-moves shot card\". Read the card first: references/shots/ui-entrance/wall-reveal-moves.md.","takes":{"how":"edit the file","what":["colors","logo","text"],"line":"No props (2 demo files). It uses no named look: about 5 color values are written in the demo. Where its fonts come from was not checked. The logo and name on screen are the pack's own, from demos/_fixtures/Brand.tsx (one brand file every demo imports): swap it for the client's. Words are written…","read":false}},{"id":"video-shotcraft/skill","name":"video-shotcraft (the skill)","kind":"skill","job":"plan","line":"Agent instructions (written in Chinese, with an English description line) for making a product promo in Remotion from real page captures: three working modes (use the Ink Press template, free creation, co-creation with sign-offs), nine production rules, and a table of which reference file to read when. Its reference pages (pipeline, guided-free-creation, workbench, jianying-export, publish-upload-post, sfx-sourcing) support it and are not separate entries.","path":"SKILL.md","use":"npx skills add Vincentwei1021/video-shotcraft, or clone and symlink the folder into ~/.claude/skills/ or ~/.codex/skills/. Then: \"Use video-shotcraft to make a promo for my product.\""},{"id":"video-shotcraft/ink-press-template","name":"Ink Press template","kind":"template","job":"scene","line":"A whole runnable Remotion project: a 36.2-second, 1920x1080, 30 fps product promo in a paper-and-ink look (10 shots, 1,085 frames, sound effects only), built so you swap in your own page screenshots and copy shot by shot. Composition id AiflPromo. Nine color presets in the workbench.","path":"template","use":"cd template && npm install && npx remotion studio src/index.ts; render: npx remotion render src/index.ts AiflPromo out/promo.mp4. Follow template/TEMPLATE.md to swap in another product.","needs":"Node, remotion and @remotion/cli 4.0.484, react 19.2.7 (pinned in template/package.json). Its screenshots are the author's demo product and its 11 sound files are not under Apache-2.0: replace both before publishing."},{"id":"video-shotcraft/promo-energy-arc","name":"promo-energy-arc (film skeleton)","kind":"skill","job":"plan","line":"A fill-in-the-blanks shape for a 30-60 second multi-feature promo: quiet brand open, one hero moment, feature sections separated by breathing title cards, launch-event finale. Says which shot cards fit each slot.","path":"references/sequences/promo-energy-arc.md","use":"Read it at storyboard time and fill the slot table before picking cards."},{"id":"video-shotcraft/aesthetic-rules","name":"aesthetic-rules (review rules)","kind":"skill","job":"review","line":"29 rules written as past rulings, in five groups: rhythm (R1-R4), look, camera and composition (Q1-Q11), sound (S1-S5), copy (C1-C3), process (P1-P4). Examples: a wordmark holds a full second after it lands; captions are at least 5% of frame height; full-frame beat hits at most three times a film; one motion idea per shot.","path":"references/aesthetic-rules.md","use":"Use as a checklist on stills and on the rendered film; references/final-review.md is the hand-off sheet for an independent reviewer."},{"id":"video-shotcraft/final-review","name":"final-review (independent last check)","kind":"skill","job":"review","line":"The brief for a fresh reviewer who checks the finished film against the plan, the chosen cards, the demo source and the aesthetic rules, and reports with frame numbers.","path":"references/final-review.md","use":"Hand the reviewer the film, key frames, brief, shot map and this file."},{"id":"video-shotcraft/music-beat-sync","name":"music-beat-sync (cutting to the beat)","kind":"skill","job":"music","line":"Method for fitting a beat grid to a chosen track (librosa, kick/snare/hi-hat detection), writing the timeline in beat numbers with a beatF(n) helper, and checking cut error after render (3 frames or less).","path":"references/music-beat-sync.md","use":"Run the analysis before storyboarding; needs uv and a one-off Python script.","needs":"Uv, Python, librosa (fetched by uv)"},{"id":"video-shotcraft/sound-design","name":"sound-design (SFX timing and mix)","kind":"skill","job":"audio","line":"How to choose, place and mix sound effects for a product film: frame-pinned SFX table, foley before decoration, riser-impact-sparkle phrasing, BGM handling, two deliveries (with and without music).","path":"references/sound-design.md","use":"Read with references/sfx-sourcing.md when adding or replacing sound on a finished cut."},{"id":"video-shotcraft/pagecam","name":"PageCam","kind":"remotion","job":"camera","line":"A 2.5D camera over a full-page screenshot: you give keyframes (frame, center x/y, zoom, tilt) and it flies the page. The base of every 'real page' shot in the template.","path":"assets/lib/PageCam.tsx","use":"Copy the file into your Remotion project and import it (the skill's own rule is copy, not import from the repo). <PageCam src=... keys={[{frame:0,cx,cy,zoom}, ...]} />; see template/src/aifl/live/ for working scenes.","needs":"Remotion only","takes":{"how":"props","what":["pictures"],"line":"Props: src (a page screenshot), pageH, keys[] (camera keyframes: frame, cx, cy, zoom, rotX, rotY, rotZ, persp), children, blur, saturate.","read":true}},{"id":"video-shotcraft/clipcard","name":"ClipCard","kind":"remotion","job":"frame","line":"Wraps a video file in a rounded card with an optional caption, and cross-fades a loop when the clip is shorter than the shot, so card-shaped camera moves can carry real footage.","path":"assets/lib/ClipCard.tsx","use":"Copy the file into your Remotion project and import it (the skill's own rule is copy, not import from the repo). <ClipCard src=\"clips/demo.mp4\" size={560} caption=\"...\" loopDurationInFrames={60} durationInFrames={120} />. Demo: demos/ui-entrance/clipcard-looping/ClipCardLooping.tsx.","needs":"Remotion only; always pass durationInFrames","takes":{"how":"props","what":["text","pictures"],"line":"Props: src (the clip), caption, size, radius, muted, captionSize, startFrom and fades. The card's two colors are written in the file.","read":true}},{"id":"video-shotcraft/caption","name":"Caption","kind":"remotion","job":"caption","line":"A small monospace caption line that fades in and out at the bottom of the frame for a given duration.","path":"assets/lib/Caption.tsx","use":"Copy the file into your Remotion project and import it (the skill's own rule is copy, not import from the repo). <Caption text=\"...\" duration={90} bottom={64} />","takes":{"how":"props","what":["text"],"line":"Props: text, duration, bottom. Its colors and font are written in the file.","read":true}},{"id":"video-shotcraft/digit-roll","name":"DigitRoll","kind":"remotion","job":"number","line":"Odometer-style rolling digits for monospace numerals.","path":"assets/lib/DigitRoll.tsx","use":"Copy the file into your Remotion project and import it (the skill's own rule is copy, not import from the repo). See template/src/aifl/PaperTitleCard.tsx for it in use.","takes":{"how":"props","what":["colors","numbers"],"line":"Props: value, delay, fontSize, color.","read":true}},{"id":"video-shotcraft/flash-cut","name":"FlashCut","kind":"remotion","job":"transition","line":"A warm-white bloom that flashes over a hard cut (10 frames by default). The flash-cut style of the shot-transitions card.","path":"assets/lib/FlashCut.tsx","use":"Copy the file into your Remotion project and import it (the skill's own rule is copy, not import from the repo). Place <FlashCut duration={10} /> in a Sequence centred on the cut.","takes":{"how":"props","what":[],"line":"Prop: duration. A flash between two shots; it holds nothing to re-skin.","read":true}},{"id":"video-shotcraft/flat-panel","name":"FlatPanel","kind":"three","job":"3d","line":"A flat textured panel with a contact shadow for real 3D page shots.","path":"assets/lib/FlatPanel.tsx","use":"Copy the file into your Remotion project and import it (the skill's own rule is copy, not import from the repo).","needs":"Three, @react-three/fiber, @remotion/three"},{"id":"video-shotcraft/vertical-ticker","name":"VerticalTicker","kind":"remotion","job":"ground","line":"An endless 3D wall of columns scrolling at different speeds (used by page-waterfall-wall). Its header says it was taken in from another repo (vibe-motion/skills, remotion-3d-ticker) and changed; that repo's license is not stated here.","path":"assets/lib/VerticalTicker.tsx","use":"","needs":"Remotion only","look_only":true},{"id":"video-shotcraft/helpers","name":"helpers (rand, shake, camera, motion)","kind":"remotion","job":"move","line":"Small pure functions with unit tests: seeded random (mulberry32), velocityAt, lagged follow, dampedSettle, handheld shake, and a three.js camera helper.","path":"assets/lib/helpers","use":"Copy the file into your Remotion project and import it (the skill's own rule is copy, not import from the repo). Tests: npm test at the repo root (vitest).","needs":"Camera.tsx needs three and @react-three/fiber; the rest need nothing"},{"id":"video-shotcraft/fixture-polish","name":"Polish.tsx (eases and finish kit)","kind":"remotion","job":"effect","line":"The shared finish kit almost every demo imports: a CSS-equivalent bezier() ease maker, eight named eases (snappy, out, smooth, swift, exit, anticip, overshoot, linear), ramp(frame, start, dur, ease), velocity(), font stacks, soft shadows, hairlines, Grain, Vignette, SpeedBlur (direction blur from speed) and Backdrop. 243 lines.","path":"demos/_fixtures/Polish.tsx","use":"Copy next to any demo you lift. import { EASE, ramp, Grain, Backdrop } from './Polish'.","needs":"Remotion and react only"},{"id":"video-shotcraft/fixture-look","name":"Look.tsx (palettes and stage)","kind":"remotion","job":"ground","line":"Eight complete color looks (dark: midnight, aurora, ember, graphite, lime; light: paper, porcelain, sand), a type scale, and a lit Stage with horizon light, GridFloor, Dust, a single Sheen pass, and TextReveal by letter, word or line. 316 lines; depends on Polish.tsx.","path":"demos/_fixtures/Look.tsx","use":"Copy with Polish.tsx. <Stage look={LOOKS.midnight}>...</Stage>","takes":{"how":"tokens","what":["colors","type"],"line":"The token file itself. LOOKS holds eight named looks (midnight, aurora, ember, graphite, lime, paper, porcelain, sand), about 14 values each: three background stops, a light, two surfaces, a line, three inks, two accents, onAccent and shadow. It also holds the type size scale and a serif stack.…","read":true}},{"id":"video-shotcraft/fixture-brand","name":"Brand.tsx (the repo's own logo and slogans)","kind":"remotion","job":"logo","line":"The video-shotcraft mark, wordmark, brand colors and pitch lines that the demos show on screen. It is the file to replace with your own mark and copy when you lift a demo.","path":"demos/_fixtures/Brand.tsx","use":"","look_only":true},{"id":"video-shotcraft/fixture-fixtures","name":"Fixtures.tsx (fake dashboard parts)","kind":"remotion","job":"scene","line":"Stand-in UI for demos: FakeDashboard, Card, TitleBlock and a gray palette. 647 lines; 23 demo files use it.","path":"demos/_fixtures/Fixtures.tsx","use":"Copy with Brand.tsx when a demo imports it, or swap for your own UI."},{"id":"video-shotcraft/fixture-motion","name":"Motion.tsx (480x270 design stage)","kind":"remotion","job":"layout","line":"A DesignStage that scales a 480x270 design grid to the frame, plus an ease table and seg/lerp/rand helpers. 14 older demo files use it.","path":"demos/_fixtures/Motion.tsx","use":"Copy when a demo imports it."},{"id":"video-shotcraft/fixture-pagecam2d","name":"PageCam2D.tsx","kind":"remotion","job":"camera","line":"A self-contained copy of the template's page camera for demos that fly over real screenshots (spotlight-hero-card, type-and-filter, row-embed, list-stack-press, outro-group-photo-launch).","path":"demos/_fixtures/PageCam2D.tsx","use":"Copy with the demo, its textures and live-layout.json."},{"id":"video-shotcraft/clipcard-looping","name":"ClipCardLooping (demo)","kind":"remotion","job":"frame","line":"The test scene for ClipCard: three cases of a looping clip inside a card. Needs a real mp4 in public/clips/, so the repo's smoke test skips it.","path":"demos/ui-entrance/clipcard-looping/ClipCardLooping.tsx","use":"Register like any demo after putting a clip at public/clips/.","needs":"An mp4 of your own"},{"id":"video-shotcraft/legacy-demos","name":"_legacy (66 retired demos)","kind":"remotion","job":"scene","line":"66 demos removed from the library in October 2026, kept frozen only so old workbench projects still open. The repo says not to pick from them. Listed in demos/_legacy/manifest.json; not indexed one by one here.","path":"demos/_legacy","use":"Not for new work."},{"id":"video-shotcraft/workbench","name":"Motion Workbench","kind":"tool","job":"edit","line":"A browser editor (Vite, React, Remotion Player) that opens a finished film as tracks: shots, transitions, captions, sound. You can change copy, colors, sizes and speed, drag in any library shot, and export through Remotion.","path":"workbench","use":"node workbench/scripts/open.mjs <film project folder> (runs npm install --ignore-scripts in workbench/, starts a dev server on port 5198, opens the browser). Alone: cd workbench && npm install && npm run dev.","needs":"Node; installs three, @react-three/fiber, @remotion/player 4.0.484 and others; the film project needs a src/workbench.ts manifest"},{"id":"video-shotcraft/gallery","name":"Gallery (static preview site)","kind":"tool","job":"review","line":"A static site that lists the 124 cards and 150 moves with search, filters and copyable names. The data is gallery/api/library.json. 54 poster stills are in the repo; the 150 preview clips are not (they live in a GitHub release and on the project's Pages site).","path":"gallery","use":"Online: https://vincentwei1021.github.io/video-shotcraft/ . Local: gallery/fetch-media.sh (downloads the clips with the gh CLI), then cd gallery && python3 -m http.server 4178.","needs":"Gh CLI for the clips"},{"id":"video-shotcraft/jianying-export","name":"jianying-export (export to the JianYing editor)","kind":"tool","job":"export","line":"Python modules that turn a finished Remotion film into an editable draft for JianYing, the mainland-China edition of CapCut: one clip per shot cut from a clean plate render, native caption tracks, separate sound-effect and music tracks. Tested by the author on JianYing Pro 11.2 for macOS; the Windows path is untested. The draft it writes carries the machine's device ids, so the repo says not to pass a draft folder to anyone else.","path":"jianying-export","use":"python3 -m venv .venv && pip install pyJianYingDraft; run jianying-export/smoke_test.py first; method in references/jianying-export.md.","needs":"JianYing Pro installed (macOS), Python, pyJianYingDraft"},{"id":"video-shotcraft/upload-post","name":"upload_post.py (social publishing)","kind":"tool","job":"publish","line":"Posts a finished MP4 to TikTok, Instagram, YouTube, LinkedIn, X and others through the Upload-Post hosted service. Standard library only. The skill tells its agent to use it only when the user asks, to confirm caption and platforms, and to dry-run first.","path":"publish/upload_post.py","use":"python3 publish/upload_post.py --video out/promo.mp4 --title \"...\" --platforms youtube,linkedin --dry-run","needs":"An Upload-Post account and UPLOAD_POST_API_KEY and UPLOAD_POST_USER (third-party hosted service; free tier 10 uploads a month by the repo's note). Sends the video to api.upload-post.com."},{"id":"video-shotcraft/sfx-source","name":"sfx-source.py (Freesound search and download)","kind":"tool","job":"audio","line":"Searches Freesound for sound effects, filters to CC0 (or CC BY when allowed), downloads MP3 previews into a film project, and writes a source list, credits file, hashes and loudness measurements. No API key.","path":"assets/scripts/sfx-source.py","use":"python3 assets/scripts/sfx-source.py search ... ; get ... ; analyze ... (see references/sfx-sourcing.md)","needs":"Python; ffmpeg and ffprobe for get and analyze. Contacts freesound.org."},{"id":"video-shotcraft/capture-template","name":"capture-template.mjs (page capture)","kind":"tool","job":"render","line":"A puppeteer script you edit (base URL, routes, selectors) to capture a running web app as full-page 2x screenshots, per-element cut-outs and a layout.json of element boxes, which the page-camera shots use.","path":"assets/scripts/capture-template.mjs","use":"Copy it, edit CONFIG at the top, npm i puppeteer, node capture-template.mjs","needs":"Puppeteer (downloads its own Chrome), your app running locally with demo data"},{"id":"video-shotcraft/smoke-render","name":"smoke-render-demos.py (first-frame test of every demo)","kind":"tool","job":"review","line":"Registers every demo that exports a duration into a generated root file and renders its first frame, to catch demos that compile but crash.","path":"assets/scripts/smoke-render-demos.py","use":"cd template && npm ci && npm i --no-save @remotion/motion-blur@4.0.484; cd .. && python3 assets/scripts/smoke-render-demos.py [--subset BlurSlide,GlitchCycle] [--list]"},{"id":"video-shotcraft/shot-polish","name":"shot-polish (the redesign review rig)","kind":"tool","job":"review","line":"The author's tooling and notes from the October 2026 pass that re-made all 216 demos and kept 150: per-shot notes, a keep/cut decisions file, contact-sheet builder and compare pages. Useful as a record of how the library was judged, not as a tool to adopt.","path":"shot-polish","use":"Read shot-polish/BRIEF.md and decisions.json."},{"id":"video-shotcraft/readme-workflow","name":"readme-workflow (README banner source)","kind":"html-video","job":"scene","line":"The editable source of the README's eight-second workflow loop (1440x540), a HyperFrames HTML composition, not Remotion.","path":"videos/readme-workflow","use":"cd videos/readme-workflow && npm run dev (runs npx --yes hyperframes@0.8.149 preview, which downloads that package)","needs":"Hyperframes 0.8.149 through npx"},{"id":"video-shotcraft/bgm","name":"5 background music tracks","kind":"skill","job":"music","line":"Five MP3 tracks (tech house, two house, two hip hop; about 86 to 129 BPM measured by the author) offered as music choices. From Mixkit under Mixkit's Stock Music Free License, not Apache-2.0; one track's original listing could not be traced by the author.","path":"assets/audio/bgm","use":"","look_only":true},{"id":"video-shotcraft/template-sfx","name":"11 template sound effects","kind":"skill","job":"audio","line":"The Ink Press film's fixed sound effects. The repo says they are not covered by its Apache-2.0 license; six are recorded as Mixkit SFX, four could not be traced, one has no known source.","path":"template/public/audio","use":"","look_only":true},{"id":"video-shotcraft/demo-screenshots","name":"demo page screenshots (_textures)","kind":"skill","job":"scene","line":"25 files: full-page and per-card screenshots of the author's demo product (a research tracker, partly in Chinese) with a layout json. 13 cards need files of this shape to render.","path":"demos/_textures","use":"","look_only":true},{"id":"video-shotcraft/brand-assets","name":"video-shotcraft logo files","kind":"skill","job":"logo","line":"The project's own mark, lock-ups and brand board, with usage rules in BRAND.md. Theirs, not for reuse.","path":"assets/brand","use":"","look_only":true}]},{"id":"motionmaxxing","name":"motionmaxxing","repo":"Tejashmakwana/motionmaxxing","url":"https://github.com/Tejashmakwana/motionmaxxing","commit":"8c8ec0f2a6f6c9a0da15cd24f7b1298ab298368c","commit_date":"2026-10-06","licence":{"name":"Apache-2.0","basis":"LICENSE file (Apache License 2.0) and NOTICE: 'Made by Tejas Makwana'. NOTICE lists what Apache covers: SKILL.md, references/, scripts/, templates/, examples/, taste/, library/, docs/, runtime/motion.js, runtime/hero3d/hero3d.js,…","note":"Its NOTICE file lists what is not covered: the bundled GSAP, three.js and fonts keep their own licenses."},"kind":"skill","line":"An agent skill and a small GSAP runtime for making short launch films in plain HTML, with written rules of taste, measured timings and scripts that check the finished render.","look_only":false,"get":{"command":"git clone https://github.com/Tejashmakwana/motionmaxxing ~/.claude/skills/motionmaxxing && bash ~/.claude/skills/motionmaxxing/install.sh","note":"By our read of the installer, it checks for Node, Python, FFmpeg and Chrome, links the folder into a skills directory, and downloads nothing. We did not run it."},"needs":"Node 22, Python 3.9, FFmpeg and Chrome. Optional and paid: an ElevenLabs key for voice and music. No Remotion: a film is an HTML page rendered through Chrome.","sends":"Nothing by itself. Three scripts go online when you run them: voice (ElevenLabs), the logo fetch, and the brand reader, which loads the website you name.","seen":[{"line":"Its 9-second demo film stepped through frame by frame in a headless browser: a headline builds, a prompt types, a counter runs to 10,000.","preview":{"poster":"assets/asset-library/motionmaxxing-demo-film-sheet.jpg","w":1280,"h":480}},{"line":"Its own seek test passed. Jumping to a frame gave the same picture as playing to it."}],"not_seen":"We made no film with the skill, so nothing here shows its films are better. The render script and its checks were read, not run.","count":88,"kinds":{"shot-recipe":35,"gsap":22,"tool":12,"skill":8,"html-video":6,"three":4,"template":1},"assets":[{"id":"motionmaxxing/skill","name":"motionmaxxing (the skill)","kind":"skill","job":"plan","line":"Agent instructions for directing a short motion-graphics film in plain HTML: find an idea only this brand could own, plan each beat by what it makes the viewer believe, build it on a seek-safe GSAP runtime with measured timings, then check the render with scripts and write an honest note. Holds 8 judgments, a 12-item never-ship list, 12 craft laws and six gates. Its reference pages (idea, director, world, brand, layout, motion, type, ui-demo, sound-sync, tools) support it and are not separate entries.","path":"SKILL.md","use":"git clone https://github.com/Tejashmakwana/motionmaxxing ~/.claude/skills/motionmaxxing, then ask for a motion graphic or run /motionmaxxing. Any agent that reads a SKILL.md folder can be pointed at it."},{"id":"motionmaxxing/judgment","name":"judgment.md (the eight judgments)","kind":"skill","job":"review","line":"The taste layer in full: eight judgments each with when, prefer, because, evidence and where it stops being true; twelve default reaches with a question to ask of each; and a table of when the usual 'slop' move is the right one.","path":"references/judgment.md","use":"Read before choosing an idea; use section 7's twelve questions as a plan review."},{"id":"motionmaxxing/slop","name":"slop.md (the review file)","kind":"skill","job":"review","line":"The checklist run on a plan and on a render: the never-ship list, 25 ranked default patterns (N1-N25), a table of AI default against professional decision by topic (sound, type, motion, camera, transitions, UI, color, endings, timing), the conditions under which a tell works, and a frame-review checklist that starts with gates G0-G5.","path":"references/slop.md","use":"Open look/sheet.jpg, describe each frame in one sentence, then walk Part 2."},{"id":"motionmaxxing/taste-log","name":"taste/verdicts.md and taste/edits.md","kind":"skill","job":"review","line":"The author's own record of what one person said about specific films, and 18-odd before/after fixes with the reason for each. It is one rater's taste, dated late September to early October 2026; the skill tells its agent to append the user's reactions to these files.","path":"taste","use":"Read as worked examples. The skill appends its owner's reactions to these files, so start them empty."},{"id":"motionmaxxing/studies","name":"studies (two calibration strips)","kind":"skill","job":"review","line":"Two JPEG strips of invented brands, each pair showing a default beside a decision, drawn in different styles on purpose so they are not copied as a look. PROVENANCE.md says the images were generated for the skill and contain no frame from anyone's film.","path":"studies","use":"Look once for the reasoning; the skill says never to borrow the look."},{"id":"motionmaxxing/moments-library","name":"library/moments.jsonl (precedent rows)","kind":"skill","job":"plan","line":"716 rows of rule-only precedent (one more line is a header): 507 rules decoded from other human-made films under opaque ids, 156 designer rules written as when/do/because with numbers, and 53 rows for the measured study moments. No copy, frames or brand names. The file's own header says the rows are model-decoded and unverified.","path":"library/moments.jsonl","use":"python3 scripts/precedent.py query --beat proof --content ui --text \"selection becomes result\" --k 6  (also: show ID, rules --beat cta, stats)"},{"id":"motionmaxxing/film-template","name":"film.html (starting film)","kind":"template","job":"scene","line":"The page every film starts from: a 1920x1080 stage, the runtime wired in, a Motion.film() call and the seek hooks the renderer drives. It expects the runtime folder beside it.","path":"templates/film.html","use":"cp templates/film.html film/index.html && cp -r runtime film/runtime; then node scripts/render.mjs film/index.html --still 1.2,2.4 film/stills","needs":"Opened where it sits in the repo it fails (it looks for ./runtime/): copy it as shown.","takes":{"how":"tokens","what":["colors","type"],"line":"Six custom properties in one :root block at the top of templates/film.html: --ground, --ground-2, --ink, --ink-soft, --accent, --font. Change those and the film follows.","read":true}},{"id":"motionmaxxing/example-demo","name":"examples/demo (every runtime call once)","kind":"html-video","job":"scene","line":"A 9-second film for an invented brand that uses each runtime call once: a word-by-word headline with an accent on the arriving word, a carried dot, a typed prompt with cursor and press, a count-up, a wordmark close. Its own comment says it is a mechanics demo, not a model film.","path":"examples/demo/index.html","use":"node scripts/render.mjs examples/demo/index.html out.mp4 ; or open the page and call window.__seek(seconds). ?selftest runs the seek check.","preview":{"poster":"assets/asset-library/motionmaxxing-demo-film-sheet.jpg","w":1280,"h":480},"takes":{"how":"tokens","what":["colors","type"],"line":"The same six custom properties as the film template, in one :root block at the top of examples/demo/index.html: --ground, --ground-2, --ink, --ink-soft, --accent, --font.","read":true}},{"id":"motionmaxxing/example-3d-hero","name":"examples/3d-hero","kind":"three","job":"3d","line":"A 6-second film with one real 3D object: an extruded ring logo and a dot under studio light with a ground shadow, HTML type over it, all on the film clock.","path":"examples/3d-hero/index.html","use":"node scripts/render.mjs examples/3d-hero/index.html --still 1.2,3 stills  (needs a local server or Chrome's file-access flag; render.mjs sets it)","needs":"WebGL; slow in software GL","preview":{"poster":"assets/asset-library/motionmaxxing-hero3d.jpg","w":1280,"h":720}},{"id":"motionmaxxing/example-phone","name":"examples/phone","kind":"html-video","job":"scene","line":"A 6-second lock-screen scene built with the native-ui kit: a notification rolls up and the camera pushes to a macro on it. Invented apps and people.","path":"examples/phone/index.html","use":"node scripts/render.mjs examples/phone/index.html out.mp4","takes":{"how":"edit the file","what":["colors"],"line":"No custom properties: about 11 hex colors are written in examples/phone/index.html.","read":false}},{"id":"motionmaxxing/example-selftest","name":"examples/selftest (runtime regression page)","kind":"html-video","job":"review","line":"A test page for the runtime itself: visibility tracks, per-word options, multi-line typing, origin claims, keyframe steps. It must print PASS twice.","path":"examples/selftest/index.html","use":"Open examples/selftest/index.html?selftest and read window.__seekcheck and window.__asserts."},{"id":"motionmaxxing/motion-runtime","name":"motion.js (seek-safe GSAP runtime)","kind":"html-video","job":"render","line":"One plain script on top of GSAP, no build step, one global called Motion. You author in frames; it builds a single paused GSAP timeline and exposes window.__seek(t), so any frame can be jumped to and equals the frame you would reach by playing. Calls: film, kf, show, hide, cut, enter, exit, words, type, cursor, press, camera, snap, whip, dive, drift, count, cascade, wrap, mark, selfTest. 42 KB.","path":"runtime/motion.js","use":"<script src=\"./runtime/vendor/gsap.min.js\"></script><script src=\"./runtime/motion.js\"></script>; const M = Motion.film({ fps: 30, duration: 15, width: 1920, height: 1080 }); M.words('#headline', { at: 2, mech: 'rise' });","needs":"GSAP (the bundled copy is 3.12.5 under GreenSock's own license; take GSAP from gsap.com or npm rather than from this repo)"},{"id":"motionmaxxing/hero3d","name":"hero3d (3D hero object)","kind":"three","job":"3d","line":"A three.js layer on the same clock for one physical hero: a logo extruded from SVG paths, extruded text, a coin, a glass slab, a phone or a glTF, with studio or room lighting, a ground shadow, bloom and depth of field. Every frame is reset to base and redrawn from a pure function of time.","path":"runtime/hero3d/hero3d.js","use":"const hero = M.hero3d('#gl', { envMap: 'studio', objects: [{ id: 'mark', kind: 'logo', svg: PATH_D, depth: .12, material: 'satin' }], state: (t, objs, { key }) => ({ objects: { mark: { rotation: key(t, [[0,[.6,-1.7,.2]],[1.5,[.1,-.36,0],'snapSettle']]) } } }) });","needs":"WebGL; bundled three.js r186 and opentype.js (both MIT) and Inter (OFL)"},{"id":"motionmaxxing/native-ui","name":"native-ui (phone and notification builders)","kind":"html-video","job":"frame","line":"Builders that return HTML for a true-proportion phone, status bar, lock screen, notifications, banner, list, tab bar and app icon, plus two motion helpers: arrive (a notification rolls in and pushes its neighbors) and macro (camera push onto one element). For when a product's real screen cannot be captured.","path":"runtime/native-ui/native-ui.js","use":"ui.innerHTML = NativeUI.phone(NativeUI.lockScreen({ time: '7:52', notifs: [{ icon, title, time: 'now', body }] })); NativeUI.arrive(M, '#ui .nu-notif:last-child', { at: 18, dir: 'up' });","needs":"Motion.js. It draws a phone in the style of iOS: fine as an illustration, say so in the film's note."},{"id":"motionmaxxing/runtime-m-words","name":"M.words","kind":"gsap","job":"move","line":"Builds a line word by word at speech rhythm: rise, slide, pop, shrink or focus, with per-word gaps, a short smear and an accent color on the arriving word that settles to ink. Words are never split into letters.","path":"runtime/motion.js","use":"M.words('#headline', { at: 2, mech: 'rise', gaps: [5,4,7], dist: 84, frames: 13, accent: { color: '#F2542D', word: -1 } })","preview":{"poster":"assets/asset-library/motionmaxxing-words-rise.jpg","w":1280,"h":720}},{"id":"motionmaxxing/runtime-m-type","name":"M.type","kind":"gsap","job":"code","line":"Types text into a field with a seeded human rhythm (prompt, compose or fast), a caret that follows in two dimensions, and syntax-colored spans kept intact. Meant for the product's own input, not for headlines.","path":"runtime/motion.js","use":"M.type('#prompt', { at: 74, style: 'prompt', seed: 5, caret: '#caret' })","preview":{"poster":"assets/asset-library/motionmaxxing-type-cursor.jpg","w":1280,"h":720}},{"id":"motionmaxxing/runtime-m-cursor","name":"M.cursor and M.press","kind":"gsap","job":"move","line":"A cursor that enters oversized, parks, then presses: the cursor squashes for 2-3 frames and the target answers a frame later.","path":"runtime/motion.js","use":"M.cursor('#cursor', { keys: [[96,2050,1260,3.4,-28],[121,1498,548,1,0]] }); M.press('#cursor', '#send', { at: 127, lag: 1, frames: 3 })"},{"id":"motionmaxxing/runtime-m-count","name":"M.count","kind":"gsap","job":"number","line":"A counter that shows one value per frame with steps that shrink, lands exactly on the target, and uses tabular numerals; digits are never eased.","path":"runtime/motion.js","use":"M.count('#num', { at: 130, from: 0, to: 10000, frames: 23, format: 'comma' })","preview":{"poster":"assets/asset-library/motionmaxxing-count.jpg","w":1280,"h":720}},{"id":"motionmaxxing/runtime-m-enter","name":"M.enter and M.exit","kind":"gsap","job":"move","line":"Entry and exit with a start or end pose and a directional smear that is strongest on the first (entry) or last (exit) frame.","path":"runtime/motion.js","use":"M.enter('#panel', { at: 66, frames: 12, ease: 'softLand', from: { y: 46, scale: .93 }, smear: { axis: 'y', px: 30, frames: 3 } })"},{"id":"motionmaxxing/runtime-m-camera","name":"M.camera, M.snap, M.whip, M.dive, M.drift","kind":"gsap","job":"move","line":"Five camera moves on a wrapper element: keyframed camera, a snap that covers most of its distance in one frame then tails off, a whip pan with smear, a constant-rate dive zoom, and a linear drift that keeps a held frame alive.","path":"runtime/motion.js","use":"M.snap('#cam', { at: 157, from: { scale: 2 }, to: { scale: 1 }, firstFrameShare: .6, tail: 15 }); M.dive('#cam', { at: 130, frames: 9, perStep: 1.6 })"},{"id":"motionmaxxing/runtime-m-kf","name":"M.kf, M.show, M.hide, M.cut","kind":"gsap","job":"move","line":"Frame-numbered keyframes on any property, hard show/hide, and a cut that swaps scenes on one frame and records the cut for the sound mix.","path":"runtime/motion.js","use":"M.kf('#box', 'x', [[0,0],[30,400,'whip'],[60,0,'accelExit']]); M.cut(66, { hide: ['#sceneA'], show: ['#sceneB'] })"},{"id":"motionmaxxing/runtime-m-cascade","name":"M.cascade","kind":"gsap","job":"move","line":"Runs one move across several elements with chosen frame gaps and returns the onset frames.","path":"runtime/motion.js","use":"M.cascade(['#a','#b','#c'], { at: 50, gaps: [3,2], fn: (el, frame) => M.enter(el, { at: frame, from: { y: 40 } }) })"},{"id":"motionmaxxing/runtime-motion-selftest","name":"Motion.selfTest","kind":"gsap","job":"review","line":"Proves a film is seek-safe: plays every frame in order, then jumps to random frames and compares every element's style, transform and text, and the pixels of every canvas.","path":"runtime/motion.js","use":"Motion.selfTest(M, { samples: 24 })  // or open the page with ?selftest"},{"id":"motionmaxxing/ease-cruise","name":"M.ease.cruise","kind":"gsap","job":"move","line":"Measured ease: linear; 9 frames typical; 18% of measured moves. Used for fades, drift, camera creep, counters, anything ambient.","path":"","use":"M.enter(el, { ease: 'cruise' })  or pass M.ease.cruise anywhere GSAP takes an ease function. To rebuild elsewhere, sample the function at 10/25/50/75% from the table in references/motion.md."},{"id":"motionmaxxing/ease-glide","name":"M.ease.glide","kind":"gsap","job":"move","line":"Measured ease: gentle ease-out (about sine.out); 10 frames; 14%. Used for all-purpose medium lands, camera pushes, press-down.","path":"","use":"M.enter(el, { ease: 'glide' })  or pass M.ease.glide anywhere GSAP takes an ease function. To rebuild elsewhere, sample the function at 10/25/50/75% from the table in references/motion.md."},{"id":"motionmaxxing/ease-softinout","name":"M.ease.softInOut","kind":"gsap","job":"move","line":"Measured ease: S-curve; 9 frames; 14%. Used for opacity and blur ramps, ground and color changes, a number tied to a handle.","path":"","use":"M.enter(el, { ease: 'softInOut' })  or pass M.ease.softInOut anywhere GSAP takes an ease function. To rebuild elsewhere, sample the function at 10/25/50/75% from the table in references/motion.md."},{"id":"motionmaxxing/ease-softland","name":"M.ease.softLand","kind":"gsap","job":"move","line":"Measured ease: strong ease-out (about power 3); 12 frames; 9%. Used for the workhorse entry: text rises, panels slide, scale-ins.","path":"","use":"M.enter(el, { ease: 'softLand' })  or pass M.ease.softLand anywhere GSAP takes an ease function. To rebuild elsewhere, sample the function at 10/25/50/75% from the table in references/motion.md."},{"id":"motionmaxxing/ease-gentlein","name":"M.ease.gentleIn","kind":"gsap","job":"move","line":"Measured ease: ease-in (about power 2); 9 frames; 9%. Used for exits, blur-out and fade-out starts, slow push-ins that run into a cut.","path":"","use":"M.enter(el, { ease: 'gentleIn' })  or pass M.ease.gentleIn anywhere GSAP takes an ease function. To rebuild elsewhere, sample the function at 10/25/50/75% from the table in references/motion.md."},{"id":"motionmaxxing/ease-snapsettle","name":"M.ease.snapSettle","kind":"gsap","job":"move","line":"Measured ease: 54% done at a tenth of the time, then a long soft tail; 11 frames; 6%. Used for hero entries, logo crash-ins, card landings inside a call to action.","path":"","use":"M.enter(el, { ease: 'snapSettle' })  or pass M.ease.snapSettle anywhere GSAP takes an ease function. To rebuild elsewhere, sample the function at 10/25/50/75% from the table in references/motion.md."},{"id":"motionmaxxing/ease-whip","name":"M.ease.whip","kind":"gsap","job":"move","line":"Measured ease: fast out (about power 2.5); 7-8 frames for a true whip; 6%. Used for big fast moves and the arriving half of a whip pan.","path":"","use":"M.enter(el, { ease: 'whip' })  or pass M.ease.whip anywhere GSAP takes an ease function. To rebuild elsewhere, sample the function at 10/25/50/75% from the table in references/motion.md."},{"id":"motionmaxxing/ease-accelexit","name":"M.ease.accelExit","kind":"gsap","job":"move","line":"Measured ease: ease-in (about power 2.6), fastest near the end; 13 frames; 5%. Used for the leaving curve: scale exits, pans off frame, the departing half of a whip.","path":"","use":"M.enter(el, { ease: 'accelExit' })  or pass M.ease.accelExit anywhere GSAP takes an ease function. To rebuild elsewhere, sample the function at 10/25/50/75% from the table in references/motion.md."},{"id":"motionmaxxing/ease-crashout","name":"M.ease.crashOut","kind":"gsap","job":"move","line":"Measured ease: ease-in (power 4) that ends at full speed; 17 frames; 4%. Used for camera pull-offs and exits that end on a hard cut.","path":"","use":"M.enter(el, { ease: 'crashOut' })  or pass M.ease.crashOut anywhere GSAP takes an ease function. To rebuild elsewhere, sample the function at 10/25/50/75% from the table in references/motion.md."},{"id":"motionmaxxing/ease-popover","name":"M.ease.popOver","kind":"gsap","job":"move","line":"Measured ease: late lean past the mark, peak 1.08 at 72% of the time; 15 frames; 2%. Used for release after a press, a one-off physical reward.","path":"","use":"M.enter(el, { ease: 'popOver' })  or pass M.ease.popOver anywhere GSAP takes an ease function. To rebuild elsewhere, sample the function at 10/25/50/75% from the table in references/motion.md."},{"id":"motionmaxxing/ease-crashin","name":"M.ease.crashIn","kind":"gsap","job":"move","line":"Measured ease: slam: touches the mark almost at once, peak 1.18 at 27%, relaxes back; 10 frames; 1%. Used for drops that should punch past the mark.","path":"","use":"M.enter(el, { ease: 'crashIn' })  or pass M.ease.crashIn anywhere GSAP takes an ease function. To rebuild elsewhere, sample the function at 10/25/50/75% from the table in references/motion.md."},{"id":"motionmaxxing/ease-bouncehard","name":"M.ease.bounceHard","kind":"gsap","job":"move","line":"Measured ease: big overshoot, peak 1.48; 22 frames; under 1%. Used for rare pops and rotations; the skill says use sparingly.","path":"","use":"M.enter(el, { ease: 'bounceHard' })  or pass M.ease.bounceHard anywhere GSAP takes an ease function. To rebuild elsewhere, sample the function at 10/25/50/75% from the table in references/motion.md."},{"id":"motionmaxxing/transition-t1","name":"T1. Hard cut on motion","kind":"shot-recipe","job":"transition","line":"The cut lands mid-move at peak speed, never on a settled frame. Written as what, mechanics with measured frame numbers, when to use and when it fails.","path":"references/transitions.md","use":"Read section T1 in references/transitions.md; build it with M.cut, M.kf, M.whip, M.dive or M.enter/M.exit. The section 3 table picks a transition by what changes."},{"id":"motionmaxxing/transition-t2","name":"T2. Carried-object match cut","kind":"shot-recipe","job":"transition","line":"The same object sits at the same place and pose on both sides of the cut. Written as what, mechanics with measured frame numbers, when to use and when it fails.","path":"references/transitions.md","use":"Read section T2 in references/transitions.md; build it with M.cut, M.kf, M.whip, M.dive or M.enter/M.exit. The section 3 table picks a transition by what changes."},{"id":"motionmaxxing/transition-t3","name":"T3. The effect becomes the next scene","kind":"shot-recipe","job":"transition","line":"The thing that finishes scene A (a burst, a growing shape) is the ground of scene B. Written as what, mechanics with measured frame numbers, when to use and when it fails.","path":"references/transitions.md","use":"Read section T3 in references/transitions.md; build it with M.cut, M.kf, M.whip, M.dive or M.enter/M.exit. The section 3 table picks a transition by what changes."},{"id":"motionmaxxing/transition-t4","name":"T4. Container replacement","kind":"shot-recipe","job":"transition","line":"The old bar, card or pill contracts and a new container takes its slot at full size. Written as what, mechanics with measured frame numbers, when to use and when it fails.","path":"references/transitions.md","use":"Read section T4 in references/transitions.md; build it with M.cut, M.kf, M.whip, M.dive or M.enter/M.exit. The section 3 table picks a transition by what changes."},{"id":"motionmaxxing/transition-t5","name":"T5. Grey/flat dip hiding a theme flip","kind":"shot-recipe","job":"transition","line":"A four-frame wash to one flat gray frame hides a light-to-dark flip and a magnification. Written as what, mechanics with measured frame numbers, when to use and when it fails.","path":"references/transitions.md","use":"Read section T5 in references/transitions.md; build it with M.cut, M.kf, M.whip, M.dive or M.enter/M.exit. The section 3 table picks a transition by what changes."},{"id":"motionmaxxing/transition-t6","name":"T6. Blur-matched cut","kind":"shot-recipe","job":"transition","line":"The exit ends blurred and the entrance starts more blurred, so the cut vanishes in defocus. Written as what, mechanics with measured frame numbers, when to use and when it fails.","path":"references/transitions.md","use":"Read section T6 in references/transitions.md; build it with M.cut, M.kf, M.whip, M.dive or M.enter/M.exit. The section 3 table picks a transition by what changes."},{"id":"motionmaxxing/transition-t7","name":"T7. Wipe that starts in A and finishes in B","kind":"shot-recipe","job":"transition","line":"A band begun at the end of one scene completes in the first frames of the next. Written as what, mechanics with measured frame numbers, when to use and when it fails.","path":"references/transitions.md","use":"Read section T7 in references/transitions.md; build it with M.cut, M.kf, M.whip, M.dive or M.enter/M.exit. The section 3 table picks a transition by what changes."},{"id":"motionmaxxing/transition-t8","name":"T8. Mask / clip-edge wipe through glyphs","kind":"shot-recipe","job":"transition","line":"A clip edge sweeps through text so lines erase and reveal mid-letter, with no crossfade. Written as what, mechanics with measured frame numbers, when to use and when it fails.","path":"references/transitions.md","use":"Read section T8 in references/transitions.md; build it with M.cut, M.kf, M.whip, M.dive or M.enter/M.exit. The section 3 table picks a transition by what changes."},{"id":"motionmaxxing/transition-t9","name":"T9. Stair / block wipe in screen-grid steps","kind":"shot-recipe","job":"transition","line":"A wipe whose front advances in whole grid jumps with no in-between. Written as what, mechanics with measured frame numbers, when to use and when it fails.","path":"references/transitions.md","use":"Read section T9 in references/transitions.md; build it with M.cut, M.kf, M.whip, M.dive or M.enter/M.exit. The section 3 table picks a transition by what changes."},{"id":"motionmaxxing/transition-t10","name":"T10. Pixel / mosaic dissolve with stepped coverage","kind":"shot-recipe","job":"transition","line":"A field of hard-edged cells dissolves or resolves in steps; opacity is not used. Written as what, mechanics with measured frame numbers, when to use and when it fails.","path":"references/transitions.md","use":"Read section T10 in references/transitions.md; build it with M.cut, M.kf, M.whip, M.dive or M.enter/M.exit. The section 3 table picks a transition by what changes."},{"id":"motionmaxxing/transition-t11","name":"T11. Zoom-through / dive into a logo detail","kind":"shot-recipe","job":"transition","line":"The camera scales into one detail of the logo at a constant rate until it becomes the next surface. Written as what, mechanics with measured frame numbers, when to use and when it fails.","path":"references/transitions.md","use":"Read section T11 in references/transitions.md; build it with M.cut, M.kf, M.whip, M.dive or M.enter/M.exit. The section 3 table picks a transition by what changes."},{"id":"motionmaxxing/transition-t12","name":"T12. Pull-back reveal with snap","kind":"shot-recipe","job":"transition","line":"The product is shown as one magnified fragment, then revealed by pulling back. Written as what, mechanics with measured frame numbers, when to use and when it fails.","path":"references/transitions.md","use":"Read section T12 in references/transitions.md; build it with M.cut, M.kf, M.whip, M.dive or M.enter/M.exit. The section 3 table picks a transition by what changes."},{"id":"motionmaxxing/transition-t13","name":"T13. Whip pan with content changing during the whip","kind":"shot-recipe","job":"transition","line":"A fast pan in which the old content leaves and the new arrives inside the move. Written as what, mechanics with measured frame numbers, when to use and when it fails.","path":"references/transitions.md","use":"Read section T13 in references/transitions.md; build it with M.cut, M.kf, M.whip, M.dive or M.enter/M.exit. The section 3 table picks a transition by what changes."},{"id":"motionmaxxing/transition-t14","name":"T14. Scale cut","kind":"shot-recipe","job":"transition","line":"Scale changes in one frame, not by a zoom tween, ideally with a content change on the same frame. Written as what, mechanics with measured frame numbers, when to use and when it fails.","path":"references/transitions.md","use":"Read section T14 in references/transitions.md; build it with M.cut, M.kf, M.whip, M.dive or M.enter/M.exit. The section 3 table picks a transition by what changes."},{"id":"motionmaxxing/transition-t15","name":"T15. Ground flips by act (dark / light)","kind":"shot-recipe","job":"transition","line":"The ground inverts at an act boundary, always caused by an object or hidden in motion. Written as what, mechanics with measured frame numbers, when to use and when it fails.","path":"references/transitions.md","use":"Read section T15 in references/transitions.md; build it with M.cut, M.kf, M.whip, M.dive or M.enter/M.exit. The section 3 table picks a transition by what changes."},{"id":"motionmaxxing/transition-t16","name":"T16. Localized glitch rectangles as a bridge","kind":"shot-recipe","job":"transition","line":"A few black static rectangles over part of the frame for six frames or fewer bridge a hard cut. Written as what, mechanics with measured frame numbers, when to use and when it fails.","path":"references/transitions.md","use":"Read section T16 in references/transitions.md; build it with M.cut, M.kf, M.whip, M.dive or M.enter/M.exit. The section 3 table picks a transition by what changes."},{"id":"motionmaxxing/transition-t17","name":"T17. Occlusion","kind":"shot-recipe","job":"transition","line":"A rising or sliding surface covers the old content; nothing fades. Written as what, mechanics with measured frame numbers, when to use and when it fails.","path":"references/transitions.md","use":"Read section T17 in references/transitions.md; build it with M.cut, M.kf, M.whip, M.dive or M.enter/M.exit. The section 3 table picks a transition by what changes."},{"id":"motionmaxxing/transition-t18","name":"T18. One-frame double exposure and carry-over ghosts","kind":"shot-recipe","job":"transition","line":"One to three frames where both scenes coexist, or a one-frame ghost carries across. Written as what, mechanics with measured frame numbers, when to use and when it fails.","path":"references/transitions.md","use":"Read section T18 in references/transitions.md; build it with M.cut, M.kf, M.whip, M.dive or M.enter/M.exit. The section 3 table picks a transition by what changes."},{"id":"motionmaxxing/transition-t19","name":"T19. Hard replacement of a word or line","kind":"shot-recipe","job":"transition","line":"Text is swapped without a transition, words dropped or added on single frames. Written as what, mechanics with measured frame numbers, when to use and when it fails.","path":"references/transitions.md","use":"Read section T19 in references/transitions.md; build it with M.cut, M.kf, M.whip, M.dive or M.enter/M.exit. The section 3 table picks a transition by what changes."},{"id":"motionmaxxing/transition-t20","name":"T20. Strobe / reel flip","kind":"shot-recipe","job":"transition","line":"Many plates flip on a rhythm (about 15 a second) to read as range or volume. Written as what, mechanics with measured frame numbers, when to use and when it fails.","path":"references/transitions.md","use":"Read section T20 in references/transitions.md; build it with M.cut, M.kf, M.whip, M.dive or M.enter/M.exit. The section 3 table picks a transition by what changes."},{"id":"motionmaxxing/close-c1","name":"C1. Wordmark crash-in, then perpetual contraction","kind":"shot-recipe","job":"end card","line":"The name slams in oversized, settles, then keeps shrinking slowly so the end frame is never dead. Carries a warning: on near-black with a glow it is the look models reach for to seem expensive.","path":"references/close.md","use":"Read section C1 in references/close.md (build, scale and timing numbers). Section 3 picks a close by brand personality; the skill caps a resolved end hold at 0.6-1.4 s."},{"id":"motionmaxxing/close-c2","name":"C2. Logo built from parts","kind":"shot-recipe","job":"end card","line":"The mark assembles from pieces of the film. Carries a warning that this ending is a default in generated films.","path":"references/close.md","use":"Read section C2 in references/close.md (build, scale and timing numbers). Section 3 picks a close by brand personality; the skill caps a resolved end hold at 0.6-1.4 s."},{"id":"motionmaxxing/close-c3","name":"C3. Emblem enters oversized and blurred","kind":"shot-recipe","job":"end card","line":"The emblem arrives large and soft and halves its excess every two frames.","path":"references/close.md","use":"Read section C3 in references/close.md (build, scale and timing numbers). Section 3 picks a close by brand personality; the skill caps a resolved end hold at 0.6-1.4 s."},{"id":"motionmaxxing/close-c4","name":"C4. Icon on white, settling from 1.86x","kind":"shot-recipe","job":"end card","line":"A hard cut to white and a shape mark that settles from 1.86 times its size; for a mark that is a pure shape, after a dark scene.","path":"references/close.md","use":"Read section C4 in references/close.md (build, scale and timing numbers). Section 3 picks a close by brand personality; the skill caps a resolved end hold at 0.6-1.4 s."},{"id":"motionmaxxing/close-c5","name":"C5. Mosaic / pixel dissolve into the mark","kind":"shot-recipe","job":"end card","line":"A field of squares resolves into the mark; only when the texture is truly the brand's.","path":"references/close.md","use":"Read section C5 in references/close.md (build, scale and timing numbers). Section 3 picks a close by brand personality; the skill caps a resolved end hold at 0.6-1.4 s."},{"id":"motionmaxxing/close-c6","name":"C6. Logo morph from a previous identity","kind":"shot-recipe","job":"end card","line":"A per-letter flip from an old name to a new one in about a second; for a rename or rebrand.","path":"references/close.md","use":"Read section C6 in references/close.md (build, scale and timing numbers). Section 3 picks a close by brand personality; the skill caps a resolved end hold at 0.6-1.4 s."},{"id":"motionmaxxing/close-c7","name":"C7. Dive into the logo to enter the product","kind":"shot-recipe","job":"end card","line":"The camera dives into a feature of the logo that becomes a container, such as an underscore that becomes an input.","path":"references/close.md","use":"Read section C7 in references/close.md (build, scale and timing numbers). Section 3 picks a close by brand personality; the skill caps a resolved end hold at 0.6-1.4 s."},{"id":"motionmaxxing/close-c8","name":"C8. Button click, cut before release","kind":"shot-recipe","job":"end card","line":"The cursor presses the product's own control and the film cuts at maximum compression. Warns against a logo plus a download pill, which is a web footer.","path":"references/close.md","use":"Read section C8 in references/close.md (build, scale and timing numbers). Section 3 picks a close by brand personality; the skill caps a resolved end hold at 0.6-1.4 s."},{"id":"motionmaxxing/close-c9","name":"C9. Typed CTA prompt, cut before send","kind":"shot-recipe","job":"end card","line":"A prompt line is typed with a human rhythm and the film cuts before it is sent, handing the action to the viewer.","path":"references/close.md","use":"Read section C9 in references/close.md (build, scale and timing numbers). Section 3 picks a close by brand personality; the skill caps a resolved end hold at 0.6-1.4 s."},{"id":"motionmaxxing/close-c10","name":"C10. CTA words focusing in place","kind":"shot-recipe","job":"end card","line":"The last words come into focus where they stand, beside a mark built from a character; quiet energy for playful brands.","path":"references/close.md","use":"Read section C10 in references/close.md (build, scale and timing numbers). Section 3 picks a close by brand personality; the skill caps a resolved end hold at 0.6-1.4 s."},{"id":"motionmaxxing/ui-recipe-a","name":"UI demo recipe A: prompt, send, agent result","kind":"shot-recipe","job":"scene","line":"A frame-by-frame timeline at 30 fps for a product demo beat: prompt, send, agent result; about 205 frames (6.8 s). Only when the product is typed into. The file calls these mechanics, not a default film.","path":"references/ui-demo.md","use":"Read Recipe A; build with M.cursor, M.press, M.type, M.count and M.cascade."},{"id":"motionmaxxing/ui-recipe-b","name":"UI demo recipe B: toggle, cascade, claim","kind":"shot-recipe","job":"scene","line":"A frame-by-frame timeline at 30 fps for a product demo beat: toggle, cascade, claim; about 175 frames (5.8 s). The file calls these mechanics, not a default film.","path":"references/ui-demo.md","use":"Read Recipe B; build with M.cursor, M.press, M.type, M.count and M.cascade."},{"id":"motionmaxxing/ui-recipe-c","name":"UI demo recipe C: drag, drop, output cascade, headline","kind":"shot-recipe","job":"scene","line":"A frame-by-frame timeline at 30 fps for a product demo beat: drag, drop, output cascade, headline; about 135 frames (4.5 s). The file calls these mechanics, not a default film.","path":"references/ui-demo.md","use":"Read Recipe C; build with M.cursor, M.press, M.type, M.count and M.cascade."},{"id":"motionmaxxing/ui-recipe-d","name":"UI demo recipe D: checklist, reveal","kind":"shot-recipe","job":"scene","line":"A frame-by-frame timeline at 30 fps for a product demo beat: checklist, reveal; about 165 frames (5.5 s). The file calls these mechanics, not a default film.","path":"references/ui-demo.md","use":"Read Recipe D; build with M.cursor, M.press, M.type, M.count and M.cascade."},{"id":"motionmaxxing/ui-recipe-e","name":"UI demo recipe E: select from a carousel, commit into a form","kind":"shot-recipe","job":"scene","line":"A frame-by-frame timeline at 30 fps for a product demo beat: select from a carousel, commit into a form; about 270 frames (9 s), two clips. The file calls these mechanics, not a default film.","path":"references/ui-demo.md","use":"Read Recipe E; build with M.cursor, M.press, M.type, M.count and M.cascade."},{"id":"motionmaxxing/script-providers","name":"providers.sh","kind":"tool","job":"plan","line":"Reports what the machine has as JSON: Chrome, ffmpeg and its filters, an ElevenLabs key, Codex image generation, free disk. Installs nothing.","path":"scripts/providers.sh","use":"bash scripts/providers.sh"},{"id":"motionmaxxing/script-brand","name":"brand.mjs","kind":"tool","job":"plan","line":"Captures a website's brand through headless Chrome: colors with guessed roles, fonts, logo, copy, screenshots and media, plus a board image to check by eye.","path":"scripts/brand.mjs","use":"node scripts/brand.mjs https://site.com film/brand","needs":"Chrome. Fetches the site you name."},{"id":"motionmaxxing/script-fetch-logo","name":"fetch_logo.mjs","kind":"tool","job":"logo","line":"Fetches an official logo as SVG from SVGL, then Simple Icons, then the site itself; never redraws or recolors one. Known to return a header strip instead of the mark sometimes.","path":"scripts/fetch_logo.mjs","use":"node scripts/fetch_logo.mjs \"<brand name>\" <domain> --out film/assets/logo","needs":"Contacts api.svgl.app and cdn.jsdelivr.net. The logos it fetches belong to their owners."},{"id":"motionmaxxing/script-precedent","name":"precedent.py","kind":"tool","job":"plan","line":"Looks up rule-only precedent for a beat from library/moments.jsonl by role, content and text.","path":"scripts/precedent.py","use":"python3 scripts/precedent.py query --beat proof --content ui --text \"...\" --k 6"},{"id":"motionmaxxing/script-imagegen","name":"imagegen.py","kind":"tool","job":"ground","line":"Makes background surface plates through the Codex CLI's image tool, with a guard that refuses prompts for text, logos, UI, charts, people or faces. The guard reads the prompt, not the picture.","path":"scripts/imagegen.py","use":"python3 scripts/imagegen.py plates.json --out film/assets/gen --dry-run","needs":"The Codex CLI signed in with image generation on (a paid account)."},{"id":"motionmaxxing/script-voice","name":"voice.py","kind":"tool","job":"voice","line":"Voice-over, sound effects and music through ElevenLabs, with word timings refined against the audio, line splitting, music length repair and a normalizer.","path":"scripts/voice.py","use":"python3 scripts/voice.py vo --script film/vo.txt --out film/audio/vo.mp3","needs":"ELEVENLABS_API_KEY (paid service). Sends the script text to api.elevenlabs.io. vo-local uses the macOS say command instead."},{"id":"motionmaxxing/script-sync","name":"sync.mjs","kind":"tool","job":"edit","line":"Turns word timings into a frame table: when each word is heard and the frame its on-screen word should land (2 frames early).","path":"scripts/sync.mjs","use":"node scripts/sync.mjs film/audio/vo.words.json --fps 30 --lead 2 --out film/beats.json"},{"id":"motionmaxxing/script-mix","name":"mix.py","kind":"tool","job":"audio","line":"Mixes voice, music and placed hits to one stereo file at -14 LUFS and -1 dBTP with predictable ducking.","path":"scripts/mix.py","use":"python3 scripts/mix.py --duration 16 --vo clip@t --music m.wav --events film/events.json --out mix.wav","needs":"Ffmpeg"},{"id":"motionmaxxing/script-render","name":"render.mjs","kind":"tool","job":"render","line":"Renders any page that exposes window.__seek to MP4 or PNG stills, frame by frame, through Chrome's DevTools protocol and ffmpeg. Options for a time range, half-scale drafts, shutter blur by averaging sub-frames, and seeded grain. Writes the film's cut and event list beside the video.","path":"scripts/render.mjs","use":"node scripts/render.mjs film/index.html film/final.mp4 --audio film/audio/mix.wav [--shutter 180 --subframes 8] [--grain 0.03]","needs":"Google Chrome or Chromium, ffmpeg, Node 22"},{"id":"motionmaxxing/script-look","name":"look.py","kind":"tool","job":"review","line":"Inspects a rendered film: contact sheet, cut list, frames just before each cut, an audio audit, and gates G0 (render exists and moves), G2 (no run of more than 3 flat frames) and G3 (end hold 1.4 s or less, last shot a quarter of the film or less). Prints a motion figure against a human band as a question, not a gate.","path":"scripts/look.py","use":"python3 scripts/look.py film/final.mp4 --out film/look --expect 16 --expect-audio","needs":"Ffmpeg, Python 3.9+. Works on any MP4, not only this skill's films."},{"id":"motionmaxxing/script-lint","name":"lint.mjs","kind":"tool","job":"review","line":"The page-chrome lint, gate G5: loads the film's HTML and fails corner labels, tracked-caps labels, counters, timecodes, header or footer bars, a kicker over a headline, a left headline block beside media, progress bars, letter-typed headlines and generic UI cards. Cannot see text inside a canvas, image or video.","path":"scripts/lint.mjs","use":"node scripts/lint.mjs film/index.html [--times 0.5,2,4] [--json]","needs":"Chrome. Reads HTML only, so it cannot check a Remotion render."},{"id":"motionmaxxing/script-blind-review","name":"blind_review.py","kind":"tool","job":"review","line":"Builds a local page for choosing between two or more versions blind: random left/right, synced play, frame step, a pick and notes, with the key hidden.","path":"scripts/blind_review.py","use":"python3 scripts/blind_review.py film/review --round \"before vs after\" a.mp4 b.mp4"},{"id":"motionmaxxing/hero-banner","name":"docs/hero (README banner source)","kind":"html-video","job":"title","line":"The source page of the README's animated banner: type and vector only, made with the runtime, with a note on how it was made and checked.","path":"docs/hero/index.html","use":"node scripts/render.mjs docs/hero/index.html out.mp4"},{"id":"motionmaxxing/vendor-gsap","name":"GSAP 3.12.5 (bundled copy)","kind":"gsap","job":"move","line":"A minified copy of GSAP 3.12.5 that the runtime loads. The NOTICE says it is not under this repo's Apache license: 'Copyright 2024 GreenSock. All rights reserved', under GreenSock's Standard 'No Charge' license.","path":"runtime/vendor/gsap.min.js","use":"","look_only":true},{"id":"motionmaxxing/vendor-three","name":"three.js r186 and addons (bundled)","kind":"three","job":"3d","line":"The three.js module build and stock example add-ons (loaders, post-processing passes, RoundedBox and Text geometry), edited only to import three by relative path. MIT, with BSD-3-Clause notices kept inside EXRLoader.js and MIT notices for svg-numbers and fflate.","path":"runtime/hero3d/vendor","use":"Reusable under MIT; keep runtime/hero3d/vendor/three.LICENSE with it. Better taken from the three package itself."},{"id":"motionmaxxing/vendor-opentype","name":"opentype.js 1.3.4 (bundled)","kind":"three","job":"3d","line":"Font parser used to extrude 3D text. MIT (Frederik De Bleser and contributors); bundles tiny-inflate and a codePointAt polyfill, both MIT.","path":"runtime/hero3d/vendor/opentype.module.js","use":"Reusable under MIT; keep opentype.LICENSE with it."},{"id":"motionmaxxing/vendor-inter","name":"Inter font files (bundled)","kind":"skill","job":"title","line":"Inter variable (woff2) and Inter Bold Latin (ttf). SIL Open Font License 1.1: may be used, embedded and passed on, not sold alone, and a changed font may not use the name Inter.","path":"runtime/fonts","use":"Reusable under the OFL; keep OFL.txt with the files."},{"id":"motionmaxxing/showcase-media","name":"showcase comparisons (Cluely, Spotify, Wispr Flow)","kind":"skill","job":"review","line":"Three before/after films, GIFs and posters that put other companies' brands on screen to show the difference the skill makes. The NOTICE says the brands belong to their owners and the demonstrations are unofficial. 20 MB.","path":"docs/media","use":"","look_only":true}]},{"id":"mcp-for-blender","name":"MCP for Blender","repo":"ahujasid/mcp-for-blender","url":"https://github.com/ahujasid/mcp-for-blender","commit":"2e4b0bc294694b1570d76ed01be657c22e6d02a0","commit_date":"2026-11-04","licence":{"name":"MIT, plus a separate terms file for data collection","basis":"LICENSE file, 'Copyright (c) 2025 Siddharth Ahuja'; pyproject.toml says license = \"MIT\"; the README badge says MIT; addon.py's first line reads 'Code created by Siddharth Ahuja ... (c) 2025'","note":"That covers the code. A separate terms file covers data collection."},"kind":"tool","line":"A server and a Blender add-on that let an AI agent drive your open Blender: it writes and runs Python in it, looks at the result, pulls in library assets and can call paid 3D model generators.","look_only":false,"get":{"command":"claude mcp add blender uvx mcp-for-blender","note":"Then uvx mcp-for-blender install-addon, enable \"Interface: MCP for Blender\" in Blender's add-on preferences, and press Start MCP Server in the 3D view's sidebar. Its README also offers a one-line installer piped from its website. Read that script before you run it."},"needs":"Blender 3.0 or newer, open with a window. Python 3.10 and uv. No key for the core tools or Poly Haven. The model generators need paid keys.","sends":"By default it posts a row to the author's database on every tool call: a random install ID, the tool's name, version numbers and your operating system. The repo's switch for that is DISABLE_TELEMETRY=true. If you opt in to telemetry it also sends your prompts, the code the model wrote and screenshots of your viewport, and its terms give the author a perpetual license to them for AI training.","seen":[{"line":"Its safe-mode checker, run alone, allowed five ordinary scripts and blocked fourteen hostile ones. It is off unless you set BLENDER_MCP_SAFE_MODE, and by its own words it is not a sandbox."}],"not_seen":"The server and the add-on working together inside Blender: read, not run. So were the asset libraries and the model generators.","count":41,"kinds":{"tool":34,"blender":7},"assets":[{"id":"mcp-for-blender/server","name":"MCP for Blender server (mcp-for-blender 2.2.7)","kind":"tool","job":"3d","line":"The Python program an agent's app starts: it speaks MCP to the agent and plain JSON over a local TCP socket (this machine, port 9876) to the add-on inside Blender. It offers nine tools to the model and five more to apps with a built-in viewport panel. By default it reports each tool call's name, success and duration with a random install ID to the author's database; DISABLE_TELEMETRY=true stops that.","path":"src/blender_mcp/server.py","use":"Add to the agent's MCP config: {\"mcpServers\": {\"blender\": {\"command\": \"uvx\", \"args\": [\"mcp-for-blender\"], \"env\": {\"DISABLE_TELEMETRY\": \"true\", \"BLENDER_MCP_SAFE_MODE\": \"1\"}}}}  (the README gives the same without the env block; claude mcp add blender uvx mcp-for-blender for Claude Code)","needs":"Uv (or pipx), Python 3.10 or newer, and a running Blender with the add-on's server started"},{"id":"mcp-for-blender/addon","name":"MCP for Blender add-on (addon.py 1.8, protocol 15)","kind":"tool","job":"3d","line":"One 7,200-line Blender add-on that opens a socket server inside Blender and carries out the commands sent to it: run Python, describe the scene, take viewport pictures, download from asset libraries, call model generators, export a scene. The socket has no password and no encryption; it listens on this machine only unless the owner changes Bind Address and ticks Allow Remote Connections. Once enabled it starts its server every time Blender opens (auto-start is on by default) and checks GitHub for a newer add-on file at startup. It cannot run in headless Blender: it refuses to start under blender -b.","path":"addon.py","use":"uvx mcp-for-blender install-addon  (copies it into Blender's add-ons folder as blender_mcp.py), then in Blender: Edit, Preferences, Add-ons, enable 'Interface: MCP for Blender'; press N in the 3D view, open the MCP for Blender tab, Start MCP Server. Set BLENDERMCP_NO_UPDATE_CHECK=1 in Blender's environment to stop the startup check.","needs":"Blender 3.0 or newer, open with a window"},{"id":"mcp-for-blender/setup","name":"mcp-for-blender setup","kind":"tool","job":"3d","line":"A command that finds the AI apps on the machine (Claude Desktop, Claude Code, Codex, Cursor, VS Code, Devin Desktop or Windsurf, OpenCode, Antigravity), adds a 'blender' server entry to each one chosen, installs the add-on and enables it by running Blender headless, which saves Blender's preferences. It merges into existing config files and leaves a .bak beside each. Started by the one-line installer with no terminal attached, it configures everything it finds without asking.","path":"src/blender_mcp/setup_cli.py","use":"uvx mcp-for-blender setup   (add --dry-run to see what it would change; --yes to skip the questions)","needs":"Uv"},{"id":"mcp-for-blender/install-addon","name":"mcp-for-blender install-addon / addon-paths","kind":"tool","job":"3d","line":"Copies the add-on bundled with the package into Blender's add-ons folder and prints where it wrote; addon-paths lists the Blender add-on folders it can see. Does not enable the add-on.","path":"src/blender_mcp/addon_manager.py","use":"uvx mcp-for-blender install-addon   (BLENDERMCP_ADDONS_DIR=/path/to/scripts/addons overrides the destination)","needs":"Uv, Blender installed"},{"id":"mcp-for-blender/update","name":"mcp-for-blender update","kind":"tool","job":"3d","line":"Checks PyPI for a newer release, refreshes uv's cached copy so the next launch uses it, and replaces every installed copy of the add-on with the bundled one, keeping a .bak and never downgrading.","path":"src/blender_mcp/update_cli.py","use":"uvx mcp-for-blender@latest update   (--dry-run to preview)","needs":"Uv"},{"id":"mcp-for-blender/install-script","name":"install.sh / install.ps1","kind":"tool","job":"3d","line":"The one-line installers the README leads with. Each installs uv by piping uv's own installer into a shell if uv is missing, then runs the newest mcp-for-blender setup. They are a download piped into a shell that pipes a second download into a shell; the manual steps reach the same result.","path":"install.sh","use":"As the README gives it: curl -LsSf https://www.mcp-for-blender.com/install.sh | sh   (Windows: irm https://www.mcp-for-blender.com/install.ps1 | iex). Safer: brew install uv, then uvx mcp-for-blender setup --dry-run.","needs":"Curl or wget"},{"id":"mcp-for-blender/docker","name":"Dockerfile","kind":"tool","job":"3d","line":"Runs the MCP server in a container while Blender stays on the host; the image points at host.docker.internal:9876.","path":"Dockerfile","use":"docker build -t mcp-for-blender .   then in the MCP config: {\"command\": \"docker\", \"args\": [\"run\", \"-i\", \"--rm\", \"mcp-for-blender\"]}","needs":"Docker; on Linux, host networking and an add-on bound beyond loopback or an SSH tunnel"},{"id":"mcp-for-blender/codex-plugin","name":"Codex plugin","kind":"tool","job":"3d","line":"A Codex plugin wrapper around the same server that switches on the viewport panel beside the chat, thumbnail pickers for the asset libraries and @-mentions of scene objects. It passes DISABLE_TELEMETRY and BLENDER_MCP_SAFE_MODE through from the environment if they are set.","path":"integrations/codex/plugins/mcp-for-blender/.codex-plugin/plugin.json","use":"git clone https://github.com/ahujasid/blender-mcp.git && codex plugin marketplace add ./blender-mcp/integrations/codex   then install MCP for Blender from Codex's plugin list","needs":"Codex, uv"},{"id":"mcp-for-blender/safe-mode","name":"Safe mode (BLENDER_MCP_SAFE_MODE)","kind":"tool","job":"review","line":"An optional checker, off by default, that reads every script the model sends before it reaches Blender and rejects it if it imports anything beyond bpy, bmesh, mathutils and a few pure-Python modules, or uses eval, exec, open, handlers, timers, drivers, add-on installs, text-block scripts, appending from another .blend, quitting Blender or overwriting the startup file. It is a filter on the model's scripts, not a sandbox: in our test it let through saving preferences, deleting every object, opening another .blend, loading any image from disk and saving the file to any path. It does not cover the socket, which any program on the machine can call directly.","path":"src/blender_mcp/safe_mode.py","use":"Set BLENDER_MCP_SAFE_MODE=1 in the server's env block in the MCP config. A blocked script comes back to the model with the reason and the line."},{"id":"mcp-for-blender/context-log","name":"Context log (BLENDER_MCP_CONTEXT_LOG)","kind":"tool","job":"review","line":"An optional local log, off by default, of how many characters and estimated tokens each tool definition and tool result costs the conversation. Names and sizes only; written to context-log.jsonl in the BlenderMCP data folder and never uploaded.","path":"src/blender_mcp/context_log.py","use":"Set BLENDER_MCP_CONTEXT_LOG=1 in the server's env block"},{"id":"mcp-for-blender/tool-execute-blender-code","name":"execute_blender_code","kind":"tool","job":"3d","line":"Runs Python the model writes inside the user's open Blender, with the full bpy API, and returns whatever it printed. This is the tool that does the modeling, lighting, animation and rendering; everything else supports it. There is no guard by default: the script runs with the user's own rights, so it can read and write files, start programs and use the network. Safe mode narrows that.","path":"src/blender_mcp/server.py","use":"MCP tool; call it from an agent with the server connected. execute_blender_code(code=\"import bpy; print(len(bpy.data.objects))\")"},{"id":"mcp-for-blender/tool-look","name":"look","kind":"tool","job":"review","line":"Returns one picture of the scene so the model can check its work: the user's viewport, the view through the scene camera, an auto-framed sheet from up to six sides, or a strip of frames across the animation; drawn solid, with materials, rendered (EEVEE and Workbench only), wireframe or x-ray. It can also show the last render or any image file by path. It restores every setting it changed.","path":"src/blender_mcp/server.py","use":"MCP tool; call it from an agent with the server connected. look(mode=\"angles\", target=[\"Chair\"], shading=\"material\", max_size=768)   or   look(mode=\"frames\", frame_count=6, view=\"camera\")"},{"id":"mcp-for-blender/tool-get-scene-info","name":"get_scene_info","kind":"tool","job":"review","line":"Describes the scene in text: one header line, then one line per object with the fields asked for (location, size, whether it sits on the ground, materials, modifiers, animation, mesh health such as non-manifold edges, skin weights, render settings).","path":"src/blender_mcp/server.py","use":"MCP tool; call it from an agent with the server connected. get_scene_info(fields=[\"location\", \"size\", \"ground\", \"materials\"], query=\"chair\", limit=20)"},{"id":"mcp-for-blender/tool-generate-3d","name":"generate_3d","kind":"tool","job":"model","line":"Makes one textured 3D model from a short text prompt or an image and imports it, through Tripo, Hunyuan3D, Hyper3D Rodin or Meshy. One object per call, one to three minutes, and it can cost money each time: it uses the user's own API keys or the author's paid Premium plan. If it is not done in time it returns a job handle to resume without paying twice.","path":"src/blender_mcp/server.py","use":"MCP tool; call it from an agent with the server connected. generate_3d(prompt=\"weathered wooden treasure chest\", name=\"Chest\", provider=\"auto\")","needs":"An API key for at least one generator set in the add-on, or a Premium license"},{"id":"mcp-for-blender/tool-search-assets","name":"search_assets","kind":"tool","job":"model","line":"Searches three existing libraries: Poly Haven (HDRIs, PBR textures and realistic models, all CC0, no key), Sketchfab (user-made models, licenses vary) and Poly Pizza (low-poly models, CC0 or CC-BY). Can attach up to six thumbnails.","path":"src/blender_mcp/server.py","use":"MCP tool; call it from an agent with the server connected. search_assets(source=\"polyhaven\", query=\"overcast afternoon\", asset_type=\"hdris\", previews=3)","needs":"The library ticked in the add-on's sidebar; Sketchfab and Poly Pizza each need their own API key"},{"id":"mcp-for-blender/tool-import-asset","name":"import_asset","kind":"tool","job":"model","line":"Downloads an asset found by search_assets and brings it into the scene: an HDRI becomes the world lighting, a texture set becomes a material applied to named objects, a model is imported at a stated size. It writes the source, author and license onto the imported objects as custom properties.","path":"src/blender_mcp/server.py","use":"MCP tool; call it from an agent with the server connected. import_asset(source=\"polyhaven\", id=\"rusty_metal_02\", asset_type=\"textures\", apply_to=[\"Wall\"], resolution=\"2k\")","needs":"As search_assets"},{"id":"mcp-for-blender/tool-get-addon-status","name":"get_addon_status","kind":"tool","job":"review","line":"Reports the Blender version, whether the add-on matches the server, which libraries and generators are switched on, and whether data collection is on. Its description also tells the model to point users to the paid Premium page.","path":"src/blender_mcp/server.py","use":"MCP tool; call it from an agent with the server connected. get_addon_status()"},{"id":"mcp-for-blender/tool-disable-telemetry","name":"disable_telemetry","kind":"tool","job":"review","line":"Turns the opt-in collection of prompts, code, screenshots and scene data off from inside a chat. It can only turn it off, and it does not stop the anonymous usage record; only the DISABLE_TELEMETRY environment variable does that.","path":"src/blender_mcp/server.py","use":"MCP tool; call it from an agent with the server connected. disable_telemetry()"},{"id":"mcp-for-blender/tool-record-trajectory-feedback","name":"record_trajectory_feedback","kind":"tool","job":"review","line":"Asks the model to file the user's reaction to a result (accept, reject, undo, or a correction in their words) into the author's training dataset. It writes nothing unless the owner has opted in to data collection.","path":"src/blender_mcp/server.py","use":"MCP tool; call it from an agent with the server connected. record_trajectory_feedback(feedback=\"correction\", correction_text=\"too dark\")"},{"id":"mcp-for-blender/tool-open-viewport","name":"open_viewport","kind":"tool","job":"review","line":"Shows the latest viewport picture in a panel beside the conversation.","path":"src/blender_mcp/server.py","use":"Called by a host app's own interface (Codex with the plugin, or any client that supports MCP Apps), never by the model; hidden from other clients. open_viewport()"},{"id":"mcp-for-blender/tool-viewport-latest","name":"viewport_latest","kind":"tool","job":"review","line":"Returns the stored viewport picture if it is newer than the one the panel has; does not touch Blender.","path":"src/blender_mcp/server.py","use":"Called by a host app's own interface (Codex with the plugin, or any client that supports MCP Apps), never by the model; hidden from other clients. viewport_latest(since=3)"},{"id":"mcp-for-blender/tool-viewport-capture","name":"viewport_capture","kind":"tool","job":"review","line":"Takes a fresh viewport picture for the panel, on Refresh or by itself after the scene changes.","path":"src/blender_mcp/server.py","use":"Called by a host app's own interface (Codex with the plugin, or any client that supports MCP Apps), never by the model; hidden from other clients. viewport_capture(max_size=1000)"},{"id":"mcp-for-blender/tool-viewport-pick","name":"viewport_pick","kind":"tool","job":"review","line":"Finds the object under a click on the viewport picture, so a person can point at a thing and attach it to their next message.","path":"src/blender_mcp/server.py","use":"Called by a host app's own interface (Codex with the plugin, or any client that supports MCP Apps), never by the model; hidden from other clients. viewport_pick(seq=3, x=0.42, y=0.61)"},{"id":"mcp-for-blender/tool-search-mentions","name":"search_mentions","kind":"tool","job":"review","line":"Lists scene objects, materials and collections matching a few typed letters, for @-mentions in the message box.","path":"src/blender_mcp/server.py","use":"Called by a host app's own interface (Codex with the plugin, or any client that supports MCP Apps), never by the model; hidden from other clients. search_mentions(query=\"cha\")"},{"id":"mcp-for-blender/resources-scene-items","name":"blender:// resources (object, material, collection)","kind":"tool","job":"review","line":"Three MCP resource addresses that return one scene item's details as JSON, used by the @-mentions.","path":"src/blender_mcp/server.py","use":"Read blender://object/{name}, blender://material/{name} or blender://collection/{name} through the MCP client"},{"id":"mcp-for-blender/viewport-app","name":"Viewport app (apps/viewport.html)","kind":"tool","job":"review","line":"A single HTML page the server hands to clients that support MCP Apps: a live viewport picture beside the chat with refresh and click-to-pick.","path":"src/blender_mcp/apps/viewport.html","use":"Shown by the host app; BLENDER_MCP_APPS=1 forces it on for clients that support it without saying so"},{"id":"mcp-for-blender/integration-polyhaven","name":"Poly Haven","kind":"tool","job":"material","line":"About 2,400 HDRIs, PBR texture sets and models, all CC0, fetched from api.polyhaven.com with no key and no account. HDRIs are packed into the .blend; textures become a Principled material. Downloads run on Blender's main thread, so the window freezes until a large file lands.","path":"addon.py","use":"Tick Poly Haven in the add-on's sidebar, then search_assets(source=\"polyhaven\", ...) and import_asset(...)","needs":"Internet"},{"id":"mcp-for-blender/integration-sketchfab","name":"Sketchfab","kind":"tool","job":"model","line":"Search and download of user-made models from Sketchfab. Licenses differ per model, so each one has to be checked before it goes into anything published.","path":"addon.py","use":"Tick Sketchfab in the sidebar and paste an API key (or set BLENDERMCP_SKETCHFAB_API_KEY), then search_assets(source=\"sketchfab\", query=...)","needs":"A Sketchfab account and API key"},{"id":"mcp-for-blender/integration-polypizza","name":"Poly Pizza","kind":"tool","job":"model","line":"About 10,600 low-poly models as single .glb files, CC0 or CC-BY; the credit line is written onto each imported object. The README says about 69 percent are CC-BY, which requires credit wherever the model appears, and that the download host blocks datacenter and VPN addresses.","path":"addon.py","use":"Tick Poly Pizza and paste a free API key from poly.pizza/settings/api (or BLENDERMCP_POLYPIZZA_API_KEY), then search_assets(source=\"polypizza\", query=\"chair\", licence=\"CC0\")","needs":"A free Poly Pizza API key"},{"id":"mcp-for-blender/integration-hyper3d","name":"Hyper3D Rodin","kind":"tool","job":"model","line":"Text or image to a textured model through Hyper3D's own site or through fal.ai. The add-on carries a shared free-trial key for the main site (a button fills it in); beyond that it needs the user's key.","path":"addon.py","use":"Tick Hyper3D in the sidebar, paste a key or press the free-trial button, then generate_3d(provider=\"hyper3d\", prompt=...)","needs":"A Hyper3D or fal.ai key (paid), or the shared trial key with its limits"},{"id":"mcp-for-blender/integration-hunyuan3d","name":"Hunyuan3D","kind":"tool","job":"model","line":"Text or image to a model through Tencent Cloud's Hunyuan API (mainland or international account), or through a Hunyuan3D server the user runs themselves at a local address (the default is http://this machine, port 8081). The local mode is the one generator here that needs no outside service.","path":"addon.py","use":"Tick Tencent Hunyuan 3D, choose Official API (SecretId and SecretKey) or Local API (a URL), then generate_3d(provider=\"hunyuan3d\", ...)","needs":"Tencent Cloud credentials (paid), or your own Hunyuan3D server and a GPU to run it"},{"id":"mcp-for-blender/integration-tripo","name":"Tripo","kind":"tool","job":"model","line":"Text or image to a textured model through Tripo, on the user's own key or through Premium.","path":"addon.py","use":"Tick Tripo under AI Model Generation, choose a model, paste the key (or BLENDERMCP_TRIPO_API_KEY), then generate_3d(provider=\"tripo\", ...)","needs":"A Tripo API key (paid) or Premium"},{"id":"mcp-for-blender/integration-meshy","name":"Meshy","kind":"tool","job":"model","line":"Text or image to a textured model sized to real-world height with its origin on the ground; on the user's own key it can make a character in an A-pose or T-pose for rigging. Text generation on your own key is two paid tasks (mesh, then texture).","path":"addon.py","use":"Tick Meshy, paste the key (or BLENDERMCP_MESHY_API_KEY), then generate_3d(provider=\"meshy\", prompt=..., pose_mode=\"t-pose\")","needs":"A paid Meshy plan and API key, or Premium"},{"id":"mcp-for-blender/integration-premium","name":"MCP for Blender Premium","kind":"tool","job":"model","line":"The author's paid plan: one license key instead of four generator keys. The add-on sends the license key, a device ID and each prompt or image to the author's own server, which calls the generators. The server's replies and the get_addon_status tool nudge the model to tell the user about it once per chat.","path":"addon.py","use":"Buy a key at mcp-for-blender.com/premium, paste it in the add-on preferences and set Generation Source to Premium","needs":"A paid subscription"},{"id":"mcp-for-blender/guide-bpy","name":"Guide: Writing bpy that works on any Blender","kind":"blender","job":"3d","line":"The most useful page in the repo for anyone scripting Blender: how to look up enum values, node sockets and operator arguments before using them, find nodes by type because names are translated, the Principled BSDF inputs renamed in 4.0, the EEVEE engine name by version, slotted actions in 4.4 and Action.fcurves removed in 5.0, when an operator needs a viewport override, and working habits (small steps, name everything, apply scale). Our own test script met three of these exact traps on Blender 5.0.1.","path":"src/blender_mcp/guides/bpy.md","use":"Not served at this commit: server.py says guides are 'switched off while evals measure what the model does without them', and a test asserts get_guide is absent. The file is in the repo under MIT; copy it into a skill or a prompt."},{"id":"mcp-for-blender/guide-scene","name":"Guide: Scene design","kind":"blender","job":"scene","line":"A short method for a believable scene: block out at real size and check through the camera before spending on assets, when to generate, download or script an object, what to fix after every import (scale from the bounding box, put it on the ground, face it the right way), composition, lighting from an HDRI plus a key, and 'fix light power before touching exposure'.","path":"src/blender_mcp/guides/scene.md","use":"Not served at this commit: server.py says guides are 'switched off while evals measure what the model does without them', and a test asserts get_guide is absent. The file is in the repo under MIT; copy it into a skill or a prompt."},{"id":"mcp-for-blender/guide-animation","name":"Guide: Animation","kind":"blender","job":"move","line":"Keyframing from Python in a way that works on every version, a helper to reach the curves on Blender 4.4 and later, easing by interpolation, loops with a Cycles modifier, drivers, NLA strips, camera follow with Track To, and checking motion with a strip of frames.","path":"src/blender_mcp/guides/animation.md","use":"Not served at this commit: server.py says guides are 'switched off while evals measure what the model does without them', and a test asserts get_guide is absent. The file is in the repo under MIT; copy it into a skill or a prompt."},{"id":"mcp-for-blender/guide-materials","name":"Guide: Materials and texturing","kind":"blender","job":"material","line":"Node materials in a few lines of code, a table of believable base color, metallic and roughness values, real-world tiling for Poly Haven textures (Mapping scale = surface size over texture size), Non-Color for data maps, and procedural variation.","path":"src/blender_mcp/guides/materials.md","use":"Not served at this commit: server.py says guides are 'switched off while evals measure what the model does without them', and a test asserts get_guide is absent. The file is in the repo under MIT; copy it into a skill or a prompt."},{"id":"mcp-for-blender/guide-rigging","name":"Guide: Rigging","kind":"blender","job":"rig","line":"Armatures from Python, Rigify for humanoids, simple rigs for everything else, skinning with automatic weights and how to fix it, and how to verify deformation.","path":"src/blender_mcp/guides/rigging.md","use":"Not served at this commit: server.py says guides are 'switched off while evals measure what the model does without them', and a test asserts get_guide is absent. The file is in the repo under MIT; copy it into a skill or a prompt."},{"id":"mcp-for-blender/guide-retopology","name":"Guide: Retopology and mesh cleanup","kind":"blender","job":"model","line":"Turning generated or scanned meshes into lighter, clean geometry: diagnose, clean up, reduce, unwrap, and bake the detail back. Relevant to any model that comes out of a generator.","path":"src/blender_mcp/guides/retopology.md","use":"Not served at this commit: server.py says guides are 'switched off while evals measure what the model does without them', and a test asserts get_guide is absent. The file is in the repo under MIT; copy it into a skill or a prompt."},{"id":"mcp-for-blender/guide-level-design","name":"Guide: Level design","kind":"blender","job":"scene","line":"Game levels in Blender: player metrics first, blockout, modular kits and engine-ready output.","path":"src/blender_mcp/guides/level-design.md","use":"Not served at this commit: server.py says guides are 'switched off while evals measure what the model does without them', and a test asserts get_guide is absent. The file is in the repo under MIT; copy it into a skill or a prompt."}]},{"id":"blender-skills","name":"Blender Skills","repo":"arjun988/blender-skills","url":"https://github.com/arjun988/blender-skills","commit":"904f095d8f36a6e72adaebb08d07f884a074743d","commit_date":"2026-11-06","licence":{"name":"MIT","basis":"LICENSE file, 'Copyright (c) 2026 blender-skills contributors'; every SKILL.md front matter says license: MIT; .claude-plugin/plugin.json and marketplace.json say MIT","note":"The Blender name and logo belong to the Blender Foundation."},"kind":"blender","line":"94 written instruction files that tell a coding agent how a Blender artist would approach a job, from modeling and lighting to game-engine export, 55 of them art-style and genre briefs. Text only: no scripts, scenes or node groups. (The 96 entries here are those 94, one shared reference page and one setup file.)","look_only":false,"get":{"command":"git clone https://github.com/arjun988/blender-skills.git","note":"Then copy its .claude/skills folder into your project's .claude/skills, or the same folders into your agent's skills directory."},"needs":"Blender, and a way for your agent to run Blender Python. The skills are written for the Blender MCP server. In our test the same steps also ran as one script with blender --background.","sends":"Nothing. Its MCP config files start a different project's server, with that server's telemetry switched off.","seen":[{"line":"We wrote a script from its written steps for a product shot and ran it headless on Blender 5.0.1. It gave a picture on the first run: a small radio on a seamless backdrop, then a turntable.","preview":{"poster":"assets/asset-library/blender-skills-product-hero.jpg","w":960,"h":540}},{"line":"One fault in the recipe: the light rig gives watts with no distances, and the first frame came out almost white. Treat its watts as a ratio."}],"not_seen":"The simulation, rigging, sculpting, baking and export skills were read, not run. Half the skills are under 1,000 characters: a title, a tagline and a few tenets.","count":96,"kinds":{"blender":95,"tool":1},"assets":[{"id":"blender-skills/analog-found-footage-horror","name":"analog-found-footage-horror","kind":"blender","job":"art direction","line":"Found-footage look: handheld or locked security-camera framing, timestamps, VHS blur and tracking lines, ordinary spaces made wrong. Five tenets and two reference pages. Its reference pages: found-footage-camera, vhs-comp.","path":".claude/skills/analog-found-footage-horror/SKILL.md","use":"Copy .claude/skills/analog-found-footage-horror/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (analog horror, found footage, VHS horror, CRT horror, tape horror, Mandel effect, lost media). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/animation","name":"animation","kind":"blender","job":"move","line":"Keyframe animation rules: walk, run and idle cycles with frame counts, mechanical motion by constraints (hinges, pistons, gears on drivers), the Graph Editor order (stepped blocking, then splines), NLA for export, and camera animation (always eased, subtle noise for shake). Aimed at game characters; the mechanical and camera parts suit a product or exploded-view shot. Its reference pages: combat-animation, walk-cycle.","path":".claude/skills/animation/SKILL.md","use":"Copy .claude/skills/animation/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (animation, animate, walk cycle, run cycle, idle, combat, NLA, graph editor, keyframe). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/anime-style","name":"anime-style","kind":"blender","job":"art direction","line":"Cel-shaded look: two to four value steps per material, hard shadow edges, four ways to shade and outline (toon shader with a color ramp, emission plus ramp, Freestyle lines, an inverted hull), one clear key light. Its reference pages cover the cel shader setup and anime proportions. Its reference pages: anime-proportion, cel-shader-setup.","path":".claude/skills/anime-style/SKILL.md","use":"Copy .claude/skills/anime-style/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (anime, cel shade, toon shader, anime style, hard shadows, manga, Japanese animation look). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/apocalypse-worlds","name":"apocalypse-worlds","kind":"blender","job":"art direction","line":"Post-apocalyptic and dystopian settings: scavenged materials, faded brands, improvised repairs, in six lanes. One line and two reference pages. Its reference pages: dystopia-utopia, wasteland.","path":".claude/skills/apocalypse-worlds/SKILL.md","use":"Copy .claude/skills/apocalypse-worlds/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (post-apocalyptic, post-apoc, zombie apocalypse, alien invasion, dystopian, utopian, post-human, wasteland). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/archviz","name":"archviz","kind":"blender","job":"scene","line":"Architectural stills: check real-world scale first, 24 to 35 mm for interiors with verticals corrected, HDRI plus practical lamps, layered EXR for revisions. Short; leans on the camera, lighting and materials skills. The closest thing in the pack to a room-sized background plate. Its reference pages: archviz-camera, archviz-lighting.","path":".claude/skills/archviz/SKILL.md","use":"Copy .claude/skills/archviz/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (archviz, architectural visualization, interior render, exterior render, real estate render, architecture viz). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/asset-optimization","name":"asset-optimization","kind":"blender","job":"review","line":"The gate before export: an audit checklist for geometry, UVs, materials and naming, fixes for common overruns, LOD steps at 50, 25 and 10 percent, and a report template. For game assets; of little use for a rendered shot. Its reference pages: lod-strategies.","path":".claude/skills/asset-optimization/SKILL.md","use":"Copy .claude/skills/asset-optimization/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (optimize, optimization, polycount, LOD, cleanup, performance, game ready, validate, triangle count). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/biome-worlds","name":"biome-worlds","kind":"blender","job":"art direction","line":"Underwater, desert, arctic, jungle, underground and floating-island settings: climate drives palette, fog, vegetation density and wear. One line and one reference page. Its reference pages: biome-cheatsheet.","path":".claude/skills/biome-worlds/SKILL.md","use":"Copy .claude/skills/biome-worlds/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (underwater, desert, arctic, jungle, underground, cave, floating islands, biome, climate setting). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/blender-director","name":"blender-director","kind":"blender","job":"plan","line":"The orchestrator: reads a request, writes a production brief (type, target, style, triangle and texture budgets, export format), then names which specialist skills to load and in what order. Holds the routing table for all 93 other skills, ready-made chains (its 'Cinematic Shot' chain is lookdev, camera-cinematography, lighting, rendering, compositing, qa-review) and the nine-step loop for matching an attached reference image. The longest skill in the pack; start here. Its reference pages: skill-routing.","path":".claude/skills/blender-director/SKILL.md","use":"Copy .claude/skills/blender-director/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (Blender, 3D asset, game-ready, pipeline, workflow, plan, coordinate, technical artist). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/blender-modeler","name":"blender-modeler","kind":"blender","job":"model","line":"General modeling ground rules: COL_ collections first, blockout from primitives, the modifier order (mirror, array, solidify, boolean, bevel, weighted normal, subdivision), instancing instead of copies, and a cleanup checklist (merge by distance, normals, manifold check). Reach for it for any blockout or mesh cleanup no specialist covers. Its reference pages: modifier-stack, scene-organization.","path":".claude/skills/blender-modeler/SKILL.md","use":"Copy .claude/skills/blender-modeler/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (model, blockout, edit mode, modifier, collection, mesh, primitive, snap, pivot, scene organization). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/body-horror-style","name":"body-horror-style","kind":"blender","job":"art direction","line":"Body horror: anatomy that is almost right then broken, material transitions from skin to metal or plastic, restraint with wet specular. Five tenets and one reference page. Its reference pages: mutation-cues.","path":".claude/skills/body-horror-style/SKILL.md","use":"Copy .claude/skills/body-horror-style/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (body horror, mutation, flesh, visceral, grotesque anatomy, Cronenberg). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/brutalist-mood","name":"brutalist-mood","kind":"blender","job":"art direction","line":"Brutalist mood: monumental raw concrete, austere composition, people made small, few materials. One line and one reference page. Its reference pages: brutalist-forms.","path":".claude/skills/brutalist-mood/SKILL.md","use":"Copy .claude/skills/brutalist-mood/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (brutalist, brutalism, raw concrete, monumental concrete, austere architecture). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/camera-cinematography","name":"camera-cinematography","kind":"blender","job":"camera","line":"Shot-making: a lens table by feel (18 to 28 mm wide, 35 to 50 story and product, 85 to 135 hero), a composition checklist, five camera moves with what each is for (orbit, dolly in, crane, handheld noise, locked off), depth-of-field rules and CAM_ plus target-empty naming. Short and practical for any 3D shot. Its reference pages: camera-move-library, dof-guide, lens-and-composition.","path":".claude/skills/camera-cinematography/SKILL.md","use":"Copy .claude/skills/camera-cinematography/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (camera, cinematography, lens, framing, composition, shot, dolly, orbit, focal length, depth of field, camera animation). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/cartoon-style","name":"cartoon-style","kind":"blender","job":"art direction","line":"Cartoon look in about 1,000 characters: silhouette first, exaggerated proportions, limited palette with bold accents, detail in shapes instead of surface texture. One reference page on shape language. Its reference pages: cartoon-shape-language.","path":".claude/skills/cartoon-style/SKILL.md","use":"Copy .claude/skills/cartoon-style/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (cartoon, toon, rubber hose, Saturday morning, bold cartoon, graphic cartoon). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/character-archetypes","name":"character-archetypes","kind":"blender","job":"art direction","line":"A short pointer skill (under 900 characters) that says to fix silhouette, materials and proportions for a role or race before modeling, and to load one of four small reference pages: fantasy ancestries, horror bodies, sci-fi body types, role kits. Its reference pages: fantasy-ancestries, horror-bodies, role-kits, scifi-bodies.","path":".claude/skills/character-archetypes/SKILL.md","use":"Copy .claude/skills/character-archetypes/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (archetype, elf, dwarf, orc, goblin, vampire, werewolf, zombie, alien, mecha, android, knight, assassin, superhero, villain, witch, wizard, cowboy, soldier). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/character-artist","name":"character-artist","kind":"blender","job":"model","line":"Human characters for animation: proportions in head units, where edge loops must go to deform (eyes, mouth, shoulders, elbows, knees), clothing as separate meshes, four ways to do hair. Planning rules and checklists, no code. Its reference pages: body-proportions, facial-topology.","path":".claude/skills/character-artist/SKILL.md","use":"Copy .claude/skills/character-artist/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (character, human, anatomy, face, facial, clothing, hair, body, edge loop, expression, portrait). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/chibi-style","name":"chibi-style","kind":"blender","job":"art direction","line":"Chibi proportions: head a half to a third of total height, simplified hands. About 600 characters and one reference page. Its reference pages: chibi-proportions.","path":".claude/skills/chibi-style/SKILL.md","use":"Copy .claude/skills/chibi-style/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (chibi, SD, super deformed, cute proportions, chibi character). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/cloth-sim","name":"cloth-sim","kind":"blender","job":"simulation","line":"Cloth that drapes: quad garment mesh, pin and stiffness vertex groups, starting settings for a soft dress, a stiff coat and a flag, a pre-roll to settle, then bake to shape keys or an Alembic or USD cache. Its reference pages: bake-targets, cloth-settings-presets, pin-and-collide.","path":".claude/skills/cloth-sim/SKILL.md","use":"Copy .claude/skills/cloth-sim/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (cloth, garment, clothing sim, fabric sim, pin group, shape key bake, cloth bake, dress, cape, soft clothing). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/collision-proxy","name":"collision-proxy","kind":"blender","job":"export","line":"Simple collision shapes for game engines: boxes, capsules and convex pieces, Unreal's UCX_ naming, Unity notes and authoring rules. Its reference pages: collider-recipes, engine-naming.","path":".claude/skills/collision-proxy/SKILL.md","use":"Copy .claude/skills/collision-proxy/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (collision, collider, UCX, UHX, convex hull, physics proxy, hitbox, blocking volume). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/comic-book-style","name":"comic-book-style","kind":"blender","job":"art direction","line":"Comic-book look: high-contrast lighting that reads as ink, strong contours, sparing halftone, hero poses, speed lines as meshes. Five tenets and one reference page. Its reference pages: ink-tone.","path":".claude/skills/comic-book-style/SKILL.md","use":"Copy .claude/skills/comic-book-style/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (comic book, comics, graphic novel, ink lines, halftone, Ben Day, superhero comic). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/compositing","name":"compositing","kind":"blender","job":"effect","line":"Finishing a render in Blender's compositor: which passes to enable, a default beauty stack (exposure and color balance, glare, slight lens distortion, vignette), grade rules and output naming, EXR for the archive and PNG or JPEG for review. Its reference pages: delivery-outputs, grade-presets, pass-stack.","path":".claude/skills/compositing/SKILL.md","use":"Copy .claude/skills/compositing/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (compositor, compositing, grade, beauty pass, render passes, cryptomatte, glare, vignette, color correction, post). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/cosmic-eldritch-horror","name":"cosmic-eldritch-horror","kind":"blender","job":"art direction","line":"Lovecraftian horror: scale mismatch between a tiny human and a vast form, suggestion over explanation, impossible architecture, abyssal blues and sickly golds. Five tenets and one reference page. Its reference pages: eldritch-forms.","path":".claude/skills/cosmic-eldritch-horror/SKILL.md","use":"Copy .claude/skills/cosmic-eldritch-horror/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (cosmic horror, eldritch, Lovecraftian, Lovecraft, non-Euclidean, unknowable, void horror). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/cozy-wholesome-mood","name":"cozy-wholesome-mood","kind":"blender","job":"art direction","line":"Cozy mood: warm key with soft fill, rounded props, clutter as comfort, gentle palettes, cameras at friendly eye height. Five tenets and one reference page. Its reference pages: cozy-palette.","path":".claude/skills/cozy-wholesome-mood/SKILL.md","use":"Copy .claude/skills/cozy-wholesome-mood/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (cozy, cute, wholesome, relaxing, peaceful, hygge, warm lighting cozy). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/creature-artist","name":"creature-artist","kind":"blender","job":"model","line":"Creatures grounded in real anatomy: skeleton blockout first, then muscle masses, surface forms and detail tiers, with base skeletons for quadrupeds, bipeds, flyers, aquatic, serpentine and insect forms. Its reference pages: flying-creatures, quadruped-anatomy.","path":".claude/skills/creature-artist/SKILL.md","use":"Copy .claude/skills/creature-artist/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (creature, monster, alien, fantasy, dragon, beast, organic design, muscle, anatomy, fauna). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/dark-gritty-mood","name":"dark-gritty-mood","kind":"blender","job":"art direction","line":"Dark, gritty mood: wear as story, low-key lighting, melancholy palettes, industrial weight. One line and one reference page. Its reference pages: gritty-materials.","path":".claude/skills/dark-gritty-mood/SKILL.md","use":"Copy .claude/skills/dark-gritty-mood/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (dark, grim, gritty, rusty, abandoned, decayed, industrial, lonely, melancholic, tense, eerie, creepy). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/dream-surreal-mood","name":"dream-surreal-mood","kind":"blender","job":"art direction","line":"Dreamlike, surreal mood: bent logic, play with scale, soft physics, symbolic props. One line and one reference page. Its reference pages: surreal-devices.","path":".claude/skills/dream-surreal-mood/SKILL.md","use":"Copy .claude/skills/dream-surreal-mood/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (dreamlike, surreal, mysterious, mystical, hopeful, chaotic, uncanny mood). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/dream-weirdcore-style","name":"dream-weirdcore-style","kind":"blender","job":"art direction","line":"Dreamcore and weirdcore: soft fog and bloom, childhood objects out of place, cryptic captions, unclear geography. Five tenets and one reference page. Its reference pages: dreamcore-cues.","path":".claude/skills/dream-weirdcore-style/SKILL.md","use":"Copy .claude/skills/dream-weirdcore-style/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (dreamcore, weirdcore, traumacore, dream horror, nostalgic horror, surreal childhood, weirdcore edit). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/environment-artist","name":"environment-artist","kind":"blender","job":"scene","line":"Modular environments: grid sizes for walls, facades and roads, the kit pieces a set needs (corner, edge, fill, door, trim), real-world architectural measures (door 2.1 m by 0.9 m, ceilings 2.4 to 3.5 m), composition rules and what small details say about a place. Written for game levels; the measures and composition notes also serve a background plate. Its reference pages: composition, modular-kits.","path":".claude/skills/environment-artist/SKILL.md","use":"Copy .claude/skills/environment-artist/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (environment, modular kit, building, terrain, vegetation, architecture, interior, exterior, level art, scene composition). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/export-pipeline","name":"export-pipeline","kind":"blender","job":"export","line":"Getting an asset out of Blender intact: which format for which target (FBX, glTF or GLB, OBJ, USD, Alembic), the FBX and glTF settings written out, a verification matrix (scale, pivot, axes, normals, materials, animation) and notes for Unreal, Unity and Godot. The glTF section is the one we would use, to take a Blender model into three.js. Its reference pages: engine-import.","path":".claude/skills/export-pipeline/SKILL.md","use":"Copy .claude/skills/export-pipeline/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (export, FBX, GLTF, GLB, OBJ, USD, Alembic, Unity, Unreal, game engine import). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/fantasy-worlds","name":"fantasy-worlds","kind":"blender","job":"art direction","line":"Fantasy world direction: choose medieval, high, dark or urban fantasy and keep materials honest to it. Four tenets and four reference pages, one per subgenre. Its reference pages: dark-fantasy, high-fantasy, medieval, urban-fantasy.","path":".claude/skills/fantasy-worlds/SKILL.md","use":"Copy .claude/skills/fantasy-worlds/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (fantasy, medieval, high fantasy, dark fantasy, urban fantasy, castle, magic world). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/folk-horror-style","name":"folk-horror-style","kind":"blender","job":"art direction","line":"Folk horror: pastoral beauty with wrong customs, handmade ritual props, dread in warm daylight. Five tenets and one reference page. Its reference pages: folk-motifs.","path":".claude/skills/folk-horror-style/SKILL.md","use":"Copy .claude/skills/folk-horror-style/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (folk horror, rural horror, ritual, pagan, pastoral dread, village horror, Wicker Man). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/frutiger-aero-style","name":"frutiger-aero-style","kind":"blender","job":"art direction","line":"Mid-2000s glossy optimizm: bubbles, fresh greens and blues, nature with tech, soft skeuomorphic forms. One line of direction and one reference page. Its reference pages: aero-cues.","path":".claude/skills/frutiger-aero-style/SKILL.md","use":"Copy .claude/skills/frutiger-aero-style/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (Frutiger Aero, aero, aqua UI, glossy 2000s, vista aesthetic, bubbly futurism). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/genre-action-combat","name":"genre-action-combat","kind":"blender","job":"art direction","line":"Game-genre direction for action and fighting games: readable arenas, clear attack silhouettes, obvious breakables. One line and one reference page. For game art, not video. Its reference pages: combat-readability.","path":".claude/skills/genre-action-combat/SKILL.md","use":"Copy .claude/skills/genre-action-combat/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (action game, hack and slash, beat em up, brawler, fighting game, combat arena, action adventure). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/genre-card-party-idle","name":"genre-card-party-idle","kind":"blender","job":"art direction","line":"Game-genre direction for card, party, idle, rhythm and educational games: a clear table, readable icons in 3D, quiet backgrounds. One line and one reference page. Its reference pages: table-stage.","path":".claude/skills/genre-card-party-idle/SKILL.md","use":"Copy .claude/skills/genre-card-party-idle/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (card game, deck builder, party game, idle, incremental, educational, rhythm game, UI stage). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/genre-metroidvania-roguelike","name":"genre-metroidvania-roguelike","kind":"blender","job":"art direction","line":"Game-genre direction for metroidvanias and roguelikes: modular rooms, ability gates, biome identity. One line and one reference page. Its reference pages: module-kits.","path":".claude/skills/genre-metroidvania-roguelike/SKILL.md","use":"Copy .claude/skills/genre-metroidvania-roguelike/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (metroidvania, roguelike, roguelite, room modules, procedural rooms, ability gate). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/genre-narrative-vn","name":"genre-narrative-vn","kind":"blender","job":"art direction","line":"Direction for visual novels and walking simulators: cameras that carry emotion, backgrounds ready to use as plates, few interaction highlights. One line and one reference page. The one genre skill that speaks of plates. Its reference pages: vn-backgrounds.","path":".claude/skills/genre-narrative-vn/SKILL.md","use":"Copy .claude/skills/genre-narrative-vn/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (visual novel, interactive movie, walking simulator, narrative game, story scene, VN background). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/genre-open-world-sandbox","name":"genre-open-world-sandbox","kind":"blender","job":"art direction","line":"Game-genre direction for open worlds: landmarks, biome borders, traversal, discovery without clutter. One line and one reference page. Its reference pages: open-world-landmarks.","path":".claude/skills/genre-open-world-sandbox/SKILL.md","use":"Copy .claude/skills/genre-open-world-sandbox/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (open world, sandbox, open-world, exploration, traversable world, sandbox game). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/genre-puzzle-platformer","name":"genre-puzzle-platformer","kind":"blender","job":"art direction","line":"Game-genre direction for puzzle and platform games: interactables that pop, hazards with their own color and shape, honest jump distances. One line and one reference page. Its reference pages: platform-readability.","path":".claude/skills/genre-puzzle-platformer/SKILL.md","use":"Copy .claude/skills/genre-puzzle-platformer/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (puzzle, platformer, jump puzzle, puzzle game art, platforming). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/genre-racing-sports","name":"genre-racing-sports","kind":"blender","job":"art direction","line":"Game-genre direction for racing and sports: landmarks readable at speed, clear track edges, stadium kits, team colors. One line and one reference page. Its reference pages: speed-readability.","path":".claude/skills/genre-racing-sports/SKILL.md","use":"Copy .claude/skills/genre-racing-sports/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (racing, sports, track, stadium, race course, sports arena). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/genre-rpg","name":"genre-rpg","kind":"blender","job":"art direction","line":"Game-genre direction for RPGs: region identity, quest hubs, loot rarity shown visually, class-readable gear. One line and one reference page. Its reference pages: rpg-subtypes.","path":".claude/skills/genre-rpg/SKILL.md","use":"Copy .claude/skills/genre-rpg/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (RPG, JRPG, CRPG, ARPG, MMORPG, loot, quest hub, RPG environment). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/genre-shooter","name":"genre-shooter","kind":"blender","job":"art direction","line":"Game-genre direction for shooters: sightlines, cover, landmarks, scale for first- or third-person cameras. One line and two reference pages. Its reference pages: br-extraction, fps-tps.","path":".claude/skills/genre-shooter/SKILL.md","use":"Copy .claude/skills/genre-shooter/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (shooter, FPS, TPS, battle royale, extraction shooter, cover shooter, gun game art). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/genre-soulslike","name":"genre-soulslike","kind":"blender","job":"art direction","line":"Game-genre direction for soulslikes: monumental ruins, fog gates, landmark shortcuts, enemy silhouettes that read as lethal. One line and one reference page. Its reference pages: souls-spaces.","path":".claude/skills/genre-soulslike/SKILL.md","use":"Copy .claude/skills/genre-soulslike/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (soulslike, souls like, bonfire, fog gate, monumental ruins, difficult action RPG art). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/genre-stealth","name":"genre-stealth","kind":"blender","job":"art direction","line":"Game-genre direction for stealth games: shadows as gameplay, noisy and quiet floor materials, vertical routes. One line and one reference page. Its reference pages: stealth-layout.","path":".claude/skills/genre-stealth/SKILL.md","use":"Copy .claude/skills/genre-stealth/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (stealth, stealth game, shadow play, infiltration, stealth level art). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/genre-strategy-sim","name":"genre-strategy-sim","kind":"blender","job":"art direction","line":"Game-genre direction for strategy and simulation games: iconic buildings, clear tiles, units readable from the camera's distance. One line and two reference pages. Its reference pages: sim-props, strategy-cameras.","path":".claude/skills/genre-strategy-sim/SKILL.md","use":"Copy .claude/skills/genre-strategy-sim/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (strategy, RTS, turn-based strategy, tower defense, MOBA, city builder, colony sim, simulation, life sim, farming sim). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/genre-survival","name":"genre-survival","kind":"blender","job":"art direction","line":"Game-genre direction for survival games: resources readable at speed, safe against unsafe zones, iconic crafting benches. One line and one reference page. Its reference pages: survival-reads.","path":".claude/skills/genre-survival/SKILL.md","use":"Copy .claude/skills/genre-survival/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (survival, survival horror, crafting, resource gathering, survival game art). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/geometry-nodes","name":"geometry-nodes","kind":"blender","job":"model","line":"Procedural systems as reusable GN_ node groups: scatter on a surface, a building generator, pipes and cables along curves, rock formations, with the node chains written out as arrows, randomisation ranges and when to realize instances. Describes the node trees in words; it does not ship node groups. Its reference pages: building-generators, scatter-systems.","path":".claude/skills/geometry-nodes/SKILL.md","use":"Copy .claude/skills/geometry-nodes/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (geometry nodes, procedural, scatter, node group, GN_, instancing, parametric). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/godot-export","name":"godot-export","kind":"blender","job":"export","line":"Godot export: GLB first, +Y up, Principled BSDF to glTF PBR, actions exported as clips, and a short verify-in-Godot list. Its reference pages: godot-checklist.","path":".claude/skills/godot-export/SKILL.md","use":"Copy .claude/skills/godot-export/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (Godot, Godot export, Godot GLTF, Godot GLB, Godot materials, Godot animation). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/hair-groom","name":"hair-groom","kind":"blender","job":"model","line":"Hair and fur two ways: hair cards on an atlas for real-time, curves or particle hair for a cinematic render, with card counts per LOD and groom principles (flow first, clumps, hairline). Its reference pages: cinematic-vs-game, groom-flow-regions, hair-card-atlas.","path":".claude/skills/hair-groom/SKILL.md","use":"Copy .claude/skills/hair-groom/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (hair, groom, fur, hair cards, particle hair, curves hair, scalp, bangs, beard, whiskers). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/hand-painted-style","name":"hand-painted-style","kind":"blender","job":"art direction","line":"Hand-painted texture look: values painted into the base color, little roughness variation, soft bevels to catch the paint. Five tenets and one reference page. Its reference pages: paint-workflow.","path":".claude/skills/hand-painted-style/SKILL.md","use":"Copy .claude/skills/hand-painted-style/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (hand painted, hand-painted, painted texture, brushwork, stylized painted). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/hard-surface","name":"hard-surface","kind":"blender","job":"model","line":"Crisp manufactured objects: devices, machines, weapons, sci-fi panels. Gives the order that works (primary volumes, cutters named SM_Cutter_* kept as live booleans, bevel after the boolean, weighted normals after the bevel), bevel widths per detail tier, panel-line and greeble rules, and a table of real-world features with how to model each. The skill to load for a product or device shot. Its reference pages: boolean-workflow, greeble-patterns.","path":".claude/skills/hard-surface/SKILL.md","use":"Copy .claude/skills/hard-surface/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (hard surface, sci-fi, industrial, military, vehicle, spaceship, weapon, robot, machinery, boolean, bevel, panel line, greeble, mechanical). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/hd-2d-style","name":"hd-2d-style","kind":"blender","job":"art direction","line":"HD-2D look: pixel characters on a soft 3D stage, strong depth of field and god rays, a tilted near-orthographic camera, warm theatrical key. Five tenets and one reference page. Its reference pages: hd2d-stack.","path":".claude/skills/hd-2d-style/SKILL.md","use":"Copy .claude/skills/hd-2d-style/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (HD-2D, HD2D, Octopath, triangle strategy, pixel 3D hybrid). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/historical-worlds","name":"historical-worlds","kind":"blender","job":"art direction","line":"Period settings (Western, pirate, samurai, Viking, ancient Egypt, Greece and Rome, Victorian, military eras): get silhouettes and materials right for the era and write the era down before kitbashing. One line and two reference pages. Its reference pages: military-eras, period-materials.","path":".claude/skills/historical-worlds/SKILL.md","use":"Copy .claude/skills/historical-worlds/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (western, pirate, samurai, ninja, Viking, ancient Egypt, ancient Greece, Roman, Victorian, modern, military, Cold War, World War). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/horror-style","name":"horror-style","kind":"blender","job":"art direction","line":"Psychological horror look (Silent Hill, Resident Evil, Chilla's Art, Iron Lung as its named references): sparse industrial spaces, a single motivated light source, desaturated palette, low-poly approach. One of the eight fuller style skills, with modeling and lighting sections. Its reference pages: analog-props, horror-layouts.","path":".claude/skills/horror-style/SKILL.md","use":"Copy .claude/skills/horror-style/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (horror, psychological horror, scary, Silent Hill, Resident Evil, Chilla's Art, Fear to Fathom, Iron Lung, creepy, unsettling). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/indie-horror-aesthetics","name":"indie-horror-aesthetics","kind":"blender","job":"art direction","line":"A pointer to five small reference pages, one per indie horror look (Silent Hill fog and rust, Fear to Fathom, Puppet Combo, corporate horror, location horror), with the advice to pick one and not mix them. Its reference pages: corporate-horror, fear-to-fathom, location-horror, puppet-combo, silent-hill.","path":".claude/skills/indie-horror-aesthetics/SKILL.md","use":"Copy .claude/skills/indie-horror-aesthetics/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (Silent Hill, Fear to Fathom, Puppet Combo, indie horror, corporate horror, cabin horror, hospital horror, forest horror, urban decay horror). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/isometric-style","name":"isometric-style","kind":"blender","job":"art direction","line":"Isometric dioramas: orthographic camera at the true-isometric angles (54.736 degrees and 30-degree patterns), assets judged from that one angle, tile footprints and pivots documented, soft key with cool fill. Handy for a diorama-style explainer shot. Its reference pages: iso-camera, tile-footprints.","path":".claude/skills/isometric-style/SKILL.md","use":"Copy .claude/skills/isometric-style/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (isometric, iso camera, diorama, strategy game, tile asset, orthographic iso, city builder view). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/lighting","name":"lighting","kind":"blender","job":"lighting","line":"Lighting by intent: three-point setup with angles and ratios, which light type for which job, a color-temperature table, HDRI steps, volumetric fog values (density 0.01 to 0.1, anisotropy 0.3 to 0.8) and LGT_ naming. Its reference page cinematic-light-rigs.md gives four written rigs with sizes, kelvin and watts: three-point studio, product hero shot, golden hour and turntable. The rigs give no distances, and at 1.6 to 2 m on a 30 cm object the stated watts overexposed our test by about three stops. Its reference pages: cinematic-light-rigs, horror-lighting-setups.","path":".claude/skills/lighting/SKILL.md","use":"Copy .claude/skills/lighting/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (lighting, light, HDRI, three point, rim light, volumetric, fog, mood, cinematic, horror lighting). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/liminal-space-style","name":"liminal-space-style","kind":"blender","job":"art direction","line":"Liminal spaces and Backrooms: familiar empty architecture, repetition, fluorescent lighting, no clutter. Five tenets and two reference pages. Its reference pages: backrooms, empty-public.","path":".claude/skills/liminal-space-style/SKILL.md","use":"Copy .claude/skills/liminal-space-style/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (liminal, liminal space, Backrooms, empty mall, empty school, poolrooms, transitional space). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/lod-pipeline","name":"lod-pipeline","kind":"blender","job":"export","line":"Making and checking LOD chains for game meshes: triangle budgets per level, four ways to generate them, naming and screen-size thresholds. Its reference pages: lod-budgets, lod-validation.","path":".claude/skills/lod-pipeline/SKILL.md","use":"Copy .claude/skills/lod-pipeline/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (LOD, LODs, level of detail, decimate, LOD0, LOD1, impostor, screen size). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/lookdev","name":"lookdev","kind":"blender","job":"review","line":"The loop that gets shading right: gray clay pass, base materials, a neutral three-point rig, then beauty light, a screenshot, a list of gaps, and at most three to five rounds changing one thing per round. Short, and the right habit for any render an agent cannot judge by eye in one go. Its reference pages: lookdev-checklist, lookdev-rig.","path":".claude/skills/lookdev/SKILL.md","use":"Copy .claude/skills/lookdev/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (lookdev, look development, shading review, material lighting loop, turntable, asset presentation). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/lowpoly-style","name":"lowpoly-style","kind":"blender","job":"art direction","line":"Low-poly look in the PS1 and PS2 tradition (it names Lethal Company and Mouthwashing): readable silhouettes, polygon guidelines, flat materials, no subdivision or bevel modifiers at all. Its reference pages: ps1-aesthetic.","path":".claude/skills/lowpoly-style/SKILL.md","use":"Copy .claude/skills/lowpoly-style/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (lowpoly, low poly, PS1, PS2, retro, Lethal Company, Mouthwashing, minimal polygon, flat shading). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/manga-style","name":"manga-style","kind":"blender","job":"art direction","line":"Manga look: design in grayscale values first, sparing screentone, speed lines, black-heavy compositions. Five tenets and one reference page. Its reference pages: manga-value-design.","path":".claude/skills/manga-style/SKILL.md","use":"Copy .claude/skills/manga-style/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (manga, seinen, shonen, shojo, screentone, manga panel, Japanese comic). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/mascot-puppet-horror","name":"mascot-puppet-horror","kind":"blender","job":"art direction","line":"Mascot and puppet horror: friendly shapes with dead eyes, felt, foam and plastic, a children's-show set gone wrong. Five tenets and one reference page. Its reference pages: mascot-cues.","path":".claude/skills/mascot-puppet-horror/SKILL.md","use":"Copy .claude/skills/mascot-puppet-horror/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (mascot horror, puppet horror, felt horror, costume horror, Happy Tree wrongness, puppet combo adjacent). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/materials","name":"materials","kind":"blender","job":"material","line":"PBR materials done consistently: a set of MAT_ master materials (metal, plastic, fabric, glass, emissive, organic), a table of metallic and roughness values for ten common surfaces, procedural wear, dirt and rust patterns, and a material-count budget per asset. The value table is the part to keep open while shading any shot. Its reference pages: procedural-patterns, surface-recipes.","path":".claude/skills/materials/SKILL.md","use":"Copy .claude/skills/materials/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (material, shader, PBR, procedural, metal, wood, fabric, glass, rust, moss, Principled BSDF). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/minimalist-style","name":"minimalist-style","kind":"blender","job":"art direction","line":"Minimalism: few shapes, few colors, deliberate empty space ('reduce until it breaks, then add one thing back'). Five tenets and one reference page. A fitting brief for a clean title or product plate. Its reference pages: reduction-rules.","path":".claude/skills/minimalist-style/SKILL.md","use":"Copy .claude/skills/minimalist-style/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (minimalist, minimal, abstract, reduced forms, negative space, simple shapes). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/neon-retrofuturism","name":"neon-retrofuturism","kind":"blender","job":"art direction","line":"Synthwave and vaporwave: sunset gradients, a perspective grid, chrome with neon. One line and two reference pages, one of them 86 bytes long. Its reference pages: synthwave, vaporwave.","path":".claude/skills/neon-retrofuturism/SKILL.md","use":"Copy .claude/skills/neon-retrofuturism/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (neon, vaporwave, synthwave, retrofuturistic, outrun, retrowave, neon nights). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/noir-style","name":"noir-style","kind":"blender","job":"art direction","line":"Noir look: hard motivated key lights (blinds, a neon slash), negative fill, smoke shafts, wet ground as a mirror, crushed but detailed shadows. Five tenets and one reference page on noir lighting. Its reference pages: noir-lighting.","path":".claude/skills/noir-style/SKILL.md","use":"Copy .claude/skills/noir-style/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (noir, neo-noir, hardboiled, detective noir, high contrast black and white). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/painterly-style","name":"painterly-style","kind":"blender","job":"art direction","line":"Watercolor and oil looks: soft shadow edges, pigment or paper overlays in the material or the composite, little harsh specular. Four tenets and two reference pages. Its reference pages: oil-painting, watercolor.","path":".claude/skills/painterly-style/SKILL.md","use":"Copy .claude/skills/painterly-style/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (painterly, watercolor, oil painting, impressionist, illustrative paint, gouache). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/physics-sim","name":"physics-sim","kind":"blender","job":"simulation","line":"Rigid body, soft body and destruction: active against passive bodies, hinge and breakable constraints, pre-cut shards triggered on a chosen frame, then bake to a cache before rendering. Its reference pages: destruction-pipeline, rigid-body-presets, sim-bake-checklist.","path":".claude/skills/physics-sim/SKILL.md","use":"Copy .claude/skills/physics-sim/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (physics, rigid body, soft body, destruction, fracture, debris, constraint, simulation bake, collapse). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/pixel-art-style","name":"pixel-art-style","kind":"blender","job":"art direction","line":"Pixel-art discipline for 3D assets: declare the texel size, nearest filtering, limited palette, avoid thin triangles that shimmer. Five tenets and one reference page. Its reference pages: texel-rules.","path":".claude/skills/pixel-art-style/SKILL.md","use":"Copy .claude/skills/pixel-art-style/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (pixel art, pixel, texel, low res texture, sprite-like, pixelated). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/procedural-modeling","name":"procedural-modeling","kind":"blender","job":"model","line":"Parametric assets (rocks, buildings, roads, terrain, pipes, sci-fi panels) built with Geometry Nodes or modifiers, with variation testing and the bake-for-export decision. The only skill with no reference pages; it overlaps geometry-nodes heavily.","path":".claude/skills/procedural-modeling/SKILL.md","use":"Copy .claude/skills/procedural-modeling/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (procedural modeling, procedural rock, procedural building, terrain, road, pipe, cable, sci-fi panel, parametric). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/prop-artist","name":"prop-artist","kind":"blender","job":"model","line":"Grounded everyday props (furniture, tools, household objects) when hard-surface is too mechanical: silhouette first, real-world scale, three prop tiers, kitbash rules and material guidance. Has no MCP section; it is a workflow and a checklist. Its reference pages: everyday-prop-checklist, kitbash-library, prop-tiers.","path":".claude/skills/prop-artist/SKILL.md","use":"Copy .claude/skills/prop-artist/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (prop, props, furniture, chair, table, bottle, tool, kitbash, household, everyday object, hero prop, set prop). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/psx-horror-style","name":"psx-horror-style","kind":"blender","job":"art direction","line":"PlayStation-1-era horror: 100 to 800 triangles per prop, 64 to 256 pixel textures, fog as a must, affine wobble as an option, light VHS and CRT treatment in compositing. Its reference pages: psx-horror-budgets, psx-horror-palette.","path":".claude/skills/psx-horror-style/SKILL.md","use":"Copy .claude/skills/psx-horror-style/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (PSX horror, PS1 horror, Puppet Combo, retro horror, affine texture, crunchy lowpoly horror, VHS horror). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/qa-review","name":"qa-review","kind":"blender","job":"review","line":"A ship or no-ship review backed by screenshots: five required views, four defect levels, and a verdict template. It tells the agent never to pass a visual task without looking at it. Its reference pages: qa-verdict-template, screenshot-angles.","path":".claude/skills/qa-review/SKILL.md","use":"Copy .claude/skills/qa-review/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (QA, quality assurance, review, validation, checklist, screenshot review, ship check, art review). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/realistic-style","name":"realistic-style","kind":"blender","job":"art direction","line":"Photoreal direction: real-world scale checks, high-poly to baked low-poly, photogrammetry cleanup, physically plausible PBR values and a checklist. Reference pages hold a PBR value sheet and scan cleanup steps. Its reference pages: pbr-values, scan-cleanup.","path":".claude/skills/realistic-style/SKILL.md","use":"Copy .claude/skills/realistic-style/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (realistic, photoreal, AAA, photogrammetry, scan cleanup, PBR accurate, high poly, cinematic). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/rendering","name":"rendering","kind":"blender","job":"render","line":"Render settings in tables: Cycles preview against production (64 to 128 samples against 512 to 2048, OpenImageDenoise, bounces), Eevee settings, which render passes to output and why, AgX color management, and a five-line turntable template (empty at the asset's origin, 0 to 360 degrees over 120 frames). Followed for our test render. Its reference pages: npr-rendering, render-passes.","path":".claude/skills/rendering/SKILL.md","use":"Copy .claude/skills/rendering/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (render, Cycles, Eevee, sampling, denoise, camera, render pass, color management, output). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python.","preview":{"poster":"assets/asset-library/blender-skills-product-turn-sheet.jpg","w":1278,"h":480}},{"id":"blender-skills/retopology","name":"retopology","kind":"blender","job":"model","line":"Turning a dense sculpt into a clean quad mesh: methods (shrinkwrap setup included), edge-loop and pole rules, where triangles are allowed, polycount targets and a validation checklist. Its reference pages: facial-retopo, game-cinematic-topo.","path":".claude/skills/retopology/SKILL.md","use":"Copy .claude/skills/retopology/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (retopo, retopology, edge loop, quad, topology, animation ready, poly reduction, remesh). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/retro-16bit-style","name":"retro-16bit-style","kind":"blender","job":"art direction","line":"SNES and Genesis-era look: richer palettes than 8-bit, dither and gradient cues. About 500 characters and one reference page. Its reference pages: sixteen-bit-notes.","path":".claude/skills/retro-16bit-style/SKILL.md","use":"Copy .claude/skills/retro-16bit-style/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (16-bit, 16bit, SNES, Genesis, Mega Drive, retro 16-bit). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/retro-8bit-style","name":"retro-8bit-style","kind":"blender","job":"art direction","line":"NES-era look: very few colors, high-contrast characters, no gradients unless dithered. About 600 characters and one reference page. Its reference pages: eight-bit-constraints.","path":".claude/skills/retro-8bit-style/SKILL.md","use":"Copy .claude/skills/retro-8bit-style/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (8-bit, 8bit, NES, retro 8-bit, four color, chunky pixel). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/rigging","name":"rigging","kind":"blender","job":"rig","line":"Armatures for deforming assets: bone naming and hierarchy, IK against FK, constraints, weight painting, mechanical rigs, facial rigs and drivers, with test poses to check deformation. Its reference pages: humanoid-rig, mechanical-rig.","path":".claude/skills/rigging/SKILL.md","use":"Copy .claude/skills/rigging/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (rig, rigging, armature, bone, IK, FK, weight paint, constraint, facial rig, driver). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/scene-assembly","name":"scene-assembly","kind":"blender","job":"scene","line":"Laying out a large scene: a collection structure (layout, modular geo, set dressing, lights, cameras, FX), collection instances against library links against append, graybox before dressing. Useful for keeping a multi-object shot tidy. Its reference pages: collection-template, linking-overrides.","path":".claude/skills/scene-assembly/SKILL.md","use":"Copy .claude/skills/scene-assembly/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (scene assembly, layout, linking, library override, collection instance, level layout, set assembly, outliner organization). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/sci-fi-punk-worlds","name":"sci-fi-punk-worlds","kind":"blender","job":"art direction","line":"Sci-fi and the punk family (hard sci-fi, space opera, cyberpunk, steampunk, dieselpunk, atompunk, solarpunk, biopunk, clockpunk): choose one lane and do not mix them. One line of direction and five reference pages. Its reference pages: cyberpunk, diesel-atom, hard-space, solar-bio-clock, steampunk.","path":".claude/skills/sci-fi-punk-worlds/SKILL.md","use":"Copy .claude/skills/sci-fi-punk-worlds/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (sci-fi, hard sci-fi, space, cyberpunk, steampunk, dieselpunk, atompunk, solarpunk, biopunk, clockpunk, retrofuturism). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/sculpting","name":"sculpting","kind":"blender","job":"model","line":"When to sculpt and how: Dyntopo against multiresolution, which brush for which job, the order of detail passes, alphas, damage and wear, and the handoff to retopology and baking. Its reference pages: brush-guide.","path":".claude/skills/sculpting/SKILL.md","use":"Copy .claude/skills/sculpting/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (sculpt, dyntopo, multires, brush, wrinkle, damage, organic detail, surface detail, alpha). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/set-dressing","name":"set-dressing","kind":"blender","job":"scene","line":"Placing props so a space tells a story: density by zone, and a cluster method (pick one story beat, place three to seven props that sell it, add one or two wear cues, stop). Its reference pages: density-map, story-clusters.","path":".claude/skills/set-dressing/SKILL.md","use":"Copy .claude/skills/set-dressing/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (set dressing, dressing, storytelling props, interior dressing, clutter, narrative placement, set decals). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/stop-motion-craft-style","name":"stop-motion-craft-style","kind":"blender","job":"art direction","line":"Claymation, paper craft, felt and wooden-puppet looks: visible seams and fingerprints, real craft materials, slight irregularity, stepped motion as an option. Five tenets and two reference pages. Its reference pages: claymation, paper-craft.","path":".claude/skills/stop-motion-craft-style/SKILL.md","use":"Copy .claude/skills/stop-motion-craft-style/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (stop motion, claymation, clay, paper craft, papercraft, handmade, craft aesthetic, puppet physical). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/stylized-style","name":"stylized-style","kind":"blender","job":"art direction","line":"Broad non-photoreal direction: shape language, exaggerated proportions, color harmony schemes, NPR rendering and hand-painted texture workflow. One of the fuller style skills; its rendering counterpart is rendering/references/npr-rendering.md (toon shading through Shader to RGB, three outline methods). Its reference pages: npr-shaders, palette-examples.","path":".claude/skills/stylized-style/SKILL.md","use":"Copy .claude/skills/stylized-style/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (stylized, NPR, hand-painted, toon, cartoon, exaggerated, shape language, cel shading). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/texture-workflow","name":"texture-workflow","kind":"blender","job":"texture","line":"Baking and texture sets for games: high-to-low bake setup with a cage, which maps to bake (normal, AO, curvature, roughness), atlases, decals, channel packing and memory budgets by resolution. Its reference pages: bake-troubleshooting, orm-packing.","path":".claude/skills/texture-workflow/SKILL.md","use":"Copy .claude/skills/texture-workflow/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (texture, bake, normal map, AO, curvature, roughness, metallic, height, atlas, decal, emission). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/unity-export","name":"unity-export","kind":"blender","job":"export","line":"Unity-specific export: GLB for static meshes and FBX for animated ones, unit and axis defaults, material rules, humanoid rig notes and a verify-in-Unity checklist. Its reference pages: unity-checklist, unity-materials.","path":".claude/skills/unity-export/SKILL.md","use":"Copy .claude/skills/unity-export/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (Unity, Unity export, Unity FBX, Unity GLTF, humanoid, Unity materials, Unity LOD, Unity collision). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/unreal-export","name":"unreal-export","kind":"blender","job":"export","line":"Unreal-specific export: FBX defaults, the centimeter scale trap, UE naming (SM_, SK_, UCX_, SOCKET_), collision and skeletal mesh notes and a verify-in-Unreal checklist. Its reference pages: ucx-naming, unreal-checklist.","path":".claude/skills/unreal-export/SKILL.md","use":"Copy .claude/skills/unreal-export/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (Unreal, UE5, UE4, Unreal export, UCX, Unreal LOD, skeletal mesh, Unreal FBX, socket). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/uv-workflow","name":"uv-workflow","kind":"blender","job":"texture","line":"UV unwrapping for production: where seams go, texel density, packing, mirrored UVs, UDIM, lightmap UVs and modular atlases, with a validation checklist. Its reference pages: texel-density, trim-sheets.","path":".claude/skills/uv-workflow/SKILL.md","use":"Copy .claude/skills/uv-workflow/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (UV, unwrap, seam, texel density, UV pack, UDIM, lightmap UV, UV layout). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/vector-style","name":"vector-style","kind":"blender","job":"art direction","line":"Flat vector look in one line: flat fills, clean edges, iconic shapes, almost no gradients. The shortest skill in the pack (500 characters) and one reference page. Its reference pages: vector-rules.","path":".claude/skills/vector-style/SKILL.md","use":"Copy .claude/skills/vector-style/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (vector, flat design, clean vector, graphic flat, svg-like). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/vegetation-artist","name":"vegetation-artist","kind":"blender","job":"model","line":"Trees, bushes and grass built as trunk, branches and alpha leaf cards on one atlas, with wind vertex colors and canopy LODs. Game-first: its answer for a distant forest is billboards. Its reference pages: leaf-atlas, tree-lod, wind-vertex-colors.","path":".claude/skills/vegetation-artist/SKILL.md","use":"Copy .claude/skills/vegetation-artist/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (vegetation, foliage, tree, plant, grass, bush, leaf cards, canopy, ivy, forest). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/vehicle-artist","name":"vehicle-artist","kind":"blender","job":"model","line":"Cars, trucks, aircraft, ships and mechs: block the proportions from orthographic references, then body volumes, wheels, panel breaks, cutters, bevels, glass and lights, with how to split a vehicle into objects and LOD targets for games. Its reference pages: proportion-blockout, vehicle-lod-targets, vehicle-object-split.","path":".claude/skills/vehicle-artist/SKILL.md","use":"Copy .claude/skills/vehicle-artist/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (vehicle, car, truck, aircraft, plane, ship, boat, mech, tank, motorcycle, transit, chassis, bodywork). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/vfx-fx","name":"vfx-fx","kind":"blender","job":"effect","line":"Smoke, fire, sparks, debris and energy effects: choose cards and ribbons for real-time or Mantaflow, particles and Geometry Nodes for a render; keep the simulation domain tight, approve motion at low resolution, cache before the final render. Its reference pages: fx-timing-brief, game-fx-export, volume-domain-rules.","path":".claude/skills/vfx-fx/SKILL.md","use":"Copy .claude/skills/vfx-fx/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (VFX, FX, smoke, fire, explosion, particles, sparks, trails, muzzle flash, magic effect, geometry nodes FX). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/visual-console-eras","name":"visual-console-eras","kind":"blender","job":"art direction","line":"Matching a hardware or media era (PS1 to PS5, arcade, DOS, CRT, VHS, film grain) by its polygon counts, texture filtering, lighting model and post effects. One line and three reference pages. Its reference pages: crt-vhs-film, ps1-ps2, ps3-ps5.","path":".claude/skills/visual-console-eras/SKILL.md","use":"Copy .claude/skills/visual-console-eras/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (PS1 style, PS2 style, PS3 style, PS4 style, PS5 style, retro arcade, DOS style, CRT style, VHS style, film grain). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/voxel-style","name":"voxel-style","kind":"blender","job":"art direction","line":"Block-grid look: pick a voxel size and snap everything to it, stepped forms instead of curves, a small palette atlas, no subdivision. Its reference pages: voxel-characters, voxel-grid.","path":".claude/skills/voxel-style/SKILL.md","use":"Copy .claude/skills/voxel-style/ and the shared .claude/skills/references/ folder into your agent's skills directory; the skill loads on its trigger words (voxel, Minecraft, blocky, cube world, pixel voxel, grid block, chunk). It is instructions only: the agent turns them into Blender Python and runs that through the Blender MCP server, or with blender --background --python."},{"id":"blender-skills/reference-image-match","name":"reference-image-match (shared reference)","kind":"blender","job":"review","line":"The pack's best single page, though it is a shared reference and not one of the 94 skills: a written protocol for making a Blender scene match an attached photo or concept image. Analyse the reference first (subject, silhouette, camera, lighting, materials, a palette of five to eight hex values), match the camera before any detail, build geometry in three tiers, then materials, lighting and grading, and compare a screenshot to the reference after each phase, at most three rounds. Includes a table of common failures and their fixes. Used with reference-analysis-template.md and visual-match-checklist.md beside it. Size: about 9,000 characters.","path":".claude/skills/references/reference-image-match.md","use":"Copy .claude/skills/references/ with the skills. blender-director sends the agent here whenever an image is attached with 'match this'. It names the MCP tools get_viewport_screenshot and execute_blender_code; without the MCP server, render a still with bpy and compare that."},{"id":"blender-skills/mcp-config","name":"Blender MCP client config (.mcp.json, .cursor/mcp.json)","kind":"tool","job":"3d","line":"Two identical config files that register the Blender MCP server for Claude Code and Cursor. They are Windows-only as written (the command is cmd /c uvx), they run the old package name blender-mcp at whatever version is newest when the agent starts, and they set DISABLE_TELEMETRY=true, which turns off all of that server's reporting. On a Mac the command must be changed to uvx.","path":".mcp.json","use":"Do not copy as is on macOS or Linux. The working equivalent: {\"mcpServers\": {\"blender\": {\"command\": \"uvx\", \"args\": [\"mcp-for-blender\"], \"env\": {\"DISABLE_TELEMETRY\": \"true\"}}}}","needs":"Uv, Blender with the MCP for Blender add-on enabled and its server started"}]},{"id":"dream-loop","name":"dream-loop","repo":"achimala/dream-loop","url":"https://github.com/achimala/dream-loop","commit":"9bddb901f7d071cfefdd21e264267c757177a9df","commit_date":"2026-09-10","licence":{"name":"MIT","basis":"LICENSE file, 'Copyright (c) 2026 Anshu Chimala'; SKILL.md front matter says license: MIT","note":"What the loop makes with outside services falls under those services' terms."},"kind":"skill","line":"An agent skill that first generates a picture of the finished scene, then builds toward it, checking a live screenshot against that picture round after round while a separate critic scores the gap.","look_only":false,"get":{"command":"npx skills add achimala/dream-loop","note":""},"needs":"An agent with image generation and image input. For generated 3D models: a Fal key and credit, about $0.30 for a large asset by the skill's own figures.","sends":"Nothing by itself. When an agent follows it, the target picture and cut-outs of each object go to an image generator, and the chosen pictures go to fal.ai. Its capture server listens on your machine only, and serves the working folder to anything on that machine while it runs.","seen":[{"line":"Its helper's 9 tests passed with nothing leaving the machine."},{"line":"Its capture server took a posted screenshot and saved it, and refused a file that was not an image."}],"not_seen":"The loop itself. It needs an agent session with image generation, and a paid key for models.","count":10,"kinds":{"skill":7,"tool":3},"assets":[{"id":"dream-loop/dream-loop","name":"dream-loop","kind":"skill","job":"review","line":"The skill itself, 2,900 characters: first get a target picture (the user's, or one made with an image generator and prompted as a real in-engine screenshot, never 'concept art'), save it as .dream-loop/target.png, then build until a live screenshot matches it. It picks one of two workflows by the user's subscription tier and tells the agent not to read the other. If the agent has no image generator it must stop and ask. Written around three.js scenes in a browser; Blender is one optional way to make a model.","path":"SKILL.md","use":"npx skills add achimala/dream-loop   then say 'dream loop' with a description of the scene, or hand it a target image"},{"id":"dream-loop/pro-workflow","name":"Pro workflow","kind":"skill","job":"review","line":"The loop with a judge: build a first pass, take a screenshot, give the screenshot and the target to a fresh sub-agent that scores composition 0 to 3, lighting 0 to 3, materials 0 to 3 and details 0 to 1 and lists every gap as a fixable instruction; fix them all, repeat. Stop at 8 of 10 with an acceptable frame rate. If the best score has not risen a full point in two rounds, stop tweaking and rethink the whole approach once; if that fails too, ask the user. The judge's prompt is written out in full and is the part worth lifting.","path":"references/pro-mode/workflow.md","use":"Loaded by the skill for 'high tier' users or when the user says Pro. The judge needs: the latest screenshot, the target image, last round's screenshot and verdict, and the prompt in this file.","needs":"An agent that can start sub-agents with a clean context and can see images"},{"id":"dream-loop/plus-workflow","name":"Plus workflow","kind":"skill","job":"plan","line":"The cheaper loop with no judge: a smaller model orchestrates and, three times, starts a fresh sub-agent on the strongest model at its lowest reasoning setting with only the target, the latest screenshot and the user's ask, telling it to close the gap; the orchestrator only tests, fixes bugs such as wrongly oriented models, and takes the next screenshot. It tells very large models to stop and ask the user to switch to a smaller one. This workflow says do not use Blender: 'too slow/expensive'.","path":"references/plus-mode/workflow.md","use":"Loaded by the skill for 'low tier' users or when the user says Plus. Runs three rounds, then asks the user whether to go on.","needs":"An agent that can start sub-agents on a chosen model"},{"id":"dream-loop/assets-3d-pro","name":"How to get 3D assets (Pro)","kind":"skill","job":"model","line":"A fixed order for sourcing a model: download one if the user allowed it; else generate it from an image with a paid image-to-3D service (fal.ai: Tripo H3.1 at about $0.30 an asset for important things, Trellis at about $0.02 for small ones), feeding it a clean cut-out of the object made from the target picture; else model it in Blender by script; else build it in code. It tells the agent that calling the paid service 'does not count as downloading assets' and is allowed even when the user said not to download from the internet, and to use an image generator for textures and normal maps in every case.","path":"references/pro-mode/assets-3d.md","use":"Read by the Pro workflow when a model is needed","needs":"A Fal API key (FAL_KEY) for step 2; Blender for step 3"},{"id":"dream-loop/assets-3d-plus","name":"How to get 3D assets (Plus)","kind":"skill","job":"model","line":"The same sourcing order as the Pro page with the Blender step removed ('DO NOT use Blender for modeling') and a note that the image-to-3D calls take one to two minutes, so run them in parallel and poll.","path":"references/plus-mode/assets-3d.md","use":"Handed by path to each worker sub-agent in the Plus workflow","needs":"A Fal API key (FAL_KEY) for step 2"},{"id":"dream-loop/fal-reference","name":"Fal bootstrap and batch generation","kind":"skill","job":"model","line":"The working recipes for the two image-to-3D models on fal.ai, checked by the author against the official schemas on 2026-09-09: tripo3d/h3.1/image-to-3d with texture, pbr and face_limit, and fal-ai/trellis (no /image-to-3d suffix) with mesh_simplify and texture_size; the job-file format; and what each failure state means so an agent never pays twice for one model. It says the helper 'sends the selected source images to Fal as data URIs'.","path":"references/fal.md","use":"Read before calling scripts/fal-batch.mjs","needs":"A Fal account with credit"},{"id":"dream-loop/fal-batch","name":"fal-batch.mjs","kind":"tool","job":"model","line":"A 172-line Node script with no dependencies that turns pictures into .glb models through fal.ai's queue: check validates a job file offline, submit uploads each ready image, collect polls and downloads finished models. It is careful with money and secrets: it never resubmits a job that was accepted or might have been, talks only to https://queue.fal.run, does not send the key to the download host, strips keys, URLs and payloads from error text, and checks that each download is a complete GLB 2.0 file. Useful by itself to anyone who wants image-to-3D from a shell.","path":"scripts/fal-batch.mjs","use":"node scripts/fal-batch.mjs check .dream-loop/fal-jobs.json   then   submit   then   collect   (jobs file: {\"jobs\": [{\"id\": \"arch\", \"endpoint\": \"tripo3d/h3.1/image-to-3d\", \"image\": \"assets/arch.png\", \"output\": \"../models/arch.glb\", \"input\": {\"texture\": true, \"pbr\": true, \"face_limit\": 200000}}]})","needs":"Node 18 or newer; FAL_KEY or FAL_API_KEY for submit and collect (check needs neither)"},{"id":"dream-loop/fal-batch-test","name":"fal-batch.test.mjs","kind":"tool","job":"review","line":"Nine tests for the Fal helper that run against a mocked network: concurrency, resuming without paying twice, uncertain submissions never retried, retry after a connection that never opened, sanitized 422 errors, partial responses.","path":"scripts/fal-batch.test.mjs","use":"node --test scripts/fal-batch.test.mjs","needs":"Node 18 or newer"},{"id":"dream-loop/preview-server","name":"preview-server.py","kind":"tool","job":"review","line":"A 46-line Python web server for the loop's screenshots: it serves the working folder on this machine only and accepts a PNG posted to /__capture, saving it under .dream-loop/captures/ with a timestamp and as latest.png, so a page can hand its own canvas to the agent. Nothing in the skill's text mentions it; the agent has to find it.","path":"scripts/preview-server.py","use":"python3 scripts/preview-server.py --directory . --port 4172   then from the page: fetch('/__capture', {method: 'POST', body: pngBlob})","needs":"Python 3"},{"id":"dream-loop/vesper-preview","name":"Vesper demo recording","kind":"skill","job":"scene","line":"A 7 MB animated GIF of the author's example result: an isometric fantasy scene in three.js that the README says one model built from one prompt in an hour. It is the only evidence in the repo of what the loop produces, and the example is a browser scene, not Blender. The live demo it links to is not in the repo.","path":"assets/vesper-preview.gif","use":"","look_only":true}]},{"id":"threejs-game-skills","name":"Three.js Game Skills","repo":"majidmanzarpour/threejs-game-skills","url":"https://github.com/majidmanzarpour/threejs-game-skills","commit":"8286774b22a2566bf894dbc825825c16921866af","commit_date":"2026-09-27","licence":{"name":"MIT","basis":"LICENSE file, Copyright (c) 2026 Majid Manzarpour; the README's license line says MIT. package.json is private and has no license field.","note":"Nothing third-party is bundled. What the three paid services return falls under those services' terms."},"kind":"three","line":"Nine agent skills for building three.js browser games. With them come a Vite starter, a shader and material cookbook, game-feel code, a headless canvas inspector, and helper scripts for three paid asset services.","look_only":false,"get":{"command":"npx skills add majidmanzarpour/threejs-game-skills --skill '*' -a claude-code -g -y","note":"For Codex, use -a codex."},"needs":"Nothing to read the skills. To run what they build: Node and npm, Python 3 for the helper scripts, and Chromium through Playwright for the inspector and tests. Optional and paid: Tripo, Gemini and ElevenLabs keys for the three generator skills.","sends":"Nothing by itself. Three helper scripts call paid services when an agent runs them with a key: prompts and local images go to Tripo and to Google's Gemini, and prompts, text and audio files go to ElevenLabs. The director skill tells the agent to use those services by default for \"premium\" requests when the keys are set.","seen":[{"line":"Every recipe in the shader and material cookbook compiled and drew on the first run: nine materials on nine balls, a rim glow, swaying grass, a dissolve, a sky dome, bloom.","preview":{"poster":"assets/asset-library/threejs-game-skills-cookbook-live-a.jpg","w":1280,"h":720}},{"line":"Driven by one number instead of the clock, the cookbook scene gave the same picture every time. So its shaders can be rendered frame by frame. 120 frames took 99 seconds with software rendering.","preview":{"video":"assets/asset-library/threejs-game-skills-cookbook-stepped.mp4","poster":"assets/asset-library/threejs-game-skills-cookbook-stepped-poster.jpg","w":1280,"h":720,"seconds":5}},{"line":"The starter built in 0.2 seconds and drew a small arena game that answered the keys. As shipped it is not frame-exact: its loop reads the browser's clock.","preview":{"poster":"assets/asset-library/threejs-game-skills-scaffold-t1.jpg","w":1280,"h":720}}],"not_seen":"The three generator scripts and everything that needs a paid key, the canvas inspector, the tests and the game-feel code were read, not run. Nothing was tried inside Remotion.","count":66,"kinds":{"three":48,"tool":12,"skill":5,"template":1},"assets":[{"id":"threejs-game-skills/threejs-game-director","name":"threejs-game-director","kind":"three","job":"plan","line":"The entry skill: sets how far to take a three.js browser game from the user's own words (a small arcade game is not a request for the premium pipeline), loads the eight sibling skills by phase, hands work to at most two helpers, keeps a progress note, and gathers browser evidence before saying done. Supported by three reference pages: paid-asset job recovery, the evidence manifest format and maintainer evaluation scenarios. With API keys set it tells the agent to generate paid assets for 'premium' requests without asking per job.","path":"skills/threejs-game-director/SKILL.md","use":"npx skills add majidmanzarpour/threejs-game-skills --skill '*' -a claude-code -g -y   (Codex: -a codex; from a clone: ./install.sh --claude | --codex | --all). Then: \"Use threejs-game-director to build a small arcade game where ...\""},{"id":"threejs-game-skills/threejs-gameplay-systems","name":"threejs-gameplay-systems","kind":"three","job":"game","line":"How to make a playable loop: a one-page design brief, a core-loop contract proved in code, a level plan, then small ownership folders (core, game, entities, systems) built in playable steps. Ships the Vite + TypeScript + three.js starter and three reference pages: game feel with copy-paste code (tween, screenshake, hitstop, squash and stretch, FOV punch, flash, pickup pop, rumble, audio pitch), genre patterns for eight genres, and physics engine choice with a Rapier fixed-timestep setup.","path":"skills/threejs-gameplay-systems/SKILL.md","use":"npx skills add majidmanzarpour/threejs-game-skills --skill '*' -a claude-code -g -y   (Codex: -a codex; from a clone: ./install.sh --claude | --codex | --all). Starter: python3 <skill>/scripts/create_threejs_game.py ./my-game && cd my-game && npm install && npm run dev"},{"id":"threejs-game-skills/threejs-aaa-graphics-builder","name":"threejs-aaa-graphics-builder","kind":"three","job":"3d","line":"How to lift a three.js scene from primitives to authored-looking graphics, in this order: forms, then materials, then lighting, then effects. Four reference pages carry the substance: modeling recipes (hero vehicle, character, obstacle families, world kit, which geometry class for what), a shader and material cookbook with working code, render budgets with a named material kit, and a ten-category visual scorecard with three calibration screenshots. The name oversells: it is a careful stylized-game guide, not film-grade rendering.","path":"skills/threejs-aaa-graphics-builder/SKILL.md","use":"npx skills add majidmanzarpour/threejs-game-skills --skill '*' -a claude-code -g -y   (Codex: -a codex; from a clone: ./install.sh --claude | --codex | --all). Read references/shader-cookbook.md for code you can paste into any three.js project (targets three ^0.184).","preview":{"poster":"assets/asset-library/threejs-game-skills-cookbook-live-a.jpg","w":1280,"h":720}},{"id":"threejs-game-skills/threejs-game-ui-designer","name":"threejs-game-ui-designer","kind":"three","job":"layout","line":"How to design a game's HUD, menus and touch controls as game interface, not a web dashboard: hierarchy (status, objective, feedback, flavor), HUD zones, fixed-width numerals so values do not shift layout, safe areas, 44 px touch targets, pointer-cancel handling, and a list of web-page defaults to avoid. One reference page (ui-patterns.md).","path":"skills/threejs-game-ui-designer/SKILL.md","use":"npx skills add majidmanzarpour/threejs-game-skills --skill '*' -a claude-code -g -y   (Codex: -a codex; from a clone: ./install.sh --claude | --codex | --all)"},{"id":"threejs-game-skills/threejs-debug-profiler","name":"threejs-debug-profiler","kind":"three","job":"review","line":"How to find why a three.js page is blank, broken or slow: reproduce first, then an ordered checklist for blank canvases (canvas size, WebGL context, one render loop, camera, materials, lights, fog), asset and audio loading, loop and physics timing, mobile input, and a profiling order that changes one thing at a time. One reference page (debug-playbook.md).","path":"skills/threejs-debug-profiler/SKILL.md","use":"npx skills add majidmanzarpour/threejs-game-skills --skill '*' -a claude-code -g -y   (Codex: -a codex; from a clone: ./install.sh --claude | --codex | --all)"},{"id":"threejs-game-skills/threejs-qa-release","name":"threejs-qa-release","kind":"three","job":"review","line":"How to prove a three.js game works the way a player meets it: build, open in a real browser, check console errors and non-blank canvas pixels on desktop and phone viewports, exercise real input, then prepare a static-host release. Ships the canvas inspector script and three reference pages: release checks, screenshot baselines with a determinism contract, and a scripted bot playtest.","path":"skills/threejs-qa-release/SKILL.md","use":"npx skills add majidmanzarpour/threejs-game-skills --skill '*' -a claude-code -g -y   (Codex: -a codex; from a clone: ./install.sh --claude | --codex | --all). Inspector: node <skill>/scripts/inspect-threejs-canvas.mjs --url http://<your-dev-server>:5188"},{"id":"threejs-game-skills/threejs-3d-generator","name":"threejs-3d-generator","kind":"three","job":"model","line":"Drives the paid Tripo API to make 3D models for a three.js project: text to 3D, image to 3D, texturing, auto-rigging, animation retargeting, format conversion (GLB, FBX, GLTF, and STL or 3MF for printing), with checkpoints so an interrupted job resumes without paying twice. The rigging rules are hard-won and specific (which rig version per body plan, never animate in place, validate the skeleton before retargeting). Three reference pages: API notes, three.js import, pairing with the image skill.","path":"skills/threejs-3d-generator/SKILL.md","use":"npx skills add majidmanzarpour/threejs-game-skills --skill '*' -a claude-code -g -y   (Codex: -a codex; from a clone: ./install.sh --claude | --codex | --all). python3 <skill>/scripts/threejs_3d_asset.py text --prompt \"...\" --wait --download --out-dir assets/models/x","needs":"TRIPO_API_KEY (a paid Tripo account); Python 3"},{"id":"threejs-game-skills/threejs-image-generator","name":"threejs-image-generator","kind":"three","job":"image","line":"Drives Google's Gemini image API to make the 2D layer of a 3D project: concept sheets, clean reference images for image-to-3D, texture references, sky and background plates, decals, icons and menu art, or to edit an image you supply. Includes five prompt patterns (3D reference, riggable character, seamless texture, UI art, sky plate).","path":"skills/threejs-image-generator/SKILL.md","use":"npx skills add majidmanzarpour/threejs-game-skills --skill '*' -a claude-code -g -y   (Codex: -a codex; from a clone: ./install.sh --claude | --codex | --all). uv run <skill>/scripts/generate_image.py --prompt \"...\" --filename assets/concepts/out.png --resolution 2K","needs":"GEMINI_API_KEY (paid use of Google's image API); uv, which fetches google-genai and pillow on first run"},{"id":"threejs-game-skills/threejs-audio-generator","name":"threejs-audio-generator","kind":"three","job":"audio","line":"Drives the paid ElevenLabs API for game sound: short sound effects, looping ambience, music tracks, spoken lines, voice conversion from a scratch recording, and noise cleanup, plus how to plan an audio matrix from the events a game really has and wire it through Web Audio. One reference page (audio-workflows.md).","path":"skills/threejs-audio-generator/SKILL.md","use":"npx skills add majidmanzarpour/threejs-game-skills --skill '*' -a claude-code -g -y   (Codex: -a codex; from a clone: ./install.sh --claude | --codex | --all). python3 <skill>/scripts/threejs_audio_asset.py sfx --prompt \"...\" --duration 1.2 --out assets/audio/sfx/x.mp3","needs":"ELEVENLABS_API_KEY (a paid ElevenLabs account); Python 3"},{"id":"threejs-game-skills/threejs-vite-game","name":"threejs-vite-game starter","kind":"template","job":"game","line":"A whole Vite + TypeScript + three.js starter: one arena, a capsule player you move with WASD or a touch stick, eight pickups, a HUD, shadows, ACES tone mapping, a seeded random generator, a diagnostics object, five test hooks for frozen screenshots, and Playwright tests. It is deliberately plain (the pack's own scorecard would call it a 1). Its loop runs on the browser's clock with the step capped at 0.05 s, so it plays in real time; it is not built to be rendered frame by frame.","path":"skills/threejs-gameplay-systems/assets/threejs-vite-game","use":"python3 skills/threejs-gameplay-systems/scripts/create_threejs_game.py ./my-game && cd my-game && npm install && npm run dev   (dev server on <your-dev-server>:5188)","needs":"Node and npm; three ^0.184, lil-gui, vite ^8, typescript ^6; @playwright/test and pngjs for the tests","preview":{"poster":"assets/asset-library/threejs-game-skills-scaffold-t1.jpg","w":1280,"h":720}},{"id":"threejs-game-skills/create-threejs-game","name":"create_threejs_game.py","kind":"tool","job":"game","line":"Copies the starter into a folder you name and rewrites the project name in package.json and the lockfile. It only copies files; it installs nothing and makes no network call. --force copies into a folder that is not empty and overwrites files that collide.","path":"skills/threejs-gameplay-systems/scripts/create_threejs_game.py","use":"python3 skills/threejs-gameplay-systems/scripts/create_threejs_game.py ./my-game [--force]","needs":"Python 3"},{"id":"threejs-game-skills/inspect-threejs-canvas","name":"inspect-threejs-canvas.mjs","kind":"tool","job":"review","line":"Opens a running page in headless Chromium, checks the canvas is not blank, and measures the picture: color entropy, share of the dominant color, edge density and luminance contrast, plus draw calls, triangles, geometries and textures against a desktop or phone budget. Writes a JSON report and a PNG per capture; a manifest file lets it capture several named states in one run. Works on any page; named states need the five test hooks.","path":"skills/threejs-qa-release/scripts/inspect-threejs-canvas.mjs","use":"node skills/threejs-qa-release/scripts/inspect-threejs-canvas.mjs --url http://<your-dev-server>:5188 [--mobile] [--state active-play] [--seed 42] [--manifest artifacts/evidence.json]","needs":"Node; @playwright/test and pngjs installed in the project; Chromium (npx playwright install --no-shell chromium)"},{"id":"threejs-game-skills/check-evidence","name":"check_evidence.py","kind":"tool","job":"review","line":"Checks that the screenshots and reports a finished game claims really exist on disk, belong to the current run, are not blank and recorded no browser errors. It reads files only and says itself that it cannot judge how the game looks or plays.","path":"skills/threejs-game-director/scripts/check_evidence.py","use":"python3 skills/threejs-game-director/scripts/check_evidence.py ./my-game --manifest artifacts/evidence.json","needs":"Python 3"},{"id":"threejs-game-skills/probe-asset-credentials","name":"probe_asset_credentials.sh","kind":"tool","job":"plan","line":"Prints whether three API keys are set (TRIPO_API_KEY, GEMINI_API_KEY, ELEVENLABS_API_KEY) as SET or MISSING, never the values. To see keys an agent's process did not inherit it runs a login shell and sources your shell profile files, which runs whatever those files contain.","path":"skills/threejs-game-director/scripts/probe_asset_credentials.sh","use":"bash skills/threejs-game-director/scripts/probe_asset_credentials.sh","needs":"Zsh or bash"},{"id":"threejs-game-skills/threejs-3d-asset","name":"threejs_3d_asset.py","kind":"tool","job":"model","line":"A 73 KB command-line client for the Tripo API using only Python's standard library: text, image, status, download, postprocess, character-pipeline, resume, validate-rig, validate-animation and probe. It retries reads but never a paid submission, and its two validators check a downloaded GLB locally without any key.","path":"skills/threejs-3d-generator/scripts/threejs_3d_asset.py","use":"python3 skills/threejs-3d-generator/scripts/threejs_3d_asset.py --help   |   validate-rig rig.glb --rig-type biped   |   validate-animation clip.glb","needs":"Python 3; TRIPO_API_KEY for everything except probe and the two validators"},{"id":"threejs-game-skills/generate-image","name":"generate_image.py","kind":"tool","job":"image","line":"A small script that sends a prompt, and optionally an image to edit, to Google's Gemini image API and saves a PNG at 1K, 2K or 4K.","path":"skills/threejs-image-generator/scripts/generate_image.py","use":"uv run skills/threejs-image-generator/scripts/generate_image.py --prompt \"...\" --filename out.png [--input-image in.png] [--resolution 1K|2K|4K]","needs":"Uv (fetches google-genai and pillow); GEMINI_API_KEY"},{"id":"threejs-game-skills/threejs-audio-asset","name":"threejs_audio_asset.py","kind":"tool","job":"audio","line":"A command-line client for the ElevenLabs API using only Python's standard library: sfx (with --loop), music (a prompt or a composition plan file), tts, isolate and voice-change, plus probe.","path":"skills/threejs-audio-generator/scripts/threejs_audio_asset.py","use":"python3 skills/threejs-audio-generator/scripts/threejs_audio_asset.py sfx --prompt \"...\" --duration 1.2 --out x.mp3","needs":"Python 3; ELEVENLABS_API_KEY"},{"id":"threejs-game-skills/install-sh","name":"install.sh","kind":"tool","job":"install","line":"Copies the nine skill folders into an agent's skills folder in your home directory (Claude Code, Codex, or a shared agents folder) and writes a small manifest file listing them. It skips skills that already exist unless you pass --force, which deletes the same-named folder first; --prune-managed deletes folders the manifest lists that the pack no longer ships. It makes no network call.","path":"install.sh","use":"./install.sh --claude | --codex | --all [--force] [--prune-managed]","needs":"Bash; rsync if present"},{"id":"threejs-game-skills/env-map-setup","name":"Renderer and environment map setup","kind":"three","job":"lighting","line":"Five lines that give a scene studio reflections with no HDR file: sRGB output, ACES tone mapping, and a RoomEnvironment baked once through PMREMGenerator. Reach for it first; without it metal and glossy materials look flat gray.","path":"skills/threejs-aaa-graphics-builder/references/shader-cookbook.md","use":"import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js'; const pmrem = new THREE.PMREMGenerator(renderer); scene.environment = pmrem.fromScene(new RoomEnvironment(), 0.04).texture; pmrem.dispose();"},{"id":"threejs-game-skills/mat-painted-metal","name":"Painted metal material","kind":"three","job":"material","line":"Clearcoat over a colored base, for a car body or a hull panel. One line of three.js; assumes the environment map setup.","path":"skills/threejs-aaa-graphics-builder/references/shader-cookbook.md","use":"new THREE.MeshPhysicalMaterial({ color: 0x1f6feb, metalness: 0, roughness: 0.5, clearcoat: 0.9, clearcoatRoughness: 0.15, envMapIntensity: 1 })"},{"id":"threejs-game-skills/mat-brushed-metal","name":"Bare brushed metal material","kind":"three","job":"material","line":"Raw steel that needs the environment map to read as metal. One line of three.js; assumes the environment map setup.","path":"skills/threejs-aaa-graphics-builder/references/shader-cookbook.md","use":"new THREE.MeshStandardMaterial({ color: 0xaeb4bd, metalness: 1, roughness: 0.4, envMapIntensity: 1.1 })"},{"id":"threejs-game-skills/mat-rubber","name":"Rubber material","kind":"three","job":"material","line":"Near-black, almost no reflection, for tyres and grips. One line of three.js; assumes the environment map setup.","path":"skills/threejs-aaa-graphics-builder/references/shader-cookbook.md","use":"new THREE.MeshStandardMaterial({ color: 0x0a0a0b, metalness: 0, roughness: 0.92, envMapIntensity: 0.35 })"},{"id":"threejs-game-skills/mat-matte-plastic","name":"Matte plastic material","kind":"three","job":"material","line":"Mid roughness with a muted reflection, for housings and crates. One line of three.js; assumes the environment map setup.","path":"skills/threejs-aaa-graphics-builder/references/shader-cookbook.md","use":"new THREE.MeshStandardMaterial({ color: 0xd23b3b, metalness: 0, roughness: 0.62, envMapIntensity: 0.6 })"},{"id":"threejs-game-skills/mat-glossy-ceramic","name":"Glossy ceramic material","kind":"three","job":"material","line":"A sharp wet-look reflection with full clearcoat. In our trial the white version bloomed as hard as the emissive ball under a bright light, so turn the light or the bloom down. One line of three.js; assumes the environment map setup.","path":"skills/threejs-aaa-graphics-builder/references/shader-cookbook.md","use":"new THREE.MeshPhysicalMaterial({ color: 0xf5f5f5, metalness: 0, roughness: 0.12, clearcoat: 1, clearcoatRoughness: 0.05, envMapIntensity: 1 })"},{"id":"threejs-game-skills/mat-emissive-signal","name":"Emissive signal material","kind":"three","job":"material","line":"A dark base with a glow strong enough to feed bloom, for beacons, status lights and pickup cores. One line of three.js; assumes the environment map setup.","path":"skills/threejs-aaa-graphics-builder/references/shader-cookbook.md","use":"new THREE.MeshStandardMaterial({ color: 0x101010, emissive: 0x18e0ff, emissiveIntensity: 2.5, metalness: 0, roughness: 0.4 })"},{"id":"threejs-game-skills/mat-cloth","name":"Cloth material","kind":"three","job":"material","line":"High roughness plus sheen for the soft edge highlight of fabric. One line of three.js; assumes the environment map setup.","path":"skills/threejs-aaa-graphics-builder/references/shader-cookbook.md","use":"new THREE.MeshPhysicalMaterial({ color: 0x3a4a6b, metalness: 0, roughness: 0.9, sheen: 1, sheenRoughness: 0.5, sheenColor: new THREE.Color(0x8899bb), envMapIntensity: 0.5 })"},{"id":"threejs-game-skills/mat-real-glass","name":"Real refractive glass material","kind":"three","job":"material","line":"True transmission for one or two hero surfaces seen close. Costly: every transmissive material adds a whole extra scene render each frame. One line of three.js; assumes the environment map setup.","path":"skills/threejs-aaa-graphics-builder/references/shader-cookbook.md","use":"new THREE.MeshPhysicalMaterial({ metalness: 0, roughness: 0.05, transmission: 1, thickness: 0.5, ior: 1.5, envMapIntensity: 1 })"},{"id":"threejs-game-skills/mat-fake-glass","name":"Cheap fake glass material","kind":"three","job":"material","line":"Transparent clearcoat with no extra render pass, for repeated windows, visors and shields. One line of three.js; assumes the environment map setup.","path":"skills/threejs-aaa-graphics-builder/references/shader-cookbook.md","use":"new THREE.MeshPhysicalMaterial({ color: 0x88ccff, metalness: 0, roughness: 0.1, transparent: true, opacity: 0.25, clearcoat: 1, envMapIntensity: 1.5, depthWrite: false })"},{"id":"threejs-game-skills/fx-fresnel-rim","name":"Fresnel rim glow","kind":"three","job":"effect","line":"Adds a colored glow at the grazing edges of a standard material by injecting three lines of GLSL with onBeforeCompile, so the lit material keeps its normal shading. Use it to lift a subject off a busy background or to mark a state. No clock: it depends only on the view.","path":"skills/threejs-aaa-graphics-builder/references/shader-cookbook.md","use":"material.onBeforeCompile = (shader) => { /* add uRimColor, uRimPower, uRimStrength; after <emissivemap_fragment> add fresnel to totalEmissiveRadiance */ }; material.customProgramCacheKey = () => 'fresnel-rim';"},{"id":"threejs-game-skills/fx-scrolling-emissive","name":"Scrolling emissive panels","kind":"three","job":"effect","line":"Bands of light that travel along a surface, for energy conduits, charge bars and data flowing through a pipe. Time is one uniform (uTime) that you write each frame, so it can be driven by a frame number.","path":"skills/threejs-aaa-graphics-builder/references/shader-cookbook.md","use":"material.onBeforeCompile = ...; material.customProgramCacheKey = () => 'scroll-emissive'; each frame: material.userData.shader.uniforms.uTime.value = seconds;"},{"id":"threejs-game-skills/fx-wind-sway","name":"Wind sway","kind":"three","job":"move","line":"Sways grass cards, flags or cables in the vertex shader, anchored at the base, with each instance of an InstancedMesh out of phase by its position. Time is one uniform (uTime), so it can be driven by a frame number.","path":"skills/threejs-aaa-graphics-builder/references/shader-cookbook.md","use":"material.onBeforeCompile = ...; material.customProgramCacheKey = () => 'wind-sway'; each frame: material.userData.shader.uniforms.uTime.value = seconds;"},{"id":"threejs-game-skills/fx-dissolve","name":"Dissolve and spawn","kind":"three","job":"transition","line":"Makes an object appear or vanish in small blocks with a glowing edge. One uniform, uProgress from 0 to 1, is the whole state, which makes it an easy 3D transition to drive from a frame number.","path":"skills/threejs-aaa-graphics-builder/references/shader-cookbook.md","use":"material.onBeforeCompile = ...; material.customProgramCacheKey = () => 'dissolve'; material.userData.shader.uniforms.uProgress.value = progress;"},{"id":"threejs-game-skills/sky-gradient-dome","name":"Gradient sky dome","kind":"three","job":"ground","line":"A back-facing sphere with a small shader: a top color, a horizon color, a sun disc and its halo. One draw call and no textures, for any stylized outdoor backdrop. Its colors bypass tone mapping, so pick them as they should appear.","path":"skills/threejs-aaa-graphics-builder/references/shader-cookbook.md","use":"const sky = new THREE.Mesh(new THREE.SphereGeometry(500, 32, 16), new THREE.ShaderMaterial({ side: THREE.BackSide, depthWrite: false, uniforms: { uTop, uHorizon, uSunColor, uSunDir }, vertexShader, fragmentShader })); scene.add(sky);"},{"id":"threejs-game-skills/post-chain","name":"Post-processing chain","kind":"three","job":"effect","line":"The finishing pass: EffectComposer with a render pass, bloom (strength 0.45, radius 0.3, threshold 0.85), a small vignette shader, and OutputPass last for tone mapping and sRGB. Call composer.render() where you called renderer.render().","path":"skills/threejs-aaa-graphics-builder/references/shader-cookbook.md","use":"const composer = new EffectComposer(renderer); composer.addPass(new RenderPass(scene, camera)); composer.addPass(new UnrealBloomPass(new THREE.Vector2(w, h), 0.45, 0.3, 0.85)); composer.addPass(new ShaderPass(VignetteShader)); composer.addPass(new OutputPass());"},{"id":"threejs-game-skills/trick-vertex-color-ao","name":"Vertex-colour ambient occlusion","kind":"three","job":"material","line":"Darkens creases by baking a color attribute into the mesh: contact shading with no texture and no extra draw call.","path":"skills/threejs-aaa-graphics-builder/references/shader-cookbook.md","use":"geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3)); material.vertexColors = true;"},{"id":"threejs-game-skills/trick-polygon-offset-decal","name":"Polygon-offset decals","kind":"three","job":"material","line":"A flat mesh laid on a surface with polygonOffset so it does not flicker: panel lines, numbers and marks.","path":"skills/threejs-aaa-graphics-builder/references/shader-cookbook.md","use":"new THREE.MeshStandardMaterial({ polygonOffset: true, polygonOffsetFactor: -1, polygonOffsetUnits: -1, transparent: true })"},{"id":"threejs-game-skills/trick-fake-contact-shadow","name":"Fake contact shadow","kind":"three","job":"lighting","line":"A flat plane with a radial-gradient canvas texture under an object: grounds a floating thing with one draw call and no shadow map.","path":"skills/threejs-aaa-graphics-builder/references/shader-cookbook.md","use":"new THREE.Mesh(new THREE.PlaneGeometry(2, 2), new THREE.MeshBasicMaterial({ map: radialGradientCanvasTexture, transparent: true, depthWrite: false }))"},{"id":"threejs-game-skills/trick-emissive-lod","name":"Emissive level-of-detail signals","kind":"three","job":"lighting","line":"Raise emissiveIntensity or swap material by distance so far lights still read; keep the color the same so identity survives.","path":"skills/threejs-aaa-graphics-builder/references/shader-cookbook.md","use":"material.emissiveIntensity = distance > far ? 4 : 2.5;"},{"id":"threejs-game-skills/trick-matcap","name":"Matcap props","kind":"three","job":"material","line":"MeshMatcapMaterial bakes lighting into one texture: the cheapest lit-looking material for background props. It ignores scene lights.","path":"skills/threejs-aaa-graphics-builder/references/shader-cookbook.md","use":"new THREE.MeshMatcapMaterial({ matcap })"},{"id":"threejs-game-skills/feel-tween-manager","name":"TweenManager and three easings","kind":"three","job":"move","line":"A 40-line tween runner with easeInQuad, easeOutCubic and easeOutBack (the one that overshoots), advanced by a delta you pass in. No library, no clock of its own, so it can be stepped by a frame time. Code is in the reference page, written for the starter but free of dependencies.","path":"skills/threejs-gameplay-systems/references/game-feel.md","use":"const tweens = new TweenManager(); tweens.tween(0.28, (v) => mesh.scale.setScalar(1 + 0.6 * (1 - v)), easeOutCubic); each frame: tweens.update(dt);"},{"id":"threejs-game-skills/feel-trauma-shake","name":"Trauma-based screenshake","kind":"three","job":"camera","line":"Camera shake where shake equals trauma squared, trauma decays 1.4 per second and is capped at 1, and the noise comes from accumulated time, not a random call, so the same time gives the same shake. Suggested amounts: 0.15 small, 0.4 hit, 0.7 explosion. Code is in the reference page, written for the starter but free of dependencies.","path":"skills/threejs-gameplay-systems/references/game-feel.md","use":"const shake = new ShakeRig(); shake.addTrauma(0.4); each frame after placing the camera: shake.update(dt, camera);"},{"id":"threejs-game-skills/feel-hitstop","name":"Hitstop","kind":"three","job":"effect","line":"A 60 to 90 ms near-freeze on a heavy hit: scale the gameplay delta to 0.05 while the camera and feedback keep real time. In a video it is the held frame on impact. Code is in the reference page, written for the starter but free of dependencies.","path":"skills/threejs-gameplay-systems/references/game-feel.md","use":"hitstop(70); const gameplayDelta = delta * this.timeScale;"},{"id":"threejs-game-skills/feel-squash-stretch","name":"Squash and stretch","kind":"three","job":"move","line":"Deform on impact and bounce back with easeOutBack, keeping volume: when one axis scales by s the other two scale by 1 / sqrt(s). About 0.9 squash on landing, 1.15 stretch on take-off, back in 180 ms. Code is in the reference page, written for the starter but free of dependencies.","path":"skills/threejs-gameplay-systems/references/game-feel.md","use":"squash(target, 0.85, 0.18);"},{"id":"threejs-game-skills/feel-fov-punch","name":"Camera kick and FOV punch","kind":"three","job":"camera","line":"Add 4 to 8 degrees of field of view on a boost or a hit and let it decay with a 0.2 s time constant; remember updateProjectionMatrix(). Code is in the reference page, written for the starter but free of dependencies.","path":"skills/threejs-gameplay-systems/references/game-feel.md","use":"punchFov(6); each frame: updateFov(dt);"},{"id":"threejs-game-skills/feel-impact-flash","name":"Impact flash","kind":"three","job":"effect","line":"Pulse a material's emissiveIntensity to a peak and tween it back in 0.22 s; for big events add a one-frame white overlay div fading over about 100 ms. Code is in the reference page, written for the starter but free of dependencies.","path":"skills/threejs-gameplay-systems/references/game-feel.md","use":"flashHit(material, 2.4, 0.22);"},{"id":"threejs-game-skills/feel-pickup-pop","name":"Pickup pop","kind":"three","job":"move","line":"A collected thing scales up to 1.6, rises and fades over 0.28 s, with a 120 ms scale punch on its counter. A good recipe for a number or an icon landing. Code is in the reference page, written for the starter but free of dependencies.","path":"skills/threejs-gameplay-systems/references/game-feel.md","use":"playPickupPop(mesh, material); hud.punchScore();"},{"id":"threejs-game-skills/feel-gamepad-rumble","name":"Gamepad rumble","kind":"three","job":"effect","line":"Feature-detected controller vibration with a swallowed promise. Interactive use only; nothing to render. Code is in the reference page, written for the starter but free of dependencies.","path":"skills/threejs-gameplay-systems/references/game-feel.md","use":"rumble(180, 0.6, 0.3);"},{"id":"threejs-game-skills/feel-audio-pitch-duck","name":"Audio pitch variance and ducking","kind":"three","job":"audio","line":"Vary each playback's pitch by plus or minus 6 percent from a seeded generator so repeats do not sound machine-made, and duck the bed under an impact. Code is in the reference page, written for the starter but free of dependencies.","path":"skills/threejs-gameplay-systems/references/game-feel.md","use":"audio.play(buffer, rng, 0.8); audio.setDuck(0.6);"},{"id":"threejs-game-skills/rapier-fixed-step","name":"Rapier setup with a fixed timestep","kind":"three","job":"physics","line":"How to add real physics to a three.js scene: Rapier's world, a 1/60 s fixed step fed by a clamped accumulator, bodies and colliders, syncing meshes from bodies in one place, CCD for fast bodies, and sensors that need active events. Also a ladder for when to use custom collision, Rapier, cannon-es, Jolt or Ammo. A fixed step is what makes a simulation repeatable.","path":"skills/threejs-gameplay-systems/references/physics-engine-selection.md","use":"npm install @dimforge/rapier3d-compat; await RAPIER.init(); const world = new RAPIER.World({ x: 0, y: -9.81, z: 0 }); accumulator += Math.min(dt, 0.1); while (accumulator >= 1/60) { world.step(); accumulator -= 1/60; }","needs":"@dimforge/rapier3d-compat from npm (not in the repo)"},{"id":"threejs-game-skills/starter-loop","name":"Loop.ts","kind":"three","job":"render","line":"A 30-line animation loop: requestAnimationFrame, delta in seconds capped at 0.05, update then render. It reads the browser's clock; to render frame by frame, call your update with a fixed delta in its place.","path":"skills/threejs-gameplay-systems/assets/threejs-vite-game/src/core/Loop.ts","use":"new Loop((dt, elapsed) => update(dt, elapsed), () => render()).start();"},{"id":"threejs-game-skills/starter-renderer","name":"Renderer.ts","kind":"three","job":"render","line":"createRenderer (antialias, sRGB output, ACES tone mapping at 1.05 exposure, PCF shadows) and resizeRenderer, which keeps canvas size, pixel ratio and camera aspect in step and caps the device pixel ratio.","path":"skills/threejs-gameplay-systems/assets/threejs-vite-game/src/core/Renderer.ts","use":"const renderer = createRenderer(canvas); resizeRenderer(renderer, camera, 2);"},{"id":"threejs-game-skills/starter-camera-rig","name":"CameraRig.ts","kind":"three","job":"camera","line":"A follow camera at a fixed offset that eases toward its target with an exponential lag (1 - exp(-dt / lag)) and looks slightly ahead of it. Frame-rate independent, so it steps cleanly with any delta.","path":"skills/threejs-gameplay-systems/assets/threejs-vite-game/src/systems/CameraRig.ts","use":"const rig = new CameraRig(camera); rig.snapTo(target); each frame: rig.update(dt, target, 0.16);"},{"id":"threejs-game-skills/starter-seeded-random","name":"random.ts (seeded random)","kind":"three","job":"render","line":"mulberry32 in nine lines: createSeededRandom(seed) returns a function that gives the same sequence every time. The thing to use in place of Math.random in anything that must render the same twice.","path":"skills/threejs-gameplay-systems/assets/threejs-vite-game/src/utils/random.ts","use":"const rng = createSeededRandom(42); const x = rng();"},{"id":"threejs-game-skills/starter-dispose","name":"dispose.ts","kind":"three","job":"render","line":"disposeObject3D walks a three.js object and frees its geometries, materials and every texture on them. Use it when a scene is torn down so memory does not leak.","path":"skills/threejs-gameplay-systems/assets/threejs-vite-game/src/utils/dispose.ts","use":"disposeObject3D(group);"},{"id":"threejs-game-skills/starter-input-controller","name":"InputController.ts","kind":"three","job":"game","line":"Keyboard (WASD and arrows, Space or Shift to dash) and a touch stick merged into one movement vector, with pointer-cancel handling so a control cannot stick down.","path":"skills/threejs-gameplay-systems/assets/threejs-vite-game/src/core/InputController.ts","use":"const input = new InputController(stickEl, knobEl, dashButtonEl); input.readMovement(vec2); input.isDashHeld();"},{"id":"threejs-game-skills/starter-audio-system","name":"AudioSystem.ts","kind":"three","job":"audio","line":"A Web Audio context unlocked on the first key or pointer press, and one synthesised pickup blip (a triangle wave swept up over 0.12 s). Shows the unlock pattern; it loads no sound files.","path":"skills/threejs-gameplay-systems/assets/threejs-vite-game/src/systems/AudioSystem.ts","use":"const audio = new AudioSystem(); audio.pickup(index);"},{"id":"threejs-game-skills/starter-test-hooks","name":"Test hooks and diagnostics contract","kind":"tool","job":"review","line":"Two objects a page puts on window so a script can take a repeatable picture of it: diagnostics (frame count, renderer draw calls and triangles, canvas size) and five hooks (seed, setState, setPausedForScreenshot, setReducedMotion, hideDebugUi). They freeze a named state for a still; they do not step time.","path":"skills/threejs-gameplay-systems/assets/threejs-vite-game/src/game/Game.ts","use":"await window.__THREE_GAME_TEST_HOOKS__.setState('active-play'); window.__THREE_GAME_TEST_HOOKS__.setPausedForScreenshot(true);"},{"id":"threejs-game-skills/starter-visual-spec","name":"visual.spec.ts","kind":"tool","job":"review","line":"A Playwright smoke test (one test, run on a desktop and a phone profile): the canvas is big enough and its pixels vary, so a blank or frozen page fails.","path":"skills/threejs-gameplay-systems/assets/threejs-vite-game/tests/visual.spec.ts","use":"npm run verify:visual"},{"id":"threejs-game-skills/starter-visual-regression","name":"visual-regression.template.ts","kind":"tool","job":"review","line":"A Playwright screenshot-baseline template that seeds, sets a named state, freezes, hides debug UI and then compares against a stored picture. Copy it to a .spec.ts file when a scene is stable enough to protect.","path":"skills/threejs-gameplay-systems/assets/threejs-vite-game/tests/visual-regression.template.ts","use":"cp tests/visual-regression.template.ts tests/visual-regression.spec.ts && npx playwright test tests/visual-regression.spec.ts --update-snapshots"},{"id":"threejs-game-skills/starter-bot-playtest","name":"bot-playtest.template.ts","kind":"tool","job":"review","line":"A Playwright bot that holds keys on a script and measures whether the game really plays: frames advanced, distance moved, score gained, and windows where input produced nothing.","path":"skills/threejs-gameplay-systems/assets/threejs-vite-game/tests/bot-playtest.template.ts","use":"cp tests/bot-playtest.template.ts tests/bot-playtest.spec.ts && npx playwright test tests/bot-playtest.spec.ts"},{"id":"threejs-game-skills/web-audio-manager-shape","name":"GameAudio manager shape","kind":"three","job":"audio","line":"A 25-line Web Audio manager: unlock on a gesture, load and decode buffers by id, play through named gain groups (master, sfx, ui, ambience, voice, music). A shape to copy, shown in the audio reference page.","path":"skills/threejs-audio-generator/references/audio-workflows.md","use":"const audio = new GameAudio(); await audio.unlock(); await audio.load('hit', '/audio/hit.mp3'); audio.play('hit', 'sfx', 0.8);"},{"id":"threejs-game-skills/visual-scorecard","name":"Visual scorecard","kind":"skill","job":"review","line":"A ten-category rubric for judging a real-time 3D picture from 0 to 3 (art direction, hero, obstacles, rewards, world, materials, lighting, effects, HUD, performance evidence), with three calibration screenshots, pass thresholds, a list of automatic failures (glow or fog standing in for geometry, a HUD of stat cards) and measured signals such as color entropy below 3 bits or edge density below 0.04. It also says not to add clutter to raise a number.","path":"skills/threejs-aaa-graphics-builder/references/visual-scorecard.md","use":"Read the page, look at assets/scorecard-anchors/scene-1.jpg to scene-3.jpg, then score active-play screenshots category by category."},{"id":"threejs-game-skills/render-budget-table","name":"Render budgets and material kit","kind":"skill","job":"review","line":"Starting budgets for a browser 3D scene on desktop and phone (draw calls 300 and 150, triangles 750k and 300k, textures 60 and 40, shadow lights 2 and 1, device pixel ratio cap 2), where to spend them, and eleven named material roles to share across meshes (bodyPrimary, trim, hazard, glass, emissiveSignal and so on).","path":"skills/threejs-aaa-graphics-builder/references/technical-art.md","use":"Read the table; compare with renderer.info.render.calls and .triangles in your own scene."},{"id":"threejs-game-skills/authoring-recipes","name":"Modelling and world recipes","kind":"skill","job":"model","line":"Parts lists for building convincing models from three.js geometry alone: a hero vehicle, a hero character, obstacle families, rewards and a modular world kit, a table of which geometry class suits what (ExtrudeGeometry for fins, LatheGeometry for domes, TubeGeometry for cables, InstancedMesh for repeats), a factory return shape, and lighting, fog and post rules.","path":"skills/threejs-aaa-graphics-builder/references/authoring-recipes.md","use":"Read the page; factories return { root, collision?, lod?, bounds?, diagnostics? }."},{"id":"threejs-game-skills/genre-design","name":"Genre design patterns","kind":"skill","job":"plan","line":"Short design vocabulary for eight game genres (endless runner, arcade racer, dogfight, tower defense, billiards, mini golf, boss fight, puzzle), a note on difficulty curves, and eight tests for whether a scene is really a game.","path":"skills/threejs-gameplay-systems/references/genre-design.md","use":"Read the page before designing levels."},{"id":"threejs-game-skills/evidence-manifest","name":"Evidence manifest format","kind":"skill","job":"review","line":"A small JSON format that declares which viewport and state pairs one verification pass must capture, with a run id, so old screenshots cannot be passed off as new. The inspector fills it and the checker reads it.","path":"skills/threejs-game-director/references/evidence-manifest.md","use":"{ \"version\": 1, \"runId\": \"pass-1\", \"captures\": [{ \"mode\": \"desktop\", \"state\": \"active-play\", \"report\": \"artifacts/pass-1/desktop-active-play.json\" }] }"}]},{"id":"anatomy","name":"Anatomy","repo":"wheresryan22/anatomy","url":"https://github.com/wheresryan22/anatomy","commit":"1482e8469b0a9e0d8cc18ea2740a01423d29ae80","commit_date":"2026-10-18","licence":{"name":"MIT","basis":"LICENSE file, Copyright (c) 2026 Ryan; SKILL.md front matter says license: MIT; the README's license line says MIT. There is no package.json.","note":"Two examples show things that belong to others: one draws another company's mark on its screen, and one depicts a named rocket engine. The drawings' code is free to use. Those subjects are theirs."},"kind":"skill","line":"An agent skill, a drawing kit with no dependencies and nine worked examples for explaining an idea as a dense, interactive drawing of a real machine that comes apart. It draws in SVG, with optional WebGL shaders and a beta 3D mode.","look_only":false,"get":{"command":"npx skills add wheresryan22/anatomy -g","note":"Add -a claude-code, -a codex or -a opencode to pick the agent."},"needs":"Node 20.10 or later for builds and checks, with nothing to npm install. Chrome for the checking scripts. React only for the React output. No API keys.","sends":"Nothing by itself. One script reaches out, and only when run: publish.mjs pushes a figure's source to GitHub and opens a pull request on the author's public gallery, with the agent's and the model's name. The skill tells the agent to do that only on your explicit yes.","seen":[{"line":"We drew a machine of our own with the kit alone: a small desktop computer from a parts list, as one 60-line script whose whole drawing follows a single number. It built on the first run, and 96 frames made a clip of it lifting apart and closing.","preview":{"video":"assets/asset-library/anatomy-own-small-computer-apart.mp4","poster":"assets/asset-library/anatomy-own-small-computer-apart-poster.jpg","w":1280,"h":720,"seconds":4}},{"line":"Seven of its built example pages drew cleanly, with no outside requests. One comes apart under the pointer and names the part you are on.","preview":{"poster":"assets/asset-library/anatomy-turning-dial-rest.jpg","w":680,"h":569}},{"line":"A shipped figure stepped frame by frame gave the same picture twice when only the clock drives it. It did not when a pointer starts the motion.","preview":{"poster":"assets/asset-library/anatomy-dial-indicator-rest.jpg","w":650,"h":486}}],"not_seen":"The skill inside an agent, so what it draws from a description is untested here. Its own checking scripts, the 3D mode and the React output were read, not run.","count":32,"kinds":{"tool":21,"template":9,"skill":2},"assets":[{"id":"anatomy/skill","name":"anatomy","kind":"skill","job":"diagram","line":"One agent skill that explains an idea by inventing a real machine whose working is the idea, then drawing it as a dense isometric figure: 40 or more small solid parts with four-tone shading, painted back to front, in a framed card with a title, a hint and a live readout, moving calmly under pointer and keyboard. Output is a standalone HTML page, a lone SVG, or React components; shaders (fire, water, light) and a beta 3D mode are optional. It sets a size first (Figure under an hour, Hero 2 to 4 hours, Epic 6 hours or more and not started without asking), and ends by zooming into every joint at 4x in both themes. Ten reference pages back it: craft, the kit API, motion, React, verification,…","path":"SKILL.md","use":"npx skills add wheresryan22/anatomy -g   (add -a claude-code, -a codex, -a opencode, -a antigravity or -a minimax-code to pick the agent; or: git clone https://github.com/wheresryan22/anatomy.git ~/.claude/skills/anatomy). Then: /anatomy explain how a token bucket rate limiter works, interactive"},{"id":"anatomy/iso-kit","name":"iso-kit (core drawing kit)","kind":"tool","job":"diagram","line":"The whole core in one file with no dependencies: an isometric camera (azimuth 45, elevation 30 by default, fitted to your points), solids with four side tones and a lighter top (slabs, cylinders, extrusions with bevels), parts such as knurls, coils, ruler ticks and dot grids, an SVG string renderer, a card and page builder, and the CSS for a dark and a light theme. 55 exports in 674 lines. Every function is pure geometry in, SVG path out: there is no clock in it. Ships as TypeScript (iso-kit.ts) and as plain ESM (iso-kit.mjs).","path":"kit/iso-kit.mjs","use":"import * as k from './kit/iso-kit.mjs'; const P = k.fitProjection(points, 600, 380, { pad: 30 }); const svg = k.figureSvg({ width: 600, height: 380, label: '...', body: k.solidSvg(k.slabOf({ x: -60, y: -60, w: 120, d: 120, r: 8 }, 0, 12, P), { tone: 'mid' }) });","needs":"Node 20.10 or later, or any browser; nothing to install","preview":{"video":"assets/asset-library/anatomy-own-small-computer-apart.mp4","poster":"assets/asset-library/anatomy-own-small-computer-apart-poster.jpg","w":1280,"h":720,"seconds":4}},{"id":"anatomy/iso-css","name":"iso.css","kind":"tool","job":"diagram","line":"The kit's styles written out as a stylesheet: the tone ramp, line weights, card, legend and both themes, driven by CSS variables. Import it once and put class iso (and data-theme=light for light) on a wrapper. It uses system fonts only.","path":"kit/iso.css","use":"@import './kit/iso.css';  <body class=\"iso\" data-theme=\"light\">"},{"id":"anatomy/react-draw","name":"react/draw.tsx","kind":"tool","job":"diagram","line":"Server-safe React components for the same drawing: Solid, Line, Wire, Dots, FaceText, IsoFigure and Plate. Build the static art once in a server component from geometry modules.","path":"kit/react/draw.tsx","use":"<IsoFigure width={600} height={380} label=\"...\"><Solid paths={slab} tone=\"mid\" /></IsoFigure>","needs":"React 18 or later"},{"id":"anatomy/react-live","name":"react/live.tsx","kind":"tool","job":"move","line":"Client hooks for calm motion: useLoop (a requestAnimationFrame loop that hands your tick a delta and stops when nothing moves), useEased, useInView, useStillness for reduced motion, useReadout, and two pure steppers, spring(state, target, dt, stiffness, damping) and follow(current, target, dt, seconds). The steppers take dt, so the same motion can be driven by a frame time.","path":"kit/react/live.tsx","use":"const x = follow(current, target, dt, 0.28); spring(state, target, dt, 420, 26);","needs":"React 18 or later"},{"id":"anatomy/lathe","name":"lathe.mjs","kind":"tool","job":"diagram","line":"Round parts on any axis: turn a profile into a shaded body (bells, flanges, valves, domes), with smooth shading for curved profiles, balls, saddle pads where a round part meets a curved one, ribs and bolt circles that fade at the edge, bands of one body that can be depth-sorted, and a rod that slides out of a gland. 55 exports.","path":"kit/lathe.mjs","use":"import * as G from './kit/lathe.mjs'; const F = G.frameAlong(origin, axis); const body = G.lathe(profile, F, P);"},{"id":"anatomy/tube","name":"tube.mjs","kind":"tool","job":"diagram","line":"Pipes, tubes and cables: splits a 3D route into chunks that can be depth-sorted, with gaps under collars and clamps, end caps, and rings for a braid or corrugation that follows the cross-section through every joint.","path":"kit/tube.mjs","use":"import { tubePieces, tubeSvg } from './kit/tube.mjs'; const pieces = tubePieces(points3, radius, P, { gaps, rings }); const svg = pieces.map((p) => tubeSvg(p)).join('');"},{"id":"anatomy/audit","name":"audit.mjs","kind":"tool","job":"review","line":"Proves a figure's geometry instead of trusting the eye: records each part's true shape as you draw it, ray-casts every overlapping pair to set the painting order, and then checks that nothing passes through anything, every pipe end sits on a mount, no bend folds, and every overlap is drawn in true depth order, at rest, taken apart and in every replayed frame between. The build exits non-zero on any failure.","path":"kit/audit.mjs","use":"import * as A from './kit/audit.mjs'; const R = A.recorder(P, { order, spring }); /* record parts */ A.settle(R, P); A.auditOrExit(R, P);   then: node build.mjs --audit"},{"id":"anatomy/gl","name":"gl.mjs","kind":"tool","job":"effect","line":"A small WebGL layer for shaders that sit inside the drawing in the same isometric camera: the camera as GLSL (GLSL_ISO with rayOf and pixelOf), glCamera, glLayer for a canvas between a back and a front SVG, and three envelope helpers (smooth, burst, settle) so no uniform ever pops. Raw WebGL, not three.js; pixel ratio capped at 1.5.","path":"kit/gl.mjs","use":"import { glLayer, glCamera, GLSL_ISO, burst, settle } from './kit/gl.mjs'; const layer = glLayer({ canvas, fragment: GLSL_ISO + myShader, camera: glCamera(P), uniforms });","needs":"WebGL; the SVG still reads without it"},{"id":"anatomy/turn","name":"turn.mjs (3D runtime, beta)","kind":"tool","job":"3d","line":"The runtime of the optional 3D mode: parts that truly turn (a dial, a hinge, a piece that breaks off) are re-projected and re-shaded every frame by the kit's own rules and painted in an order solved from separating planes. 3,610 lines. The repo calls it beta: about 60 fps for a small figure, about 20 fps for its 380-part stress test.","path":"kit/turn.mjs","use":"TURN.mount(svg, data); const controller = ...   (see references/3d.md)"},{"id":"anatomy/turn-build","name":"turn-build.mjs (3D builder, beta)","kind":"tool","job":"3d","line":"The build side of the 3D mode: turning(P, { recorder }) declares groups (turn, slide, hinge, free), live layers and convex parts with seven metal and rubber materials, and T.build writes the data the runtime plays.","path":"kit/turn-build.mjs","use":"import { turning } from './kit/turn-build.mjs'; const T = turning(P, { recorder }); /* groups and parts */ T.build();"},{"id":"anatomy/turn-audit","name":"turn-audit.mjs (3D orbit audit, beta)","kind":"tool","job":"review","line":"Checks a 3D figure at every turn angle and in every motion clip: no ordering cycles, no loose groups. Slow by the repo's own account: 15 to 20 minutes for 30 parts.","path":"kit/turn-audit.mjs","use":"node build.mjs --light --audit"},{"id":"anatomy/pdf-button","name":"pdf-button.mjs","kind":"tool","job":"publish","line":"Twelve lines: a small link on the card that opens the figure's printable PDF.","path":"kit/pdf-button.mjs","use":"import { pdfButton } from './kit/pdf-button.mjs'; body: pdfButton('figure-poster-a4.pdf') + stage"},{"id":"anatomy/experimental","name":"turn-fixed.mjs, canvas-painter.mjs, gl-shared.mjs","kind":"tool","job":"3d","line":"Three experimental variants of the 3D runtime and WebGL layer (a fixed-camera turn engine of 147 KB, a canvas painter, a shared GL context). The README says they are not yet documented or used by the examples.","path":"kit/turn-fixed.mjs","use":"Not documented; read the source."},{"id":"anatomy/capture","name":"capture.mjs","kind":"tool","job":"review","line":"Screenshots a figure with headless Chrome through the browser's own debugging protocol, with no npm packages: whole card, phone width, a hover, key presses, and 4x close-ups of a region. It starts Chrome with a throwaway profile, a local debugging port and file access from files, and reports console problems.","path":"scripts/capture.mjs","use":"node scripts/capture.mjs page.html --out shots/page.png [--width 390] [--hover 0.6,0.5] [--zoom x,y,w,h]","needs":"Node 20.10 or later; Chrome or Chromium (found in the usual places or through CHROME_PATH)"},{"id":"anatomy/drive","name":"drive.mjs","kind":"tool","job":"review","line":"Runs a scripted session in headless Chrome: move, click, key, wait-until, run JavaScript in the page, slow motion (for example 0.05x) and contact sheets across a transition to catch pops; --no-webgl shows the fallback. Because it runs JavaScript you pass it, the repo's security note says to point it only at pages you trust.","path":"scripts/drive.mjs","use":"node scripts/drive.mjs page.html --actions steps.json [--reduced] [--theme light] [--no-webgl]","needs":"Node 20.10 or later; Chrome or Chromium (found in the usual places or through CHROME_PATH)"},{"id":"anatomy/lines","name":"lines.mjs","kind":"tool","job":"review","line":"The line-end check: on a built page, every seam, rule, rib, tick and pointer must end on a stroke, a dot or an outline. It rings the failures on a PNG and exits 1 on any.","path":"scripts/lines.mjs","use":"node scripts/lines.mjs page.html --out shots/lines.png","needs":"Node 20.10 or later; Chrome or Chromium (found in the usual places or through CHROME_PATH)"},{"id":"anatomy/inline-kit","name":"inline-kit.mjs","kind":"tool","job":"export","line":"Returns the kit, the WebGL layer and the 3D runtime as source text with their export keywords removed, so a build script can inline them into one standalone HTML page with no outside files.","path":"scripts/inline-kit.mjs","use":"import { kitScript, glScript, turnScript } from './scripts/inline-kit.mjs'; pageHtml({ script: kitScript() + live })"},{"id":"anatomy/turn-check","name":"turn-check.mjs","kind":"tool","job":"review","line":"Browser checks for 3D figures: fidelity against the kit's own builders, a z-buffer order check, pixel pops between tiny angle steps, line ends at 24 angles, and frame timing.","path":"scripts/turn-check.mjs","use":"node scripts/turn-check.mjs page.html [--order] [--pops] [--lines] [--perf]   |   node scripts/turn-check.mjs build.mjs --fidelity","needs":"Node 20.10 or later; Chrome or Chromium (found in the usual places or through CHROME_PATH)"},{"id":"anatomy/turn-bench","name":"turn-bench.mjs","kind":"tool","job":"review","line":"Times the 3D engine in Node: CPU time per kind of part.","path":"scripts/turn-bench.mjs","use":"node scripts/turn-bench.mjs"},{"id":"anatomy/print","name":"print.mjs and print-sheet.mjs","kind":"tool","job":"export","line":"Prints a finished figure on paper without drawing it again: opens the built light page, plays the poses a small sheet.mjs spec lists, freezes each as vector SVG, lays them out as a one-page poster, a one-page technical drawing or a 2 to 4 page detailed explainer, and prints an A4 or Letter PDF with Chrome. The shipped PDFs run from 0.5 to 4.4 MB.","path":"scripts/print.mjs","use":"node scripts/print.mjs examples/raptor-engine/sheet.mjs --format all --png [--letter]","needs":"Node 20.10 or later; Chrome or Chromium (found in the usual places or through CHROME_PATH)"},{"id":"anatomy/publish","name":"publish.mjs","kind":"tool","job":"publish","line":"Sends a finished figure to the author's public community gallery as a GitHub pull request: copies the figure's source into a clone, checks the build, saves a preview, commits, force-pushes a branch to your fork and opens the pull request through the GitHub CLI. The skill says to do this only on the user's explicit yes, after showing a dry run. It records the agent and model name, and in Claude Code it reads the session log for minutes and tokens.","path":"scripts/publish.mjs","use":"node scripts/publish.mjs <figure folder> --into <clone> --id <id> --title \"...\" --author <github user> --submit --dry-run","needs":"Git and the GitHub CLI signed in"},{"id":"anatomy/evals","name":"evals.json","kind":"skill","job":"review","line":"Five test prompts with what a good answer contains: a token bucket rate limiter, a connection pool for Next.js docs, a CDN edge cache as a lone SVG, a Bunsen burner with a WebGL flame, and a heat-exchanger espresso machine. Good examples of how to ask.","path":"evals/evals.json","use":"Read the prompts; reuse their shape: name the idea, give the real numbers, say where the figure will live."},{"id":"anatomy/example-dial-indicator","name":"dial-indicator","kind":"template","job":"diagram","line":"The smallest example, about 300 lines: a dial gauge on a stand over a carriage of three gauge blocks; hover and the carriage slides, the plunger rides up and down and the needle reads each block's height. As built: one self-contained 136 KB HTML page per theme, 342 SVG paths, no canvas, no outside requests. Its idle tour runs on the browser's clock.","path":"examples/dial-indicator","use":"node examples/dial-indicator/build.mjs [--light]   (writes dial-indicator.html next to the script)","preview":{"poster":"assets/asset-library/anatomy-dial-indicator-rest.jpg","w":650,"h":486}},{"id":"anatomy/example-desk-computer","name":"desk-computer","kind":"template","job":"diagram","line":"A 1984-style all-in-one desk computer with a keyboard you can type on: 58 keys that go down as you type, a CRT drawn in the plane of the case front, and a picture that collapses to a line and a dot when switched off. About 85 solids; as built a 237 KB page with 838 paths. Its screen shows another company's mark (the build script itself calls it \"the Anthropic mark\") and its demo phrases name that company's product, so reuse the machine and replace the screen content.","path":"examples/desk-computer","use":"","look_only":true},{"id":"anatomy/example-arcade-cabinet","name":"arcade-cabinet","kind":"template","job":"diagram","line":"An upright arcade cabinet with its side panel off: drop a quarter and it rolls down the coin chute, trips a switch wire and lands in the cash box, a pulse runs along the cable to the board, and the monitor warms up into an attract mode. About 240 solids and 15 cables; as built a 1.0 MB page with 2,371 paths, plus three A4 PDFs (0.7 to 2.4 MB). The reference for cutaways and for a geometry audit that passes.","path":"examples/arcade-cabinet","use":"node examples/arcade-cabinet/build.mjs [--light] [--audit]","preview":{"poster":"assets/asset-library/anatomy-arcade-cabinet-rest.jpg","w":650,"h":867}},{"id":"anatomy/example-push-button","name":"push-button","kind":"template","job":"diagram","line":"A push button wired in a loop with a cell and a small bulb: press and hold and a copper bridge lands on two contact posts, the loop closes and the bulb lights. A small figure: a 127 KB page with 277 paths, plus three A4 PDFs (0.5 to 1.0 MB) and the sheet spec that printed them. It is in the repo but missing from the README's list of eight examples.","path":"examples/push-button","use":"node examples/push-button/build.mjs [--light]   |   node scripts/print.mjs examples/push-button/sheet.mjs --format all","preview":{"poster":"assets/asset-library/anatomy-push-button-rest.jpg","w":650,"h":486}},{"id":"anatomy/example-raptor-engine","name":"raptor-engine","kind":"template","job":"diagram","line":"The showpiece exploded view: a rocket engine hanging in a test stand that comes apart into 11 named assemblies on staggered springs when you hover it, with pipes and harness that an audit proves never pass through anything, and a WebGL exhaust plume, shock and steam when you press Ignite. As built: a 1.6 MB page with 3,120 SVG paths and two canvases, plus three A4 PDFs (0.6 to 4.4 MB). The build takes a few minutes. It names a real engine (SpaceX's Raptor 2) in its title and caption. Its motion runs on the browser's clock with the step capped at 1/30 s.","path":"examples/raptor-engine","use":"node examples/raptor-engine/build.mjs [--light] [--audit]   then open raptor-engine-light.html and hover the engine"},{"id":"anatomy/example-ripple-tank","name":"ripple-tank","kind":"template","job":"diagram","line":"A school ripple tank on tall legs over a paper screen, seen from 44 degrees up: two dippers make interfering waves, with lamp light and caustics on the paper and reflections in the water drawn by two WebGL layers registered to the isometric planes and driven by a small physics model. As built: a 505 KB page with 1,285 paths and two canvases.","path":"examples/ripple-tank","use":"node examples/ripple-tank/build.mjs [--light]","preview":{"poster":"assets/asset-library/anatomy-ripple-tank-rest.jpg","w":760,"h":826}},{"id":"anatomy/example-test-rig","name":"test-rig","kind":"template","job":"diagram","line":"A production figure from a React and Next.js site, and the skill's quality bar for the drawing itself: a glass button on a spring-mounted carriage, a finger probe on a rail, and a dial gauge reading the lean. 53 solids. Source only (geometry, art, live component, a pure model in rig.ts); no build script and no built page, so copy it into a React app.","path":"examples/test-rig","use":"Copy examples/test-rig/ and kit/ into a React project and render <TestRigFigure />","needs":"React 18 or later"},{"id":"anatomy/example-spot-plate","name":"spot-plate","kind":"template","job":"diagram","line":"A second production React figure: six pairs of glass drops on a spot plate that run together into one piece of glass as a fan of feeler blades opens, each pair drawn from one distance field. The reference for shapes that morph into each other and one control driving many parts. Source only; no built page.","path":"examples/spot-plate","use":"Copy examples/spot-plate/ and kit/ into a React project","needs":"React 18 or later"},{"id":"anatomy/example-turning-dial","name":"turning-dial","kind":"template","job":"3d","line":"The beta 3D mode: a combination dial on a door plate that you drag to turn, with a small gold and chrome robot hand riding on it, a finger that lifts and a pod that breaks off; about 90 parts re-drawn every frame. As built: a 674 KB page with 1,109 paths and two canvases, a verify build, and stress.mjs, a 380-part hand in a cluttered workshop used to measure speed (1.2 MB).","path":"examples/turning-dial","use":"node examples/turning-dial/build.mjs [--light] [--audit]","preview":{"poster":"assets/asset-library/anatomy-turning-dial-rest.jpg","w":680,"h":569}}]},{"id":"3dviz-pro-max","name":"3Dviz Pro Max","repo":"viettranx/3dviz-pro-max","url":"https://github.com/viettranx/3dviz-pro-max","commit":"d077e0e68915c25be8e71d74684d3144fd1c2aca","commit_date":"2026-09-11","licence":{"name":"MIT","basis":"LICENSE file, Copyright (c) 2026 Viettranx; the README, both plugin manifests and the examples and site package.json files say MIT.","note":"That covers the repo's own code, models and stills. Not covered: the anatomy meshes it downloads (BodyParts3D, CC BY-SA 2.1 Japan, credit required), and one demo recording whose rights the README says are still to be confirmed."},"kind":"three","line":"One agent skill for building 3D scenes and explainers in three.js. It carries a catalog of 223 written recipes, a kit of procedural models, lighting and camera rigs, a starter, and 37 example studies you can run.","look_only":false,"get":{"command":"git clone https://github.com/viettranx/3dviz-pro-max.git","note":"Then link or copy the whole skills/3dviz-pro-max folder into your agent's skills folder, never SKILL.md alone."},"needs":"Nothing to read the skill. Python 3 for the catalog helpers. Node with pnpm or npm for the starter and the examples. Optional: Playwright for its capture script, and Blender 4.2 or newer for its baked hero tier. The six anatomy studies need 169 MB of meshes fetched separately.","sends":"Nothing by itself. Two things reach out only when you run them: a script that downloads the anatomy meshes from the author's bucket, and a setting that makes the anatomy studies fetch them in the browser.","seen":[{"line":"All 37 example studies built in 2.1 seconds, and 31 drew: cottages, a village by day and by night, a cave garden, gears, an orrery, a prism, and line-drawn math studies. The six anatomy studies showed only an error, because their meshes are not in the repo.","preview":{"poster":"assets/asset-library/3dviz-pro-max-village.jpg","w":1280,"h":720}},{"line":"The coupled gears study, stepped frame by frame, gave the same picture twice. 96 frames took 25 seconds with software rendering.","preview":{"video":"assets/asset-library/3dviz-pro-max-gears-stepped.mp4","poster":"assets/asset-library/3dviz-pro-max-gears-stepped-poster.jpg","w":1280,"h":720,"seconds":4}}],"not_seen":"The skill inside an agent, so whether it makes better scenes is untested here. The 223 recipes are text, and the repo says most were never rendered. Everything that needs Blender was read, not run.","count":404,"kinds":{"three":363,"tool":27,"skill":10,"blender":2,"template":2},"assets":[{"id":"3dviz-pro-max/skill","name":"3dviz-pro-max","kind":"three","job":"3d","line":"One agent skill for making 3D scenes and explainers in three.js, with Blender as an optional helper. A ten-step workflow (intent, reason about the objects, ground the facts, choose how to build each object, set quality targets, build a first view, tie motion to one source of state, run and look at real frames, refine, report honestly) backed by a searchable catalog: 223 written recipes across 24 subject areas and 440 knowledge records (99 reasoning rules, 75 domain checks, 37 style profiles, 22 lighting profiles, 22 blueprints and more), eleven reference pages, a kit library, five rigs and a starter. It is frank about its limits: recipes are written guidance that was mostly never rendered,…","path":"skills/3dviz-pro-max/SKILL.md","use":"Copy the whole skills/3dviz-pro-max/ folder into your agent's skills folder (never SKILL.md alone): git clone https://github.com/viettranx/3dviz-pro-max.git, then ln -s \"$(pwd)/skills/3dviz-pro-max\" ~/.claude/skills/3dviz-pro-max   (or as a plugin: claude --plugin-dir /path/to/3dviz-pro-max; or /plugin marketplace add viettranx/3dviz-pro-max, which the README calls untested). Then: \"Use 3dviz-pro-max to build a small fantasy village I can explore.\""},{"id":"3dviz-pro-max/example-arm","name":"Arm in Motion","kind":"three","job":"3d","line":"A registered bone-and-muscle elbow study with an approximate hinge and opposing biceps/triceps shape changes. Example study (anatomy and physiology): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it showed only an error line (\"This study could not load\"), because its meshes are not in the repo.","path":"examples/arm","use":"cd examples && pnpm install && pnpm dev, then open /arm/ (add ?plate=1 to hide the page furniture for a capture)","needs":"108 STL meshes (168.6 MiB) that are not in the repo: pnpm fetch-assets downloads them from the author's bucket (assets.3dviz.dev). They are BodyParts3D meshes under CC BY-SA 2.1 Japan: credit required, and anything made from them must be shared under the…"},{"id":"3dviz-pro-max/example-bloch","name":"The Qubit Compass","kind":"three","job":"3d","line":"An interactive pure-state Bloch sphere with angular controls and basis probabilities. Example study (mathematics): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it drew a wireframe sphere with a state arrow on a dark ground; it stood still until touched.","path":"examples/bloch","use":"cd examples && pnpm install && pnpm dev, then open /bloch/ (add ?plate=1 to hide the page furniture for a capture)","preview":{"poster":"assets/asset-library/3dviz-pro-max-bloch.jpg","w":1280,"h":720}},{"id":"3dviz-pro-max/example-blue-hour","name":"The Last Light","kind":"three","job":"lighting","line":"A blue-hour direction study with a low amber key and cool sky fill over Copperleaf Hollow. Example study (lighting studies): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it drew the whole village island lit by a low warm sun against cool blue; it starts paused.","path":"examples/blue-hour","use":"cd examples && pnpm install && pnpm dev, then open /blue-hour/ (add ?plate=1 to hide the page furniture for a capture)","preview":{"poster":"assets/asset-library/3dviz-pro-max-blue-hour.jpg","w":1280,"h":720}},{"id":"3dviz-pro-max/example-brain","name":"Inside the Brain","kind":"three","job":"3d","line":"A registered-anatomy inspection of selected cortical gyri, white matter, cerebellum, and brainstem components. Example study (anatomy and physiology): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it showed only an error line (\"This study could not load\"), because its meshes are not in the repo.","path":"examples/brain","use":"cd examples && pnpm install && pnpm dev, then open /brain/ (add ?plate=1 to hide the page furniture for a capture)","needs":"108 STL meshes (168.6 MiB) that are not in the repo: pnpm fetch-assets downloads them from the author's bucket (assets.3dviz.dev). They are BodyParts3D meshes under CC BY-SA 2.1 Japan: credit required, and anything made from them must be shared under the…"},{"id":"3dviz-pro-max/example-breathing","name":"Breath by Breath","kind":"three","job":"3d","line":"A registered lung-lobe study with an authored thoracic expansion field, schematic diaphragm, and directional airway cues. Example study (anatomy and physiology): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it showed only an error line (\"This study could not load\"), because its meshes are not in the repo.","path":"examples/breathing","use":"cd examples && pnpm install && pnpm dev, then open /breathing/ (add ?plate=1 to hide the page furniture for a capture)","needs":"108 STL meshes (168.6 MiB) that are not in the repo: pnpm fetch-assets downloads them from the author's bucket (assets.3dviz.dev). They are BodyParts3D meshes under CC BY-SA 2.1 Japan: credit required, and anything made from them must be shared under the…"},{"id":"3dviz-pro-max/example-cavern","name":"Crystal Conservatory","kind":"three","job":"scene","line":"A fictional subterranean garden with crystal light, a bounded pond resident, and restrained ambient motion. Example study (crafted worlds): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it drew a small cave garden with tall crystals, a pool and glowing plants; it moved by itself between two stills a second apart.","path":"examples/cavern","use":"cd examples && pnpm install && pnpm dev, then open /cavern/ (add ?plate=1 to hide the page furniture for a capture)","preview":{"poster":"assets/asset-library/3dviz-pro-max-cavern.jpg","w":1280,"h":720}},{"id":"3dviz-pro-max/example-chaos","name":"The Chaos Desk","kind":"three","job":"3d","line":"Two independently integrated double pendulums reveal divergence from a controlled angular difference. Example study (physics and mechanisms): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it drew two double pendulums hanging from a bench-top frame; it moved by itself between two stills a second apart.","path":"examples/chaos","use":"cd examples && pnpm install && pnpm dev, then open /chaos/ (add ?plate=1 to hide the page furniture for a capture)","preview":{"poster":"assets/asset-library/3dviz-pro-max-chaos.jpg","w":1280,"h":720}},{"id":"3dviz-pro-max/example-complex","name":"Complex Observatory","kind":"three","job":"3d","line":"A Riemann-sphere study comparing z and 1/z through stereographic projection. Example study (mathematics): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it drew a transparent sphere over a plane with projected points; it stood still until touched.","path":"examples/complex","use":"cd examples && pnpm install && pnpm dev, then open /complex/ (add ?plate=1 to hide the page furniture for a capture)","preview":{"poster":"assets/asset-library/3dviz-pro-max-complex.jpg","w":1280,"h":720}},{"id":"3dviz-pro-max/example-cottage","name":"The Copperleaf Cottage","kind":"three","job":"model","line":"A close-readable architectural miniature with layered roofing, closed gables, timber structure, glazing, and a supported porch. Example study (crafted worlds and props): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it drew a half-timbered cottage with a tiled roof, shutters and a chimney on a round stand; it stood still until touched.","path":"examples/cottage","use":"cd examples && pnpm install && pnpm dev, then open /cottage/ (add ?plate=1 to hide the page furniture for a capture)","preview":{"poster":"assets/asset-library/3dviz-pro-max-cottage.jpg","w":1280,"h":720}},{"id":"3dviz-pro-max/example-differential","name":"The Differential","kind":"three","job":"3d","line":"An equal-side-gear differential whose wheel and carrier speeds share one kinematic constraint. Example study (physics and mechanisms): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it drew a brass and steel differential on a stand, ring gear and side gears exposed; it moved by itself between two stills a second apart.","path":"examples/differential","use":"cd examples && pnpm install && pnpm dev, then open /differential/ (add ?plate=1 to hide the page furniture for a capture)","preview":{"poster":"assets/asset-library/3dviz-pro-max-differential.jpg","w":1280,"h":720}},{"id":"3dviz-pro-max/example-fourier","name":"Fourier Sculpture","kind":"three","job":"3d","line":"A phasor-chain and trace showing finite odd-harmonic synthesis of a square wave. Example study (mathematics): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it drew linked rotating circles drawing a square-ish wave in thin lines; it moved by itself between two stills a second apart.","path":"examples/fourier","use":"cd examples && pnpm install && pnpm dev, then open /fourier/ (add ?plate=1 to hide the page furniture for a capture)","preview":{"poster":"assets/asset-library/3dviz-pro-max-fourier.jpg","w":1280,"h":720}},{"id":"3dviz-pro-max/example-gears","name":"Coupled Gears","kind":"three","job":"3d","line":"A machined steel-and-brass spur-gear study with a continuously enforced 3:2 speed ratio. Example study (physics and mechanisms): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it drew a steel 24-tooth and a brass 16-tooth gear on a bench with a one-line readout; it moved by itself between two stills a second apart.","path":"examples/gears","use":"cd examples && pnpm install && pnpm dev, then open /gears/ (add ?plate=1 to hide the page furniture for a capture)","preview":{"video":"assets/asset-library/3dviz-pro-max-gears-stepped.mp4","poster":"assets/asset-library/3dviz-pro-max-gears-stepped-poster.jpg","w":1280,"h":720,"seconds":4}},{"id":"3dviz-pro-max/example-guildhall","name":"The Stonewright Guild","kind":"three","job":"model","line":"A stone-dominant guildhall miniature with a broad facade, layered gables, timber accents, glazing, and brass details. Example study (crafted worlds and props): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it drew a stone guildhall with tall windows on a round stand; it stood still until touched.","path":"examples/guildhall","use":"cd examples && pnpm install && pnpm dev, then open /guildhall/ (add ?plate=1 to hide the page furniture for a capture)","preview":{"poster":"assets/asset-library/3dviz-pro-max-guildhall.jpg","w":1280,"h":720}},{"id":"3dviz-pro-max/example-hall","name":"The Carpenters’ Long Hall","kind":"three","job":"model","line":"A long-form timber hall miniature with repeated structural bays, roof courses, framed openings, and supported entry details. Example study (crafted worlds and props): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it drew a long timber hall with a tiled roof on a round stand; it stood still until touched.","path":"examples/hall","use":"cd examples && pnpm install && pnpm dev, then open /hall/ (add ?plate=1 to hide the page furniture for a capture)","preview":{"poster":"assets/asset-library/3dviz-pro-max-hall.jpg","w":1280,"h":720}},{"id":"3dviz-pro-max/example-heart","name":"The Living Heart","kind":"three","job":"3d","line":"A registered-anatomy heart study with an anterior cutaway, selected vessels and valves, and an authored cardiac-cycle pose. Example study (anatomy and physiology): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it showed only an error line (\"This study could not load\"), because its meshes are not in the repo.","path":"examples/heart","use":"cd examples && pnpm install && pnpm dev, then open /heart/ (add ?plate=1 to hide the page furniture for a capture)","needs":"108 STL meshes (168.6 MiB) that are not in the repo: pnpm fetch-assets downloads them from the author's bucket (assets.3dviz.dev). They are BodyParts3D meshes under CC BY-SA 2.1 Japan: credit required, and anything made from them must be shared under the…"},{"id":"3dviz-pro-max/example-knee","name":"The Moving Knee","kind":"three","job":"3d","line":"A registered bone assembly for resting, exploded, and approximate hinge inspection of the knee. Example study (anatomy and physiology): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it showed only an error line (\"This study could not load\"), because its meshes are not in the repo.","path":"examples/knee","use":"cd examples && pnpm install && pnpm dev, then open /knee/ (add ?plate=1 to hide the page furniture for a capture)","needs":"108 STL meshes (168.6 MiB) that are not in the repo: pnpm fetch-assets downloads them from the author's bucket (assets.3dviz.dev). They are BodyParts3D meshes under CC BY-SA 2.1 Japan: credit required, and anything made from them must be shared under the…"},{"id":"3dviz-pro-max/example-lantern","name":"The Lamplighter’s Lantern","kind":"three","job":"model","line":"An octagonal iron-and-brass lantern with thin glazing, scrollwork, rivets, and restrained flame motion. Example study (crafted worlds and props): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it drew an eight-sided iron and brass lantern with a warm flame; it moved by itself between two stills a second apart.","path":"examples/lantern","use":"cd examples && pnpm install && pnpm dev, then open /lantern/ (add ?plate=1 to hide the page furniture for a capture)","preview":{"poster":"assets/asset-library/3dviz-pro-max-lantern.jpg","w":1280,"h":720}},{"id":"3dviz-pro-max/example-magnetic","name":"Magnetic Atelier","kind":"three","job":"3d","line":"An ideal current-loop field study with numerical streamlines and an exact on-axis probe readout. Example study (physics and mechanisms): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it drew a copper current loop on a stand with field lines around it; it stood still until touched.","path":"examples/magnetic","use":"cd examples && pnpm install && pnpm dev, then open /magnetic/ (add ?plate=1 to hide the page furniture for a capture)","preview":{"poster":"assets/asset-library/3dviz-pro-max-magnetic.jpg","w":1280,"h":720}},{"id":"3dviz-pro-max/example-market","name":"The Harvest Counter","kind":"three","job":"model","line":"A compact market stall with a thick scalloped awning, timber supports, recessed trays, and hand-scale produce. Example study (crafted worlds and props): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it drew a striped market stall with stacked fruit; it stood still until touched.","path":"examples/market","use":"cd examples && pnpm install && pnpm dev, then open /market/ (add ?plate=1 to hide the page furniture for a capture)","preview":{"poster":"assets/asset-library/3dviz-pro-max-market.jpg","w":1280,"h":720}},{"id":"3dviz-pro-max/example-muscle-atlas","name":"Upper-body Muscle Atlas","kind":"three","job":"3d","line":"A source-registered inspection atlas for selected upper-body muscle portions and their skeletal framework. Example study (anatomy and physiology): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it showed only an error line (\"This study could not load\"), because its meshes are not in the repo.","path":"examples/muscle-atlas","use":"cd examples && pnpm install && pnpm dev, then open /muscle-atlas/ (add ?plate=1 to hide the page furniture for a capture)","needs":"108 STL meshes (168.6 MiB) that are not in the repo: pnpm fetch-assets downloads them from the author's bucket (assets.3dviz.dev). They are BodyParts3D meshes under CC BY-SA 2.1 Japan: credit required, and anything made from them must be shared under the…"},{"id":"3dviz-pro-max/example-neuron","name":"The Neural Signal","kind":"three","job":"3d","line":"An authored multipolar-neuron illustration with a directional signal marker, myelin, and terminal branches. Example study (anatomy and physiology): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it drew a pale neuron with branching dendrites and a segmented axon; it moved by itself between two stills a second apart.","path":"examples/neuron","use":"cd examples && pnpm install && pnpm dev, then open /neuron/ (add ?plate=1 to hide the page furniture for a capture)","preview":{"poster":"assets/asset-library/3dviz-pro-max-neuron.jpg","w":1280,"h":720}},{"id":"3dviz-pro-max/example-night-bridge","name":"Across the Lantern Bridge","kind":"three","job":"lighting","line":"A close bridge-and-pond lighting study with one local lantern, cool key light, and receiver-visible shadows. Example study (lighting studies): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it drew a close night view of the village: timber houses, trees and a lit path; it starts paused.","path":"examples/night-bridge","use":"cd examples && pnpm install && pnpm dev, then open /night-bridge/ (add ?plate=1 to hide the page furniture for a capture)","preview":{"poster":"assets/asset-library/3dviz-pro-max-night-bridge.jpg","w":1280,"h":720}},{"id":"3dviz-pro-max/example-night-doorway","name":"A Light at the Door","kind":"three","job":"lighting","line":"A close architectural lighting study of warm panes, nearby lantern light, cool rim separation, and readable door construction. Example study (lighting studies): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it drew a close night view of a timber house door lit by a lantern; it starts paused.","path":"examples/night-doorway","use":"cd examples && pnpm install && pnpm dev, then open /night-doorway/ (add ?plate=1 to hide the page furniture for a capture)","preview":{"poster":"assets/asset-library/3dviz-pro-max-night-doorway.jpg","w":1280,"h":720}},{"id":"3dviz-pro-max/example-night-mill","name":"The Mill After Dark","kind":"three","job":"lighting","line":"A close night study of a detailed mill wheel, warm local light, cool timber and water, and distinct bulb/receiver behavior. Example study (lighting studies): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it drew a close night view of the watermill, a well and a small bridge; it starts paused.","path":"examples/night-mill","use":"cd examples && pnpm install && pnpm dev, then open /night-mill/ (add ?plate=1 to hide the page furniture for a capture)","preview":{"poster":"assets/asset-library/3dviz-pro-max-night-mill.jpg","w":1280,"h":720}},{"id":"3dviz-pro-max/example-night-river","name":"Lanterns by the River","kind":"three","job":"lighting","line":"A cool moonlit village composed around warm pools of lantern light and darkness between them. Example study (lighting studies): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it drew the whole village island at night, lit only by its lanterns; it starts paused.","path":"examples/night-river","use":"cd examples && pnpm install && pnpm dev, then open /night-river/ (add ?plate=1 to hide the page furniture for a capture)","preview":{"poster":"assets/asset-library/3dviz-pro-max-night-river.jpg","w":1280,"h":720}},{"id":"3dviz-pro-max/example-optics","name":"Light Through Matter","kind":"three","job":"3d","line":"A planar ray-tracing bench for refraction, total internal reflection, and optional illustrative dispersion. Example study (physics and mechanisms): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it drew a glass prism on a bench with a ray bending through it; it moved by itself between two stills a second apart.","path":"examples/optics","use":"cd examples && pnpm install && pnpm dev, then open /optics/ (add ?plate=1 to hide the page furniture for a capture)","preview":{"poster":"assets/asset-library/3dviz-pro-max-optics.jpg","w":1280,"h":720}},{"id":"3dviz-pro-max/example-orrery","name":"Orbital Clockwork","kind":"three","job":"3d","line":"A coplanar Kepler-orbit study for Mercury through Mars with an equal-time swept-area inspection. Example study (physics and mechanisms): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it drew a brass orrery with ringed orbits over a dark disc; it moved by itself between two stills a second apart.","path":"examples/orrery","use":"cd examples && pnpm install && pnpm dev, then open /orrery/ (add ?plate=1 to hide the page furniture for a capture)","preview":{"poster":"assets/asset-library/3dviz-pro-max-orrery.jpg","w":1280,"h":720}},{"id":"3dviz-pro-max/example-probability","name":"Probability in Glass","kind":"three","job":"3d","line":"A seeded three-dimensional Gaussian sample with a covariance ellipsoid and marginal-density floor curves. Example study (mathematics): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it drew a cloud of pale sample points with axes; it stood still until touched.","path":"examples/probability","use":"cd examples && pnpm install && pnpm dev, then open /probability/ (add ?plate=1 to hide the page furniture for a capture)","preview":{"poster":"assets/asset-library/3dviz-pro-max-probability.jpg","w":1280,"h":720}},{"id":"3dviz-pro-max/example-resonance","name":"Membrane Modes","kind":"three","job":"3d","line":"Analytical normal modes of a fixed circular membrane with visible nodal lines and slowed display motion. Example study (physics and mechanisms): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it drew a drum-like membrane on legs with a pearly rippling surface; it moved by itself between two stills a second apart.","path":"examples/resonance","use":"cd examples && pnpm install && pnpm dev, then open /resonance/ (add ?plate=1 to hide the page furniture for a capture)","preview":{"poster":"assets/asset-library/3dviz-pro-max-resonance.jpg","w":1280,"h":720}},{"id":"3dviz-pro-max/example-sarcomere","name":"Inside a Sarcomere","kind":"three","job":"3d","line":"A reduced longitudinal model showing filament overlap as Z discs approach without shortening actin or myosin. Example study (anatomy and physiology): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it drew two frames with teal and pink filaments sliding between them; it moved by itself between two stills a second apart.","path":"examples/sarcomere","use":"cd examples && pnpm install && pnpm dev, then open /sarcomere/ (add ?plate=1 to hide the page furniture for a capture)","preview":{"poster":"assets/asset-library/3dviz-pro-max-sarcomere.jpg","w":1280,"h":720}},{"id":"3dviz-pro-max/example-stag","name":"The Moonwood Stag","kind":"three","job":"model","line":"A procedural forest-spirit character with branching antlers, split hooves, layered mane, and restrained planted motion. Example study (crafted worlds and props): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it drew a white stylized stag with tall antlers on a round stand; it moved by itself between two stills a second apart.","path":"examples/stag","use":"cd examples && pnpm install && pnpm dev, then open /stag/ (add ?plate=1 to hide the page furniture for a capture)","preview":{"poster":"assets/asset-library/3dviz-pro-max-stag.jpg","w":1280,"h":720}},{"id":"3dviz-pro-max/example-svd","name":"Space, Rewritten","kind":"three","job":"3d","line":"An interactive geometric SVD showing a sphere transformed by Vᵀ, Σ, then U. Example study (mathematics): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it drew a wire sphere with three marked axes; it moved by itself between two stills a second apart.","path":"examples/svd","use":"cd examples && pnpm install && pnpm dev, then open /svd/ (add ?plate=1 to hide the page furniture for a capture)","preview":{"poster":"assets/asset-library/3dviz-pro-max-svd.jpg","w":1280,"h":720}},{"id":"3dviz-pro-max/example-topology","name":"The Topology Atelier","kind":"three","job":"3d","line":"An analytic Möbius ribbon, torus-cycle, and trefoil traversal study. Example study (mathematics): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it drew a lilac Moebius band with a small marker traveling on it; it moved by itself between two stills a second apart.","path":"examples/topology","use":"cd examples && pnpm install && pnpm dev, then open /topology/ (add ?plate=1 to hide the page furniture for a capture)","preview":{"poster":"assets/asset-library/3dviz-pro-max-topology.jpg","w":1280,"h":720}},{"id":"3dviz-pro-max/example-tower","name":"The Moonwatch Tower","kind":"three","job":"model","line":"A tapered masonry watchtower with staggered courses, gallery rail, framed windows, and a copper roof. Example study (crafted worlds and props): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it drew a round stone tower with a blue cone roof; it stood still until touched.","path":"examples/tower","use":"cd examples && pnpm install && pnpm dev, then open /tower/ (add ?plate=1 to hide the page furniture for a capture)","preview":{"poster":"assets/asset-library/3dviz-pro-max-tower.jpg","w":1280,"h":720}},{"id":"3dviz-pro-max/example-tree","name":"The Windwritten Tree","kind":"three","job":"model","line":"A branching procedural tree with exposed roots, fine twigs, oriented leaves, and deliberately open canopy gaps. Example study (crafted worlds and props): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it drew a twisted tree with an open leafy canopy; it stood still until touched.","path":"examples/tree","use":"cd examples && pnpm install && pnpm dev, then open /tree/ (add ?plate=1 to hide the page furniture for a capture)","preview":{"poster":"assets/asset-library/3dviz-pro-max-tree.jpg","w":1280,"h":720}},{"id":"3dviz-pro-max/example-village","name":"Copperleaf Hollow","kind":"three","job":"scene","line":"A procedural village diorama with raised gardens, distinct landmarks, curved paths, stream and pond, bridge, creatures, and a working visual mill. Example study (crafted worlds): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it drew a small island village on a round stand: half-timbered houses, a round tower, a market stall, a watermill and a bridge over a pond, with trees; it took over a minute to reach its first frame in software rendering.","path":"examples/village","use":"cd examples && pnpm install && pnpm dev, then open /village/ (add ?plate=1 to hide the page furniture for a capture)","preview":{"poster":"assets/asset-library/3dviz-pro-max-village.jpg","w":1280,"h":720}},{"id":"3dviz-pro-max/example-well","name":"The Wishing Well","kind":"three","job":"model","line":"A masonry well with visible water, open bucket, rope coil, metal hoops, and a supported pitched roof. Example study (crafted worlds and props): a few KB of scene code on the shared runtime, with Overview and Close-up views, orbit and zoom, pause and reset. In our trial it drew a stone well with a timber roof, a windlass and a bucket; it stood still until touched.","path":"examples/well","use":"cd examples && pnpm install && pnpm dev, then open /well/ (add ?plate=1 to hide the page furniture for a capture)","preview":{"poster":"assets/asset-library/3dviz-pro-max-well.jpg","w":1280,"h":720}},{"id":"3dviz-pro-max/kit-barrel","name":"Coopered barrel kit","kind":"three","job":"model","line":"A coopered oak barrel with bulged staves, four iron hoops and a three-plank head, parameterised by height, radius, stave count, bulge and seed. A procedural three.js module of at most 200 lines: one seeded factory, real geometry (no textures at the default tier), sockets for attaching things and box colliders. Parameters: height, radius, staves, seed, bulge, gap. A creative starting point, not a measured object.","path":"skills/3dviz-pro-max/templates/kits/props/barrel.js","use":"Copy kit-core.js, kit-walk.js and props/barrel.js into your project, then: import { create } from './kits/props/barrel.js'; const { group, sockets, colliders } = create({ seed: 1 }); scene.add(group);"},{"id":"3dviz-pro-max/kit-biped-walker","name":"Biped walker kit","kind":"three","job":"model","line":"A hatted village figure - tapering torso, belted tunic, two-joint legs and arms - with a procedural walk cycle whose arms counter-swing the legs and whose torso leans with speed. A procedural three.js module of at most 200 lines: one seeded factory, real geometry (no textures at the default tier), sockets for attaching things and box colliders. Parameters: scale, strideM, strideHz, speed, seed, tunic, yawRateRad. Motion: animate(dt), setRoute(points, loop) and state walk it along a route with planted feet, stepped by the delta you pass, so a renderer can drive it. A creative starting point, not a measured object.","path":"skills/3dviz-pro-max/templates/kits/creatures/biped-walker.js","use":"Copy kit-core.js, kit-walk.js and creatures/biped-walker.js into your project, then: import { create } from './kits/creatures/biped-walker.js'; const { group, sockets, colliders } = create({ seed: 1 }); scene.add(group);"},{"id":"3dviz-pro-max/kit-cart","name":"Two-wheeled farm cart kit","kind":"three","job":"model","line":"A two-wheeled farm cart with eight-spoke wheels, a planked bed, side stanchions and draught shafts, with an animate(dt) that rolls the wheels. A procedural three.js module of at most 200 lines: one seeded factory, real geometry (no textures at the default tier), sockets for attaching things and box colliders. Parameters: width, depth, wheelRadius, seed, planks, sideHeight. Motion: animate(dt, speed) rolls the wheels, stepped by the delta you pass, so a renderer can drive it. A creative starting point, not a measured object.","path":"skills/3dviz-pro-max/templates/kits/props/cart.js","use":"Copy kit-core.js, kit-walk.js and props/cart.js into your project, then: import { create } from './kits/props/cart.js'; const { group, sockets, colliders } = create({ seed: 1 }); scene.add(group);"},{"id":"3dviz-pro-max/kit-clothesline","name":"Pegged clothesline kit","kind":"three","job":"model","line":"Two braced poles carrying a sagging line of pegged washing, each sheet at its own width, drop, yaw and lean, parameterised by span, height, sheet count, sag and seed. A procedural three.js module of at most 200 lines: one seeded factory, real geometry (no textures at the default tier), sockets for attaching things and box colliders. Parameters: span, height, sheets, seed, sag. A creative starting point, not a measured object.","path":"skills/3dviz-pro-max/templates/kits/props/clothesline.js","use":"Copy kit-core.js, kit-walk.js and props/clothesline.js into your project, then: import { create } from './kits/props/clothesline.js'; const { group, sockets, colliders } = create({ seed: 1 }); scene.add(group);"},{"id":"3dviz-pro-max/kit-crate","name":"Nailed shipping crate kit","kind":"three","job":"model","line":"A nailed shipping crate of horizontal planks between four corner posts, with a diagonal brace and a battened lid, parameterised by size, plank count and seed. A procedural three.js module of at most 200 lines: one seeded factory, real geometry (no textures at the default tier), sockets for attaching things and box colliders. Parameters: size, planks, seed, braced. A creative starting point, not a measured object.","path":"skills/3dviz-pro-max/templates/kits/props/crate.js","use":"Copy kit-core.js, kit-walk.js and props/crate.js into your project, then: import { create } from './kits/props/crate.js'; const { group, sockets, colliders } = create({ seed: 1 }); scene.add(group);"},{"id":"3dviz-pro-max/kit-fence-run","name":"Paddock fence run kit","kind":"three","job":"model","line":"A paddock fence of instanced posts carrying three sagging rail courses, parameterised by length_m, post count, height, sag and seed. A procedural three.js module of at most 200 lines: one seeded factory, real geometry (no textures at the default tier), sockets for attaching things and box colliders. Parameters: length_m, posts, height, seed, sag. A creative starting point, not a measured object.","path":"skills/3dviz-pro-max/templates/kits/props/fence-run.js","use":"Copy kit-core.js, kit-walk.js and props/fence-run.js into your project, then: import { create } from './kits/props/fence-run.js'; const { group, sockets, colliders } = create({ seed: 1 }); scene.add(group);"},{"id":"3dviz-pro-max/kit-iron-lantern","name":"Iron post lantern (blender gltf) kit","kind":"three","job":"model","line":"A Blender-authored wrought iron post lantern exported as a 136 KB GLB: post on a stepped base, brass collars, hook arm with a diagonal stay, a four-pane glazed head whose material carries KHR_materials_emissive_strength, and three sockets in glTF node extras. A GLB modeled by script in Blender (no .blend file is shipped), loaded through a small wrapper; create() returns a Promise. A creative starting point, not a measured object.","path":"skills/3dviz-pro-max/templates/kits/gltf/iron-lantern.js","use":"Copy kit-core.js, kit-walk.js and gltf/iron-lantern.js and .glb into your project, then: import { create } from './kits/gltf/iron-lantern.js'; const { group, sockets, colliders } = await create({ scale: 1 }); scene.add(group);"},{"id":"3dviz-pro-max/kit-lantern-post","name":"Wrought iron lantern post kit","kind":"three","job":"model","line":"A wrought iron lantern post: stepped base flare, a tapering collared shaft, a scrolled bracket and a glazed head whose panes are emissive geometry with no light object. A procedural three.js module of at most 200 lines: one seeded factory, real geometry (no textures at the default tier), sockets for attaching things and box colliders. Parameters: height, headSize, seed, iron, glass. A creative starting point, not a measured object.","path":"skills/3dviz-pro-max/templates/kits/props/lantern-post.js","use":"Copy kit-core.js, kit-walk.js and props/lantern-post.js into your project, then: import { create } from './kits/props/lantern-post.js'; const { group, sockets, colliders } = create({ seed: 1 }); scene.add(group);"},{"id":"3dviz-pro-max/kit-long-hall","name":"Five-bay timber long hall kit","kind":"three","job":"model","line":"A five-bay timber long hall with two doors, a covered porch, a hanging sign and a chimney at each end of the ridge, parameterised by width, depth, wall height, bay count, roof pitch and seed. A procedural three.js module of at most 200 lines: one seeded factory, real geometry (no textures at the default tier), sockets for attaching things and box colliders. Parameters: width, depth, wallHeight, bayCount, roofPitchDeg, seed. A creative starting point, not a measured object.","path":"skills/3dviz-pro-max/templates/kits/buildings/long-hall.js","use":"Copy kit-core.js, kit-walk.js and buildings/long-hall.js into your project, then: import { create } from './kits/buildings/long-hall.js'; const { group, sockets, colliders } = create({ seed: 1 }); scene.add(group);"},{"id":"3dviz-pro-max/kit-market-stall","name":"Trestle market stall kit","kind":"three","job":"model","line":"A trestle market stall with a striped canopy that sags between its posts, a scalloped valance, a plank counter on trestles, crates, sacks and loose produce, and a hanging price board. A procedural three.js module of at most 200 lines: one seeded factory, real geometry (no textures at the default tier), sockets for attaching things and box colliders. Parameters: width, depth, height, stripes, seed. A creative starting point, not a measured object.","path":"skills/3dviz-pro-max/templates/kits/buildings/market-stall.js","use":"Copy kit-core.js, kit-walk.js and buildings/market-stall.js into your project, then: import { create } from './kits/buildings/market-stall.js'; const { group, sockets, colliders } = create({ seed: 1 }); scene.add(group);"},{"id":"3dviz-pro-max/kit-quadruped-walker","name":"Quadruped walker kit","kind":"three","job":"model","line":"A four-legged village animal - barrel body, arched neck, horned head, three-segment legs and a tail - with a procedural diagonal-pair walk cycle, route following and a clamped turn rate. A procedural three.js module of at most 200 lines: one seeded factory, real geometry (no textures at the default tier), sockets for attaching things and box colliders. Parameters: scale, strideM, strideHz, speed, seed, coat, yawRateRad. Motion: animate(dt), setRoute(points, loop) and state walk it along a route with planted feet, stepped by the delta you pass, so a renderer can drive it. A creative starting point, not a measured object.","path":"skills/3dviz-pro-max/templates/kits/creatures/quadruped-walker.js","use":"Copy kit-core.js, kit-walk.js and creatures/quadruped-walker.js into your project, then: import { create } from './kits/creatures/quadruped-walker.js'; const { group, sockets, colliders } = create({ seed: 1 }); scene.add(group);"},{"id":"3dviz-pro-max/kit-reeds","name":"Instanced water reeds kit","kind":"three","job":"model","line":"A clump of instanced reed blades on a faceted tussock, with seed heads carried on the blade tips and an animate(dt) that bends every blade about its own base. A procedural three.js module of at most 200 lines: one seeded factory, real geometry (no textures at the default tier), sockets for attaching things and box colliders. Parameters: count, seed, spread, height, blade. Motion: animate(dt) sways it, stepped by the delta you pass, so a renderer can drive it. A creative starting point, not a measured object.","path":"skills/3dviz-pro-max/templates/kits/nature/reeds.js","use":"Copy kit-core.js, kit-walk.js and nature/reeds.js into your project, then: import { create } from './kits/nature/reeds.js'; const { group, sockets, colliders } = create({ seed: 1 }); scene.add(group);"},{"id":"3dviz-pro-max/kit-rock-cluster","name":"Glacial rock cluster kit","kind":"three","job":"model","line":"A scatter of part-buried boulders built from five facet-jittered shapes and a pebble ring, parameterised by count, spread and seed, with an instancing handle for the primary boulder. A procedural three.js module of at most 200 lines: one seeded factory, real geometry (no textures at the default tier), sockets for attaching things and box colliders. Parameters: count, seed, spread, rock. A creative starting point, not a measured object.","path":"skills/3dviz-pro-max/templates/kits/nature/rock-cluster.js","use":"Copy kit-core.js, kit-walk.js and nature/rock-cluster.js into your project, then: import { create } from './kits/nature/rock-cluster.js'; const { group, sockets, colliders } = create({ seed: 1 }); scene.add(group);"},{"id":"3dviz-pro-max/kit-round-tower","name":"Battered round stone tower kit","kind":"three","job":"model","line":"A battered round stone tower with a corbelled crenellated crown, a conical cap and banner, arrow slits spiralling up the shaft, and an outside stair to a raised door. A procedural three.js module of at most 200 lines: one seeded factory, real geometry (no textures at the default tier), sockets for attaching things and box colliders. Parameters: height, baseRadius, topRadius, merlons, slits, doorHeight, seed. A creative starting point, not a measured object.","path":"skills/3dviz-pro-max/templates/kits/buildings/round-tower.js","use":"Copy kit-core.js, kit-walk.js and buildings/round-tower.js into your project, then: import { create } from './kits/buildings/round-tower.js'; const { group, sockets, colliders } = create({ seed: 1 }); scene.add(group);"},{"id":"3dviz-pro-max/kit-signboard","name":"Hanging signboard kit","kind":"three","job":"model","line":"A hanging tavern sign: stepped stone foot, timber post, a scrolled iron bracket and a bevelled board with a raised border and a carved boss on both faces. A procedural three.js module of at most 200 lines: one seeded factory, real geometry (no textures at the default tier), sockets for attaching things and box colliders. Parameters: height, reach, boardWidth, boardHeight, seed, postWidth. A creative starting point, not a measured object.","path":"skills/3dviz-pro-max/templates/kits/props/signboard.js","use":"Copy kit-core.js, kit-walk.js and props/signboard.js into your project, then: import { create } from './kits/props/signboard.js'; const { group, sockets, colliders } = create({ seed: 1 }); scene.add(group);"},{"id":"3dviz-pro-max/kit-stone-bridge","name":"Segmental-arch stone bridge kit","kind":"three","job":"model","line":"A single segmental-arch stone bridge with a voussoir ring and raised keystone, coursed spandrels, four cutwaters, a cobbled deck and a coped parapet, exposing deck sockets at both approaches. A procedural three.js module of at most 200 lines: one seeded factory, real geometry (no textures at the default tier), sockets for attaching things and box colliders. Parameters: span, width, rise, springHeight, voussoirCount, approach, parapetHeight, seed. A creative starting point, not a measured object.","path":"skills/3dviz-pro-max/templates/kits/buildings/stone-bridge.js","use":"Copy kit-core.js, kit-walk.js and buildings/stone-bridge.js into your project, then: import { create } from './kits/buildings/stone-bridge.js'; const { group, sockets, colliders } = create({ seed: 1 }); scene.add(group);"},{"id":"3dviz-pro-max/kit-stone-guildhall","name":"Stone guildhall (blender gltf) kit","kind":"three","job":"model","line":"A Blender-authored stone guildhall exported as a 661 KB GLB: plinth, string course, capped chimney, a twelve-course tiled gable roof, twelve windows glazed 20 cm inside 42 cm walls, four material slots and four sockets carried in glTF node extras. A GLB modeled by script in Blender (no .blend file is shipped), loaded through a small wrapper; create() returns a Promise. A creative starting point, not a measured object.","path":"skills/3dviz-pro-max/templates/kits/gltf/stone-guildhall.js","use":"Copy kit-core.js, kit-walk.js and gltf/stone-guildhall.js and .glb into your project, then: import { create } from './kits/gltf/stone-guildhall.js'; const { group, sockets, colliders } = await create({ scale: 1 }); scene.add(group);"},{"id":"3dviz-pro-max/kit-timber-cottage","name":"Timber-framed cottage kit","kind":"three","job":"model","line":"A two-bay timber-framed cottage with a tiled gable roof, inset windows and a chimney socket, parameterised by width, depth, storeys, roof pitch and seed. A procedural three.js module of at most 200 lines: one seeded factory, real geometry (no textures at the default tier), sockets for attaching things and box colliders. Parameters: width, depth, storeys, seed, roofPitchDeg. A creative starting point, not a measured object.","path":"skills/3dviz-pro-max/templates/kits/buildings/timber-cottage.js","use":"Copy kit-core.js, kit-walk.js and buildings/timber-cottage.js into your project, then: import { create } from './kits/buildings/timber-cottage.js'; const { group, sockets, colliders } = create({ seed: 1 }); scene.add(group);"},{"id":"3dviz-pro-max/kit-tree-conifer","name":"Conifer with countable boughs kit","kind":"three","job":"model","line":"A conifer with a flared root collar, a leaning tapered bole and eight whorls, each a skirt with nine boughs poking past it, with sway(dt) and an instancing handle. A procedural three.js module of at most 200 lines: one seeded factory, real geometry (no textures at the default tier), sockets for attaching things and box colliders. Parameters: seed, age, lean, height, radius, needle. Motion: animate(dt) sways it, stepped by the delta you pass, so a renderer can drive it. A creative starting point, not a measured object.","path":"skills/3dviz-pro-max/templates/kits/nature/tree-conifer.js","use":"Copy kit-core.js, kit-walk.js and nature/tree-conifer.js into your project, then: import { create } from './kits/nature/tree-conifer.js'; const { group, sockets, colliders } = create({ seed: 1 }); scene.add(group);"},{"id":"3dviz-pro-max/kit-tree-round","name":"Round-crowned broadleaf tree kit","kind":"three","job":"model","line":"A broadleaf tree with a flared root collar, a four-segment leaning trunk, four branches and a crown of seven overlapping canopy lobes, with sway(dt) and an instancing handle for the lobe. A procedural three.js module of at most 200 lines: one seeded factory, real geometry (no textures at the default tier), sockets for attaching things and box colliders. Parameters: seed, age, lean, height, radius, leaf. Motion: animate(dt) sways it, stepped by the delta you pass, so a renderer can drive it. A creative starting point, not a measured object.","path":"skills/3dviz-pro-max/templates/kits/nature/tree-round.js","use":"Copy kit-core.js, kit-walk.js and nature/tree-round.js into your project, then: import { create } from './kits/nature/tree-round.js'; const { group, sockets, colliders } = create({ seed: 1 }); scene.add(group);"},{"id":"3dviz-pro-max/kit-watermill","name":"Watermill with a turning wheel kit","kind":"three","job":"model","line":"A two-storey stone-and-timber mill with an overshot wheel on a wheel socket, a launder feeding it, a first-floor loading door under a hoist beam, and an animate(dt) that turns only the wheel. A procedural three.js module of at most 200 lines: one seeded factory, real geometry (no textures at the default tier), sockets for attaching things and box colliders. Parameters: width, depth, wheelRadius, paddles, roofPitchDeg, speedRadPerSec, seed. Motion: animate(dt) turns the wheel, stepped by the delta you pass, so a renderer can drive it. A creative starting point, not a measured object.","path":"skills/3dviz-pro-max/templates/kits/buildings/watermill.js","use":"Copy kit-core.js, kit-walk.js and buildings/watermill.js into your project, then: import { create } from './kits/buildings/watermill.js'; const { group, sockets, colliders } = create({ seed: 1 }); scene.add(group);"},{"id":"3dviz-pro-max/kit-well","name":"Stone draw-well kit","kind":"three","job":"model","line":"A stone draw-well: three courses of dressed blocks under a coping ring, two posts, a shingled gable roof, a cranked windlass with coiled rope and a hanging bucket. A procedural three.js module of at most 200 lines: one seeded factory, real geometry (no textures at the default tier), sockets for attaching things and box colliders. Parameters: radius, postHeight, seed, blocks, wall, drumHeight, roofPitchDeg. A creative starting point, not a measured object.","path":"skills/3dviz-pro-max/templates/kits/props/well.js","use":"Copy kit-core.js, kit-walk.js and props/well.js into your project, then: import { create } from './kits/props/well.js'; const { group, sockets, colliders } = create({ seed: 1 }); scene.add(group);"},{"id":"3dviz-pro-max/kit-timber-cottage-t3","name":"timber-cottage-t3 (baked hero GLB)","kind":"three","job":"model","line":"The T3 hero: the cottage module's own geometry, baked in Blender. A 1.8 to 1.9 MB GLB: bevelled edges, one UV atlas, baked color, occlusion and roughness. Usable as shipped without Blender; softer at close range than the tiled procedural surface, by the repo's own account.","path":"skills/3dviz-pro-max/templates/kits/gltf/timber-cottage-t3.js","use":"import { create } from './kits/gltf/timber-cottage-t3.js'; const { group, sockets } = await create({ scale: 1 }); scene.add(group);"},{"id":"3dviz-pro-max/kit-watermill-t3","name":"watermill-t3 (baked hero GLB)","kind":"three","job":"model","line":"The T3 hero: the watermill module's own geometry, baked in Blender. A 1.8 to 1.9 MB GLB: bevelled edges, one UV atlas, baked color, occlusion and roughness. Usable as shipped without Blender; softer at close range than the tiled procedural surface, by the repo's own account.","path":"skills/3dviz-pro-max/templates/kits/gltf/watermill-t3.js","use":"import { create } from './kits/gltf/watermill-t3.js'; const { group, sockets } = await create({ scale: 1 }); scene.add(group);"},{"id":"3dviz-pro-max/primitive-bevelled-box","name":"bevelled-box primitive","kind":"three","job":"model","line":"The base solid of every kit: a chamfered block that can carry edge wear. A building part used inside the building kits; it has no catalog record or capture of its own.","path":"skills/3dviz-pro-max/templates/kits/primitives/bevelled-box.js","use":"import { create } from './kits/primitives/bevelled-box.js';   (needs kit-core.js beside the kits folder; see the file's header for its parameters)"},{"id":"3dviz-pro-max/primitive-chimney","name":"chimney primitive","kind":"three","job":"model","line":"A brick stack with corbelled courses, a stone cap and a clay pot. A building part used inside the building kits; it has no catalog record or capture of its own.","path":"skills/3dviz-pro-max/templates/kits/primitives/chimney.js","use":"import { create } from './kits/primitives/chimney.js';   (needs kit-core.js beside the kits folder; see the file's header for its parameters)"},{"id":"3dviz-pro-max/primitive-door-with-step","name":"door-with-step primitive","kind":"three","job":"model","line":"A plank door recessed in its opening, with iron straps, a ring handle, a stone threshold and a step that breaks the wall plane at the bottom of the silhouette. A building part used inside the building kits; it has no catalog record or capture of its own.","path":"skills/3dviz-pro-max/templates/kits/primitives/door-with-step.js","use":"import { create } from './kits/primitives/door-with-step.js';   (needs kit-core.js beside the kits folder; see the file's header for its parameters)"},{"id":"3dviz-pro-max/primitive-inset-window","name":"inset-window primitive","kind":"three","job":"model","line":"A window recessed behind the wall face: reveal, frame, glazing bars, emissive glass, sill board and its drip groove. A building part used inside the building kits; it has no catalog record or capture of its own.","path":"skills/3dviz-pro-max/templates/kits/primitives/inset-window.js","use":"import { create } from './kits/primitives/inset-window.js';   (needs kit-core.js beside the kits folder; see the file's header for its parameters)"},{"id":"3dviz-pro-max/primitive-railing","name":"railing primitive","kind":"three","job":"model","line":"A run of railing in two builds: turned balusters, or a solid parapet with coping. A building part used inside the building kits; it has no catalog record or capture of its own.","path":"skills/3dviz-pro-max/templates/kits/primitives/railing.js","use":"import { create } from './kits/primitives/railing.js';   (needs kit-core.js beside the kits folder; see the file's header for its parameters)"},{"id":"3dviz-pro-max/primitive-roof-tile-strip","name":"roof-tile-strip primitive","kind":"three","job":"model","line":"One roof slope as lapped tile courses in a single InstancedMesh. A building part used inside the building kits; it has no catalog record or capture of its own.","path":"skills/3dviz-pro-max/templates/kits/primitives/roof-tile-strip.js","use":"import { create } from './kits/primitives/roof-tile-strip.js';   (needs kit-core.js beside the kits folder; see the file's header for its parameters)"},{"id":"3dviz-pro-max/primitive-sign","name":"sign primitive","kind":"three","job":"model","line":"A hanging trade sign: wrought bracket, eye hooks, a framed board and a painted field. A building part used inside the building kits; it has no catalog record or capture of its own.","path":"skills/3dviz-pro-max/templates/kits/primitives/sign.js","use":"import { create } from './kits/primitives/sign.js';   (needs kit-core.js beside the kits folder; see the file's header for its parameters)"},{"id":"3dviz-pro-max/primitive-stairs","name":"stairs primitive","kind":"three","job":"model","line":"A straight flight: treads, real risers, a raking stringer and worn nosings. A building part used inside the building kits; it has no catalog record or capture of its own.","path":"skills/3dviz-pro-max/templates/kits/primitives/stairs.js","use":"import { create } from './kits/primitives/stairs.js';   (needs kit-core.js beside the kits folder; see the file's header for its parameters)"},{"id":"3dviz-pro-max/primitive-timber-frame","name":"timber-frame primitive","kind":"three","job":"model","line":"Exposed half-timber framing that stands proud of a wall face. A building part used inside the building kits; it has no catalog record or capture of its own.","path":"skills/3dviz-pro-max/templates/kits/primitives/timber-frame.js","use":"import { create } from './kits/primitives/timber-frame.js';   (needs kit-core.js beside the kits folder; see the file's header for its parameters)"},{"id":"3dviz-pro-max/village-layout","name":"village-layout.js","kind":"three","job":"layout","line":"Plans a village from a seed: lanes, building plots that face the nearest lane without overlapping, and scatter zones for the gaps. The same seed gives the same plan in Node and in the browser. It places nothing itself; you put kits on the plots.","path":"skills/3dviz-pro-max/templates/kits/layout/village-layout.js","use":"import { planVillage, place, nearestPathPoint, pathRibbon } from './kits/layout/village-layout.js'; const plan = planVillage({ seed: 1, radius: 26, plotCount: 8, pathWidth: 2.6 });"},{"id":"3dviz-pro-max/kit-core","name":"kit-core.js","kind":"three","job":"model","line":"The shared helpers every kit module imports: a material cache, a seeded random generator, a bevelled box, an inset panel, a wall with real openings, instanced scatter that keeps colors true, socket and collider descriptors, and attach(). Re-exports the walk, surface and LOD helpers.","path":"skills/3dviz-pro-max/templates/kits/kit-core.js","use":"import { seeded, bevelledBox, scatterInstances, attach, buildKit, lodFor } from './kits/kit-core.js';"},{"id":"3dviz-pro-max/kit-lod","name":"kit-lod.js","kind":"three","job":"render","line":"Puts several quality tiers of one object into a single THREE.LOD with switch distances in meters and a hysteresis fraction so a slow orbit does not flicker, plus a blockout box for planning. In a draw-on-demand loop you must call lod.update(camera) yourself.","path":"skills/3dviz-pro-max/templates/kits/kit-lod.js","use":"const lod = lodFor({ T2: rich.group, T1: plain.group, T0: blockout(record).group }, { distances: { T2: 0, T1: 8.83, T0: 27.2 }, hysteresis: 0.08 }); scene.add(lod);"},{"id":"3dviz-pro-max/kit-surface","name":"kit-surface.js (procedural surface, tier T2)","kind":"three","job":"material","line":"Gives a flat-colored kit a drawn surface with no image files: seeded albedo, normal and roughness canvases for seven families (wood, plaster, stone, roof tile, metal, fabric, fur) that tile seamlessly, plus vertex-baked occlusion, ground dirt and edge wear from kit-surface-ao.js. The family is chosen per palette color, so the module's own hue is kept.","path":"skills/3dviz-pro-max/templates/kits/kit-surface.js","use":"const cottage = buildKit(create, { seed: 1, tier: 'T2', surface: { families: { '#e5dccb': 'plaster', '#6b4f34': 'wood' }, seed: 1, size: 1024, ao: { samples: 24, radius_m: 0.45 } } });"},{"id":"3dviz-pro-max/kit-walk","name":"kit-walk.js (gait maths)","kind":"three","job":"rig","line":"Three pure helpers behind the two walkers: twoBoneIk, footCycle and routeStep. The walk advances by distance traveled over stride length, so a planted foot holds its place instead of sliding. No geometry and no clock: a new walker is a rig plus a pose function.","path":"skills/3dviz-pro-max/templates/kits/kit-walk.js","use":"import { twoBoneIk, footCycle, routeStep } from './kits/kit-core.js';"},{"id":"3dviz-pro-max/kit-proof-harness","name":"Blueprint proof harness","kind":"tool","job":"review","line":"A small offline page that loads one kit, lights it with one sun on neutral gray with no post-processing, and stands at four distances worked out from the model (far, mid, close, detail). A second mode exports the kit as GLB. The repo's kit-proof.py drives it and, for motion, advances animate(dt) in fixed 1/60 s steps so a capture repeats.","path":"skills/3dviz-pro-max/templates/kits/_harness","use":"python3 scripts/kit-proof.py --record knowledge.blueprint-timber-cottage [--motion-check 400]","needs":"Python 3, Playwright with Chromium, a vendored copy of three"},{"id":"3dviz-pro-max/blender-export-village-assets","name":"export-village-assets.py","kind":"blender","job":"model","line":"Build the village glTF heroes procedurally in bpy and export them headless. The bpy script the stone guildhall and iron lantern GLBs come from; sockets are Blender empties carried into the GLB as node extras.","path":"skills/3dviz-pro-max/templates/kits/blender/export-village-assets.py","use":"blender -b --factory-startup --python-exit-code 1 --python export-village-assets.py -- --asset stone-guildhall --out stone-guildhall.glb","needs":"Blender 4.2 LTS or newer"},{"id":"3dviz-pro-max/blender-export-hero-tier","name":"export-hero-tier.py","kind":"blender","job":"material","line":"Bake one already-exported kit GLB into a T3 hero GLB: bevel, UVs, baked color, AO, roughness. Joins the exported kit, bevels every edge, makes one UV atlas and bakes with Cycles; driven by scripts/hero-tier.py.","path":"skills/3dviz-pro-max/templates/kits/blender/export-hero-tier.py","use":"python3 scripts/hero-tier.py <blueprint-id>   (reports {\"status\": \"unavailable\"} without Blender)","needs":"Blender 4.2 LTS or newer"},{"id":"3dviz-pro-max/rig-camera-orbit-follow","name":"camera-orbit-follow.js","kind":"three","job":"camera","line":"Orbit camera with damping, named views, a 0.9 s focus tween and a follow mode that yields when the user takes over. rig.update(dt) returns true when the camera moved, so it works in a draw-on-demand loop and can be stepped. One file; copy it out of the skill folder into your project.","path":"skills/3dviz-pro-max/templates/rigs/camera-orbit-follow.js","use":"const rig = createCameraRig({ camera, canvas, views: VIEWS, invalidate, limits: { minPolarDeg: 55, maxPolarDeg: 88, minDist: 4, maxDist: 30 } }); rig.setView('overview'); each frame: rig.update(dt);"},{"id":"3dviz-pro-max/rig-lighting-sun","name":"lighting-sun.js","kind":"three","job":"lighting","line":"Outdoor key, fill and rim. The defaults are dusk golden hour (a warm sun 6 degrees above the horizon, key to fill about 6 to 1); an overcast alternative sits commented in the file. One file; copy it out of the skill folder into your project.","path":"skills/3dviz-pro-max/templates/rigs/lighting-sun.js","use":"const sun = createSunRig(scene, {});"},{"id":"3dviz-pro-max/rig-lighting-night-lantern","name":"lighting-night-lantern.js","kind":"three","job":"lighting","line":"Night made of falloff: a weak blue moon, a dim hemisphere fill and up to twelve warm lantern point lights with physical decay (60 cd at 2.4 m makes a pool about 3 m across), only two of them casting shadows. One file; copy it out of the skill folder into your project.","path":"skills/3dviz-pro-max/templates/rigs/lighting-night-lantern.js","use":"const night = createNightLanternRig(scene, { /* see the file's header for the options */ });"},{"id":"3dviz-pro-max/rig-lighting-studio","name":"lighting-studio.js","kind":"three","job":"lighting","line":"A dark product studio: RoomEnvironment at low intensity plus three RectAreaLight panels (key, fill, rim, about 3 to 1) and one contact shadow. The file says to change panel sizes before intensity, because form is read from the shape of the reflection. One file; copy it out of the skill folder into your project.","path":"skills/3dviz-pro-max/templates/rigs/lighting-studio.js","use":"const studio = createStudioRig(scene, renderer, { subject: [0, 0.4, 0], distance: 2.8 });"},{"id":"3dviz-pro-max/rig-post-stack","name":"post-stack.js","kind":"three","job":"effect","line":"Bloom, vignette and optional depth of field through the pmndrs postprocessing package, with a careful note on tone mapping: the stack takes it off the renderer and applies it once at the end, or a composited frame comes out flat. One file; copy it out of the skill folder into your project.","path":"skills/3dviz-pro-max/templates/rigs/post-stack.js","use":"const post = createPostStack({ renderer, scene, camera, bloom: { threshold: 1.0, strength: 0.3, radius: 0.7 }, vignette: 0.25, toneMapping: { mode: 'ACESFilmic', exposure: 0.9 } });","needs":"Postprocessing 6.39.4 from npm"},{"id":"3dviz-pro-max/scaffold-vite-threejs","name":"scaffold-vite-threejs","kind":"template","job":"scene","line":"A whole starter scene: Vite with three 0.180, sRGB output and tone mapping from one LOOK block of numbers, a draw-on-demand loop that schedules no frame while nothing moves, the orbit camera rig, the sun rig, a gradient sky, scale cues, scattered props, drifting motes, named views with buttons, and two globals (window.__sceneReady and window.__viewer) that let a script drive and capture it. Everything is procedural: no remote fonts, textures or models.","path":"skills/3dviz-pro-max/templates/scaffold-vite-threejs","use":"cp -r <skill>/templates/scaffold-vite-threejs my-scene && cp -r <skill>/templates/rigs my-scene/rigs && cd my-scene && pnpm install && pnpm dev   (http://<your-dev-server>:4173)","needs":"Node; pnpm or npm; three 0.180.0, postprocessing 6.39.4, vite 7.1.5"},{"id":"3dviz-pro-max/doc-design-system","name":"design-system.md template","kind":"skill","job":"plan","line":"A fill-in note for a scene's look: the look statement and the decisions a later edit must not undo.","path":"skills/3dviz-pro-max/templates/docs/design-system.md","use":"Copy the file next to your scene and fill it in."},{"id":"3dviz-pro-max/doc-scene-spec","name":"scene-spec.json template","kind":"skill","job":"plan","line":"A fill-in record of what a scene claims, which catalog records it used, what its runtime is, and one row per thing a viewer could read as fact.","path":"skills/3dviz-pro-max/templates/docs/scene-spec.json","use":"Copy the file next to your scene and fill it in."},{"id":"3dviz-pro-max/doc-validation-report","name":"validation-report.md template","kind":"skill","job":"review","line":"A fill-in report of what was run and seen; every row needs evidence on disk, and an unobserved frame is never written up as passing.","path":"skills/3dviz-pro-max/templates/docs/validation-report.md","use":"Copy the file next to your scene and fill it in."},{"id":"3dviz-pro-max/checklist-visual-anti-slop","name":"Visual review prompts","kind":"skill","job":"review","line":"A list of judgment prompts for any rendered 3D view, each with its cheapest check, written as conditions and not as a score: a blank background or a still scene can be exactly right.","path":"skills/3dviz-pro-max/templates/checklists/visual-anti-slop.md","use":"Copy the file next to your scene and fill it in."},{"id":"3dviz-pro-max/checklist-inspection-per-frame","name":"Frame and interaction inspection","kind":"skill","job":"review","line":"Which captures a scene owes (overview, close-ups, each important interaction) and what to check on each one, looking at the rendered result and not the build log.","path":"skills/3dviz-pro-max/templates/checklists/inspection-per-frame.md","use":"Copy the file next to your scene and fill it in."},{"id":"3dviz-pro-max/script-blender-locate","name":"blender_locate.py","kind":"tool","job":"plan","line":"Finds a Blender binary in the usual places without asking the user to fix PATH, and runs it once with --version.","path":"skills/3dviz-pro-max/scripts/blender_locate.py","use":"imported by host-probe.py and hero-tier.py","needs":"Python 3, standard library only"},{"id":"3dviz-pro-max/script-capture","name":"capture.py","kind":"tool","job":"review","line":"Serves a built scene from a local port, opens it in headless Chromium, visits its named views, clicks controls you name and writes PNGs and the console log. --motion-check takes a second frame later and --expect-motion fails if the two are the same. It records and does not judge.","path":"skills/3dviz-pro-max/scripts/capture.py","use":"python3 scripts/capture.py --dir dist --all-views --click \"#control\" --out captures [--motion-check 2000 --expect-motion]","needs":"Python 3; pip install playwright && playwright install chromium (not bundled; without it the script exits 3)"},{"id":"3dviz-pro-max/script-capture-view-quality","name":"capture_view_quality.py","kind":"tool","job":"review","line":"Measures whether a captured frame is usable at all: near-black, filled by a wall, or flat. Used by capture.py's --expect-usable.","path":"skills/3dviz-pro-max/scripts/capture_view_quality.py","use":"python3 scripts/capture.py --dir dist --all-views --expect-usable --out captures","needs":"Python 3, standard library only"},{"id":"3dviz-pro-max/script-catalog","name":"catalog.py","kind":"tool","job":"plan","line":"The small read-only catalog reader the other helpers share.","path":"skills/3dviz-pro-max/scripts/catalog.py","use":"imported by search.py and resolve.py","needs":"Python 3, standard library only"},{"id":"3dviz-pro-max/script-design-context","name":"design-context.py","kind":"tool","job":"plan","line":"Gathers catalog context for an objective in one call: matching records, kits that fit a chosen look, and, given a host report, which kit pipeline is available.","path":"skills/3dviz-pro-max/scripts/design-context.py","use":"python3 scripts/design-context.py \"<objective>\" --blueprints --look knowledge.style-hand-painted [--host host.json]","needs":"Python 3, standard library only"},{"id":"3dviz-pro-max/script-hero-tier","name":"hero-tier.py","kind":"tool","job":"render","line":"Bakes one kit into a T3 hero GLB: the harness exports the kit's own geometry, then Blender bevels, unwraps and bakes it. Cached by inputs; without Blender it reports unavailable and bakes nothing.","path":"skills/3dviz-pro-max/scripts/hero-tier.py","use":"python3 scripts/hero-tier.py <blueprint-id>","needs":"Python 3; Blender 4.2 LTS or newer; Playwright"},{"id":"3dviz-pro-max/script-host-probe","name":"host-probe.py","kind":"tool","job":"plan","line":"Reports which tools the machine has (Node, a package manager, Playwright browsers, Blender) by running a fixed list of version commands with a 5 s limit each. Installs and downloads nothing and writes one file.","path":"skills/3dviz-pro-max/scripts/host-probe.py","use":"python3 scripts/host-probe.py --out host.json","needs":"Python 3, standard library only"},{"id":"3dviz-pro-max/script-manifest-contract","name":"manifest_contract.py","kind":"tool","job":"review","line":"Checks the catalog manifest is one the helpers support before any record path is read.","path":"skills/3dviz-pro-max/scripts/manifest_contract.py","use":"imported by catalog.py","needs":"Python 3, standard library only"},{"id":"3dviz-pro-max/script-quality-brief","name":"quality_brief.py","kind":"tool","job":"plan","line":"Recommends a kit pipeline (T0 to T4) per blueprint from the host's tools and each record's declared proof status. Used by design-context.py.","path":"skills/3dviz-pro-max/scripts/quality_brief.py","use":"python3 scripts/design-context.py \"<objective>\" --blueprints --host host.json --delivery web-desktop --hero <blueprint-id>","needs":"Python 3, standard library only"},{"id":"3dviz-pro-max/script-record-layout","name":"record_layout.py","kind":"tool","job":"plan","line":"Maps a record id to its file path; storage layout kept apart from topic routing.","path":"skills/3dviz-pro-max/scripts/record_layout.py","use":"imported by catalog.py","needs":"Python 3, standard library only"},{"id":"3dviz-pro-max/script-resolve","name":"resolve.py","kind":"tool","job":"plan","line":"Prints the full record for ids you name, with its sources; for a blueprint also the asset path, parameters, socket names and a starting snippet.","path":"skills/3dviz-pro-max/scripts/resolve.py","use":"python3 scripts/resolve.py recipe.coupled-gears knowledge.style-painterly","needs":"Python 3, standard library only"},{"id":"3dviz-pro-max/script-search","name":"search.py","kind":"tool","job":"plan","line":"Searches the catalog by words and prints matching recipe and knowledge ids. Lexical suggestions only: it says itself that it is not a semantic router.","path":"skills/3dviz-pro-max/scripts/search.py","use":"python3 scripts/search.py \"coupled gears ratio\" [--kind lighting-profile]","needs":"Python 3, standard library only"},{"id":"3dviz-pro-max/schema-direction","name":"direction.schema.json","kind":"skill","job":"review","line":"JSON Schema for one kind of catalog file (direction): required fields id, summary. Structural only; the repo's validate.py adds the checks on references, hashes and evidence links.","path":"schemas/direction.schema.json","use":"Validate a record against it with any JSON Schema tool, or run python3 scripts/validate.py for the full check."},{"id":"3dviz-pro-max/schema-evidence-event","name":"evidence-event.schema.json","kind":"skill","job":"review","line":"JSON Schema for one kind of catalog file (evidence event): required fields schema_version, event_id, change_id, timestamp, event_type, actor, record_refs, summary. Structural only; the repo's validate.py adds the checks on references, hashes and evidence links.","path":"schemas/evidence-event.schema.json","use":"Validate a record against it with any JSON Schema tool, or run python3 scripts/validate.py for the full check."},{"id":"3dviz-pro-max/schema-knowledge","name":"knowledge.schema.json","kind":"skill","job":"review","line":"JSON Schema for one kind of catalog file (reusable knowledge): required fields schema_version, id, revision, status, record_kind, title, aliases, direction_ids. Structural only; the repo's validate.py adds the checks on references, hashes and evidence links.","path":"schemas/knowledge.schema.json","use":"Validate a record against it with any JSON Schema tool, or run python3 scripts/validate.py for the full check."},{"id":"3dviz-pro-max/schema-recipe","name":"recipe.schema.json","kind":"skill","job":"review","line":"JSON Schema for one kind of catalog file (recipe): required fields schema_version, id, revision, status, record_kind, title, aliases, direction_ids. Structural only; the repo's validate.py adds the checks on references, hashes and evidence links.","path":"schemas/recipe.schema.json","use":"Validate a record against it with any JSON Schema tool, or run python3 scripts/validate.py for the full check."},{"id":"3dviz-pro-max/schema-source","name":"source.schema.json","kind":"skill","job":"review","line":"JSON Schema for one kind of catalog file (source): required fields id, url, title, accessed_at, locator, scope. Structural only; the repo's validate.py adds the checks on references, hashes and evidence links.","path":"schemas/source.schema.json","use":"Validate a record against it with any JSON Schema tool, or run python3 scripts/validate.py for the full check."},{"id":"3dviz-pro-max/repo-script-blueprint-validation","name":"blueprint_validation.py","kind":"tool","job":"review","line":"Checks that a blueprint record, its module and its proof captures agree. Maintainer tooling for this repo; not part of the installed skill.","path":"scripts/blueprint_validation.py","use":"python3 scripts/blueprint_validation.py","needs":"Python 3"},{"id":"3dviz-pro-max/repo-script-build-index","name":"build-index.py","kind":"tool","job":"review","line":"Regenerates the human-readable catalog pages and the coverage summary from the records; --check fails if they are stale. Maintainer tooling for this repo; not part of the installed skill.","path":"scripts/build-index.py","use":"python3 scripts/build-index.py","needs":"Python 3"},{"id":"3dviz-pro-max/repo-script-catalog-validation","name":"catalog_validation.py","kind":"tool","job":"review","line":"The catalog contract checks used by validate.py. Maintainer tooling for this repo; not part of the installed skill.","path":"scripts/catalog_validation.py","use":"python3 scripts/catalog_validation.py","needs":"Python 3"},{"id":"3dviz-pro-max/repo-script-check-docs","name":"check-docs.py","kind":"tool","job":"review","line":"Checks links and JSON examples in the repo's Markdown. Maintainer tooling for this repo; not part of the installed skill.","path":"scripts/check-docs.py","use":"python3 scripts/check-docs.py","needs":"Python 3"},{"id":"3dviz-pro-max/repo-script-check-retrieval","name":"check-retrieval.py","kind":"tool","job":"review","line":"Runs 249 authored search cases against search.py and reports which known intents find their record. Maintainer tooling for this repo; not part of the installed skill.","path":"scripts/check-retrieval.py","use":"python3 scripts/check-retrieval.py","needs":"Python 3"},{"id":"3dviz-pro-max/repo-script-evidence-log","name":"evidence-log.py","kind":"tool","job":"review","line":"Appends a contract-shaped evidence event and a record snapshot to a change log. Maintainer tooling for this repo; not part of the installed skill.","path":"scripts/evidence-log.py","use":"python3 scripts/evidence-log.py","needs":"Python 3"},{"id":"3dviz-pro-max/repo-script-evidence-log-events","name":"evidence_log_events.py","kind":"tool","job":"review","line":"Builds the event objects and snapshot paths for evidence-log.py. Maintainer tooling for this repo; not part of the installed skill.","path":"scripts/evidence_log_events.py","use":"python3 scripts/evidence_log_events.py","needs":"Python 3"},{"id":"3dviz-pro-max/repo-script-evidence-validation","name":"evidence_validation.py","kind":"tool","job":"review","line":"Checks evidence links and observations for validate.py without certifying that they are true. Maintainer tooling for this repo; not part of the installed skill.","path":"scripts/evidence_validation.py","use":"python3 scripts/evidence_validation.py","needs":"Python 3"},{"id":"3dviz-pro-max/repo-script-kit-proof","name":"kit-proof.py","kind":"tool","job":"review","line":"Turns one blueprint record into four real captures, a proof log with a hash per picture, and an evidence event. Maintainer tooling for this repo; not part of the installed skill.","path":"scripts/kit-proof.py","use":"python3 scripts/kit-proof.py","needs":"Python 3; Playwright with Chromium"},{"id":"3dviz-pro-max/repo-script-kit-proof-harness","name":"kit_proof_harness.py","kind":"tool","job":"review","line":"Assembles the offline proof page for kit-proof.py with a vendored three: no bundler, no network, no install. Maintainer tooling for this repo; not part of the installed skill.","path":"scripts/kit_proof_harness.py","use":"python3 scripts/kit_proof_harness.py","needs":"Python 3"},{"id":"3dviz-pro-max/repo-script-migrate-catalog","name":"migrate-catalog.py","kind":"tool","job":"review","line":"Previews or applies the one-file-per-record layout while keeping content and search results the same. Maintainer tooling for this repo; not part of the installed skill.","path":"scripts/migrate-catalog.py","use":"python3 scripts/migrate-catalog.py","needs":"Python 3"},{"id":"3dviz-pro-max/repo-script-package","name":"package.py","kind":"tool","job":"review","line":"Builds repeatable ZIPs of the skill and the Codex plugin; never installs or publishes. Maintainer tooling for this repo; not part of the installed skill.","path":"scripts/package.py","use":"python3 scripts/package.py","needs":"Python 3"},{"id":"3dviz-pro-max/repo-script-showcase","name":"showcase.py","kind":"tool","job":"review","line":"Renders the 21 showcase stills, one browser at a time, resumable, inside a time budget. Maintainer tooling for this repo; not part of the installed skill.","path":"scripts/showcase.py","use":"python3 scripts/showcase.py","needs":"Python 3; Playwright with Chromium"},{"id":"3dviz-pro-max/repo-script-validate","name":"validate.py","kind":"tool","job":"review","line":"Validates the whole catalog and the public evidence with the standard library: schemas, cross-references, content hashes and proof links. Maintainer tooling for this repo; not part of the installed skill.","path":"scripts/validate.py","use":"python3 scripts/validate.py","needs":"Python 3"},{"id":"3dviz-pro-max/site","name":"Landing page (site/)","kind":"template","job":"publish","line":"A one-page React and Vite site that shows the 37 studies as cards with a hover clip and opens each runnable study in a modal, recomputing its counters from the repo at build time. A working pattern for a gallery of live 3D pieces. It bundles two fonts (Outfit, JetBrains Mono) under the SIL Open Font License and 74 short clips of the studies.","path":"site","use":"pnpm --dir examples install --frozen-lockfile && bash site/scripts/bundle-examples.sh && pnpm --dir site install --frozen-lockfile && pnpm --dir site build","needs":"Node, pnpm; react 19, tailwindcss 4, vite 7"},{"id":"3dviz-pro-max/recipe-accessible-clearance-study","name":"Accessible route clearances and turning space","kind":"three","job":"scene","line":"Place a cited turning space in a room and, separately, sweep a conservative clearance envelope, keeping the two reports distinct instead of calling every overlap a code failure. A written recipe (architecture-interiors; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/accessible-clearance-study.json","use":"python3 scripts/resolve.py recipe.accessible-clearance-study"},{"id":"3dviz-pro-max/recipe-agent-harness","name":"Agent Harness execution map","kind":"three","job":"3d","line":"Explain an authored agent loop with explicit tool and observation boundaries. A written recipe (abstract-systems-data; authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/agent-harness.json","use":"python3 scripts/resolve.py recipe.agent-harness"},{"id":"3dviz-pro-max/recipe-agv-zone-reservation","name":"Guided vehicle traffic with zone reservation","kind":"three","job":"3d","line":"Give vehicles a reservation rule that they must obtain before entering shared space, so traffic behavior has an inspectable cause. A written recipe (operations-logistics; authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/agv-zone-reservation.json","use":"python3 scripts/resolve.py recipe.agv-zone-reservation"},{"id":"3dviz-pro-max/recipe-arm-workspace-singularity","name":"Reachable workspace and singular configurations","kind":"three","job":"3d","line":"Map where an arm can reach and mark the configurations where it loses a direction of motion. A written recipe (robotics-control; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/arm-workspace-singularity.json","use":"python3 scripts/resolve.py recipe.arm-workspace-singularity"},{"id":"3dviz-pro-max/recipe-autonomous-planar-phase-portrait","name":"Autonomous planar phase portrait with time lift","kind":"three","job":"3d","line":"Compare phase trajectories, vector directions and a time-lifted solution for a bounded family of planar autonomous systems. A written recipe (calculus-fields, robotics-control; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/autonomous-planar-phase-portrait.json","use":"python3 scripts/resolve.py recipe.autonomous-planar-phase-portrait"},{"id":"3dviz-pro-max/recipe-bicycle-drivetrain-ratio","name":"Bicycle drivetrain and gear ratio","kind":"three","job":"model","line":"Connect chainring and sprocket sizes to wheel rotation through a chain that shares one linear speed. A written recipe (products-assemblies; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/bicycle-drivetrain-ratio.json","use":"python3 scripts/resolve.py recipe.bicycle-drivetrain-ratio"},{"id":"3dviz-pro-max/recipe-big-cube-wide-turns","name":"Wide turns and inner slices on larger cubes","kind":"three","job":"3d","line":"Model a larger cube where a move addresses a contiguous range of layers and center pieces carry individual identity even when they look interchangeable. A written recipe (twisty-puzzles; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/big-cube-wide-turns.json","use":"python3 scripts/resolve.py recipe.big-cube-wide-turns"},{"id":"3dviz-pro-max/recipe-binary-heap-operations","name":"Binary heap, sift operations and heapsort","kind":"three","job":"3d","line":"Show one structure in two views at once: the array indices that own the data and the tree that explains the ordering. A written recipe (algorithms-data-structures; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/binary-heap-operations.json","use":"python3 scripts/resolve.py recipe.binary-heap-operations"},{"id":"3dviz-pro-max/recipe-binomial-trial-lattice","name":"Binomial outcomes and repeated trials","kind":"three","job":"3d","line":"Connect independent binary trial paths to exact probabilities and observed counts. A written recipe (probability-statistics; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/binomial-trial-lattice.json","use":"python3 scripts/resolve.py recipe.binomial-trial-lattice"},{"id":"3dviz-pro-max/recipe-bit-vector-smt-model-proof","name":"Bit-vector SMT: model, wraparound and proof boundary","kind":"three","job":"3d","line":"Keep width, modular arithmetic, signed interpretation and solver evidence explicit. A written recipe (logic-circuits; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/bit-vector-smt-model-proof.json","use":"python3 scripts/resolve.py recipe.bit-vector-smt-model-proof"},{"id":"3dviz-pro-max/recipe-bounded-maintenance-procedure-state","name":"Bounded maintenance procedure state playback","kind":"three","job":"3d","line":"Play a supplied acyclic maintenance procedure through tasks and exclusive decisions with evidence-gated completion, while keeping planned, reported and verified states distinct. A written recipe (operations-logistics, architecture-interiors; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/bounded-maintenance-procedure-state.json","use":"python3 scripts/resolve.py recipe.bounded-maintenance-procedure-state"},{"id":"3dviz-pro-max/recipe-brachial-plexus-routing","name":"Brachial plexus nerve routing","kind":"three","job":"3d","line":"Follow named nerve branches from the typical C5 to T1 roots through trunks, divisions and cords into the arm as an explicit route graph rather than a decorative bundle. A written recipe (anatomy-structures; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits, with numeric defaults and a worked value. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/brachial-plexus-routing.json","use":"python3 scripts/resolve.py recipe.brachial-plexus-routing"},{"id":"3dviz-pro-max/recipe-breadth-first-frontier","name":"Breadth-first search and shortest edge counts","kind":"three","job":"3d","line":"Expose discovery order, the FIFO queue and shortest paths on a small unweighted graph. A written recipe (algorithms-data-structures; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/breadth-first-frontier.json","use":"python3 scripts/resolve.py recipe.breadth-first-frontier"},{"id":"3dviz-pro-max/recipe-bridge-load-path-beam-model","name":"Simply supported bridge load-path beam model","kind":"three","job":"3d","line":"Compute reactions and one section response for declared point loads on a simply supported beam without presenting the result as structural design approval. A written recipe (rigid-mechanics, architecture-interiors; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/bridge-load-path-beam-model.json","use":"python3 scripts/resolve.py recipe.bridge-load-path-beam-model"},{"id":"3dviz-pro-max/recipe-build-dependency-order","name":"Build dependency graph and topological order","kind":"three","job":"3d","line":"Show a build plan as a directed graph whose valid orders come from its structure, and make a cycle a reported failure. A written recipe (abstract-systems-data; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/build-dependency-order.json","use":"python3 scripts/resolve.py recipe.build-dependency-order"},{"id":"3dviz-pro-max/recipe-building-service-layers","name":"Building service layer coordination","kind":"three","job":"scene","line":"Inspect invented building services with layer toggles and explicit geometric clash markers. A written recipe (architecture-interiors; authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/building-service-layers.json","use":"python3 scripts/resolve.py recipe.building-service-layers"},{"id":"3dviz-pro-max/recipe-buoyancy-floating-equilibrium","name":"Buoyancy and floating equilibrium","kind":"three","job":"3d","line":"Make the displaced volume an explicit object so flotation becomes a balance the viewer can watch settle. A written recipe (soft-fluid-thermal; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/buoyancy-floating-equilibrium.json","use":"python3 scripts/resolve.py recipe.buoyancy-floating-equilibrium"},{"id":"3dviz-pro-max/recipe-burr-disassembly-order","name":"Interlocking burr and its disassembly order","kind":"three","job":"3d","line":"Design an interlocking puzzle whose only freedom at each step is a short list of legal slides, and expose that list. A written recipe (spatial-puzzles; authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/burr-disassembly-order.json","use":"python3 scripts/resolve.py recipe.burr-disassembly-order"},{"id":"3dviz-pro-max/recipe-capillary-exchange-transport","name":"Classical Starling capillary exchange diagram","kind":"three","job":"3d","line":"Build the classical two-pressure Starling teaching diagram and mark on the same scene where the revised steady-state view disagrees with it. A written recipe (physiology-biomechanics; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits, with numeric defaults and a worked value. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/capillary-exchange-transport.json","use":"python3 scripts/resolve.py recipe.capillary-exchange-transport"},{"id":"3dviz-pro-max/recipe-cardiac-cycle-valves","name":"Cardiac cycle phases and valve states","kind":"three","job":"3d","line":"Drive valve states from an explicit phase model so opening and closing follow declared pressure comparisons rather than animation timing. A written recipe (physiology-biomechanics; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits, with numeric defaults and a worked value. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/cardiac-cycle-valves.json","use":"python3 scripts/resolve.py recipe.cardiac-cycle-valves"},{"id":"3dviz-pro-max/recipe-cf-ocean-current-particle-playback","name":"CF ocean-current grid particle playback","kind":"three","job":"3d","line":"Advect educational tracers over a supplied small regular rectilinear CF lon/lat current grid using one declared frozen local east/north tangent-plane approximation, only while time and every interpolation corner remain valid. A written recipe (earth-environment, calculus-fields; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/cf-ocean-current-particle-playback.json","use":"python3 scripts/resolve.py recipe.cf-ocean-current-particle-playback"},{"id":"3dviz-pro-max/recipe-cfd-field-playback","name":"Precomputed flow field playback","kind":"three","job":"3d","line":"Play back a computed flow field as data with provenance, and refuse to let the viewer treat playback as live simulation. A written recipe (soft-fluid-thermal; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/cfd-field-playback.json","use":"python3 scripts/resolve.py recipe.cfd-field-playback"},{"id":"3dviz-pro-max/recipe-chirality-stereocenter","name":"Chirality and non-superimposable mirror images","kind":"three","job":"3d","line":"Let a viewer attempt to superimpose two mirror-image molecules and fail for a structural reason they can inspect. A written recipe (molecules-materials; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits, with numeric defaults and a worked value. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/chirality-stereocenter.json","use":"python3 scripts/resolve.py recipe.chirality-stereocenter"},{"id":"3dviz-pro-max/recipe-citygml-stable-id-scenario-diff","name":"CityGML stable-ID scenario differencer","kind":"three","job":"scene","line":"Compare a finite set of supplied CityGML-derived urban alternatives by stable feature identity, CRS, epoch and declared attribute/geometry changes, without inferring semantics from meshes or running an urban simulation. A written recipe (architecture-interiors, operations-logistics; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/citygml-stable-id-scenario-diff.json","use":"python3 scripts/resolve.py recipe.citygml-stable-id-scenario-diff"},{"id":"3dviz-pro-max/recipe-closed-lane-car-following","name":"Car-following waves on a closed single lane","kind":"three","job":"3d","line":"Simulate continuous car-following on a periodic lane and connect every vehicle's motion to its bumper gap, approaching rate and declared Intelligent Driver Model parameters. A written recipe (operations-logistics, environments-dioramas; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/closed-lane-car-following.json","use":"python3 scripts/resolve.py recipe.closed-lane-car-following"},{"id":"3dviz-pro-max/recipe-collision-momentum-lab","name":"Elastic and inelastic collisions in space","kind":"three","job":"3d","line":"Compare momentum and kinetic energy across a one-dimensional central collision so that what is conserved and what is not becomes measurable. A written recipe (rigid-mechanics; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/collision-momentum-lab.json","use":"python3 scripts/resolve.py recipe.collision-momentum-lab"},{"id":"3dviz-pro-max/recipe-commutator-conjugate-tools","name":"Commutators and conjugates as piece tools","kind":"three","job":"3d","line":"Build move sequences that touch few pieces and show why the algebraic form produces that effect. A written recipe (twisty-puzzles; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/commutator-conjugate-tools.json","use":"python3 scripts/resolve.py recipe.commutator-conjugate-tools"},{"id":"3dviz-pro-max/recipe-conic-slicing","name":"Double-cone section explorer","kind":"three","job":"3d","line":"Relate a movable plane to its intersection with a double cone. A written recipe (solid-geometry; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/conic-slicing.json","use":"python3 scripts/resolve.py recipe.conic-slicing"},{"id":"3dviz-pro-max/recipe-construction-sequence-playback","name":"Construction task dependency and building playback","kind":"three","job":"scene","line":"Link supplied construction tasks, times and finish-start dependencies to stable building-element identities, then scrub the resulting planned sequence without inventing progress or optimization. A written recipe (architecture-interiors, operations-logistics; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/construction-sequence-playback.json","use":"python3 scripts/resolve.py recipe.construction-sequence-playback"},{"id":"3dviz-pro-max/recipe-convex-hull-construction","name":"Convex hull of a point cloud","kind":"three","job":"3d","line":"Build the hull of an editable point set and keep its degenerate outcomes visible instead of hiding them. A written recipe (solid-geometry; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/convex-hull-construction.json","use":"python3 scripts/resolve.py recipe.convex-hull-construction"},{"id":"3dviz-pro-max/recipe-coupled-gears","name":"Coupled gear kinematics","kind":"three","job":"3d","line":"Drive meshing gears from a shared angular constraint with inspectable pitch circles. A written recipe (rigid-mechanics; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/coupled-gears.json","use":"python3 scripts/resolve.py recipe.coupled-gears"},{"id":"3dviz-pro-max/recipe-courtyard-house-cutaway","name":"Courtyard house cutaway","kind":"three","job":"scene","line":"Reveal a fictional courtyard dwelling while keeping room boundaries and levels legible. A written recipe (architecture-interiors; authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/courtyard-house-cutaway.json","use":"python3 scripts/resolve.py recipe.courtyard-house-cutaway"},{"id":"3dviz-pro-max/recipe-covariance-ellipsoid-axes","name":"Covariance ellipsoid and principal axes","kind":"three","job":"3d","line":"Show a point cloud together with the ellipsoid built from its covariance, keeping sample estimate and population parameter distinct. A written recipe (probability-statistics; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/covariance-ellipsoid-axes.json","use":"python3 scripts/resolve.py recipe.covariance-ellipsoid-axes"},{"id":"3dviz-pro-max/recipe-cp-tucker-tensor-component-reconstruction","name":"CP and Tucker tensor component reconstruction","kind":"three","job":"3d","line":"Reconstruct a small explicit third-order tensor from supplied CP factors or a Tucker core and factors, linking component terms, slices and residual without implying uniqueness. A written recipe (linear-algebra, abstract-systems-data; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/cp-tucker-tensor-component-reconstruction.json","use":"python3 scripts/resolve.py recipe.cp-tucker-tensor-component-reconstruction"},{"id":"3dviz-pro-max/recipe-critical-path-delay","name":"Critical path and combinational delay","kind":"three","job":"3d","line":"Make timing a property of paths through a circuit, with the longest path selected by summation rather than by appearance. A written recipe (logic-circuits; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/critical-path-delay.json","use":"python3 scripts/resolve.py recipe.critical-path-delay"},{"id":"3dviz-pro-max/recipe-cross-product","name":"Cross product orientation and area","kind":"three","job":"3d","line":"Link ordered vectors, their normal and spanned parallelogram. A written recipe (linear-algebra; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/cross-product.json","use":"python3 scripts/resolve.py recipe.cross-product"},{"id":"3dviz-pro-max/recipe-cryptographic-protocol-message-state","name":"TLS 1.3 message state: bounded server-authenticated handshake","kind":"three","job":"3d","line":"Teach a bounded TLS 1.3 message order with public metadata and explicit external-verification gates. A written recipe (abstract-systems-data; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/cryptographic-protocol-message-state.json","use":"python3 scripts/resolve.py recipe.cryptographic-protocol-message-state"},{"id":"3dviz-pro-max/recipe-cube-state-invariants","name":"Reachable cube states and their invariants","kind":"three","job":"3d","line":"Let a viewer build an impossible cube on purpose and have the model name which invariant is broken. A written recipe (twisty-puzzles; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/cube-state-invariants.json","use":"python3 scripts/resolve.py recipe.cube-state-invariants"},{"id":"3dviz-pro-max/recipe-cubic-unit-cell-accounting","name":"Cubic unit-cell atom accounting","kind":"three","job":"3d","line":"Expose shared atom fractions across repeated cubic cells. A written recipe (molecules-materials; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits, with numeric defaults and a worked value. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/cubic-unit-cell-accounting.json","use":"python3 scripts/resolve.py recipe.cubic-unit-cell-accounting"},{"id":"3dviz-pro-max/recipe-curl-circulation-loop","name":"Curl and circulation around a loop","kind":"three","job":"3d","line":"Compare a local curl component with circulation per unit area, distinguishing the finite-disk average from its shrinking-disk limit. A written recipe (calculus-fields; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/curl-circulation-loop.json","use":"python3 scripts/resolve.py recipe.curl-circulation-loop"},{"id":"3dviz-pro-max/recipe-current-loop-magnetic-field","name":"Magnetic field of a current loop","kind":"three","job":"3d","line":"Build a field around a real conductor path and keep the on-axis analytic result distinct from off-axis numerical sampling. A written recipe (waves-optics-fields; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/current-loop-magnetic-field.json","use":"python3 scripts/resolve.py recipe.current-loop-magnetic-field"},{"id":"3dviz-pro-max/recipe-daylight-shading-study","name":"Daylight and shading study over a day","kind":"three","job":"scene","line":"Drive shadows from a documented solar position algorithm and keep the difference between geometry and photometry explicit. A written recipe (architecture-interiors; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/daylight-shading-study.json","use":"python3 scripts/resolve.py recipe.daylight-shading-study"},{"id":"3dviz-pro-max/recipe-delaunay-cell-partition","name":"Delaunay tetrahedra and the empty sphere property","kind":"three","job":"3d","line":"Partition space around a point set and let the defining empty-sphere condition be tested rather than assumed. A written recipe (solid-geometry; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/delaunay-cell-partition.json","use":"python3 scripts/resolve.py recipe.delaunay-cell-partition"},{"id":"3dviz-pro-max/recipe-dental-bite-moving-hinge-illustration","name":"Dental bite and moving-hinge illustration","kind":"three","job":"3d","line":"Illustrate a supplied mandible pose sequence against a fixed skull while making translation and the limited meaning of a hinge axis explicit. A written recipe (anatomy-structures, physiology-biomechanics; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/dental-bite-moving-hinge-illustration.json","use":"python3 scripts/resolve.py recipe.dental-bite-moving-hinge-illustration"},{"id":"3dviz-pro-max/recipe-deposited-protein-binding-site-inspection","name":"Deposited protein binding-site inspection","kind":"three","job":"3d","line":"Inspect a ligand and nearby residues from a supplied authoritative deposited structure while preserving atom, assembly and model metadata. A written recipe (molecules-materials; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/deposited-protein-binding-site-inspection.json","use":"python3 scripts/resolve.py recipe.deposited-protein-binding-site-inspection"},{"id":"3dviz-pro-max/recipe-determinant-volume","name":"Determinant and parallelepiped volume","kind":"three","job":"3d","line":"Compare signed determinant with nonnegative geometric volume. A written recipe (linear-algebra; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/determinant-volume.json","use":"python3 scripts/resolve.py recipe.determinant-volume"},{"id":"3dviz-pro-max/recipe-dicom-spatial-registration-landmark-residuals","name":"DICOM registration landmark residual inspector","kind":"three","job":"3d","line":"Apply a supplied DICOM Spatial Registration matrix chain between original Frame-of-Reference UIDs and show illustrative paired-landmark residuals without computing or certifying registration accuracy. A written recipe (anatomy-structures, linear-algebra; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/dicom-spatial-registration-landmark-residuals.json","use":"python3 scripts/resolve.py recipe.dicom-spatial-registration-landmark-residuals"},{"id":"3dviz-pro-max/recipe-differential-drive-odometry","name":"Differential-drive command and odometry view","kind":"three","job":"3d","line":"Distinguish requested motion, applied wheel motion and estimated pose in a teaching mobile robot. A written recipe (robotics-control; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits, with numeric defaults and a worked value. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/differential-drive-odometry.json","use":"python3 scripts/resolve.py recipe.differential-drive-odometry"},{"id":"3dviz-pro-max/recipe-dijkstra-relaxation","name":"Dijkstra distances and edge relaxation","kind":"three","job":"3d","line":"Compare tentative distances with settled shortest distances while stepping edge relaxations. A written recipe (algorithms-data-structures; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/dijkstra-relaxation.json","use":"python3 scripts/resolve.py recipe.dijkstra-relaxation"},{"id":"3dviz-pro-max/recipe-direct-turn-cube","name":"Direct-manipulation cube turns","kind":"three","job":"3d","line":"Translate face gestures into legal discrete moves while separating camera orbit. A written recipe (twisty-puzzles; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/direct-turn-cube.json","use":"python3 scripts/resolve.py recipe.direct-turn-cube"},{"id":"3dviz-pro-max/recipe-directional-derivative-surface","name":"Directional derivative on a quadratic surface","kind":"three","job":"3d","line":"Rotate a direction on a height field and compare the measured slope with the gradient dot product. A written recipe (calculus-fields; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/directional-derivative-surface.json","use":"python3 scripts/resolve.py recipe.directional-derivative-surface"},{"id":"3dviz-pro-max/recipe-divergence-flux-box","name":"Divergence and outward flux through a box","kind":"three","job":"3d","line":"Compare face-by-face flux with the volume integral of divergence for a linear field. A written recipe (calculus-fields; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/divergence-flux-box.json","use":"python3 scripts/resolve.py recipe.divergence-flux-box"},{"id":"3dviz-pro-max/recipe-divergent-ridge-crust-age","name":"Divergent ridge and crust-age bands","kind":"three","job":"3d","line":"Expose the distinction between prescribed plate separation, newly formed crust and a computed geodynamic solution. A written recipe (earth-environment; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/divergent-ridge-crust-age.json","use":"python3 scripts/resolve.py recipe.divergent-ridge-crust-age"},{"id":"3dviz-pro-max/recipe-double-integral-columns","name":"Signed double integral as a column sum","kind":"three","job":"3d","line":"Partition a rectangular domain into signed columns and compare numerical quadrature with an analytic integral. A written recipe (calculus-fields; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/double-integral-columns.json","use":"python3 scripts/resolve.py recipe.double-integral-columns"},{"id":"3dviz-pro-max/recipe-earth-tilt-seasons","name":"Axial tilt and seasonal sunlight","kind":"three","job":"3d","line":"Compare seasonal illumination on a tilted globe without confusing orbital distance with the cause of seasons. A written recipe (earth-environment; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/earth-tilt-seasons.json","use":"python3 scripts/resolve.py recipe.earth-tilt-seasons"},{"id":"3dviz-pro-max/recipe-eclipse-shadow-cones","name":"Eclipse shadow cones and node alignment","kind":"three","job":"3d","line":"Build the shadow as real cones between finite bodies so partial, total and annular conditions follow from which cone contains the observer. A written recipe (astronomy-space; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits, with numeric defaults and a worked value. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/eclipse-shadow-cones.json","use":"python3 scripts/resolve.py recipe.eclipse-shadow-cones"},{"id":"3dviz-pro-max/recipe-eigenvector-invariant-directions","name":"Eigenvectors as invariant directions","kind":"three","job":"3d","line":"Sweep a direction through space and stop where the mapped vector stays on its own line, with the scale factor read from the same event. A written recipe (linear-algebra; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/eigenvector-invariant-directions.json","use":"python3 scripts/resolve.py recipe.eigenvector-invariant-directions"},{"id":"3dviz-pro-max/recipe-embedding-projection","name":"Embedding projection inspector","kind":"three","job":"3d","line":"Explore a projection while retaining access to original vector relationships. A written recipe (abstract-systems-data; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/embedding-projection.json","use":"python3 scripts/resolve.py recipe.embedding-projection"},{"id":"3dviz-pro-max/recipe-enhanced-dicom-frame-dimension-inspector","name":"Enhanced DICOM acquisition-frame inspector","kind":"three","job":"3d","line":"Inspect a supplied Enhanced CT object through shared/per-frame functional groups and dimension-index presentation while preserving original one-based frame identity. A written recipe (anatomy-structures, abstract-systems-data; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/enhanced-dicom-frame-dimension-inspector.json","use":"python3 scripts/resolve.py recipe.enhanced-dicom-frame-dimension-inspector"},{"id":"3dviz-pro-max/recipe-exact-cover-packing","name":"Exact cover packing with a real search","kind":"three","job":"3d","line":"Keep the search honest: a packing scene either runs a real backtracking search or replays a recorded one, and says which. A written recipe (spatial-puzzles; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/exact-cover-packing.json","use":"python3 scripts/resolve.py recipe.exact-cover-packing"},{"id":"3dviz-pro-max/recipe-expression-attention-rig","name":"Expression rig with attention and gaze","kind":"three","job":"rig","line":"Give a character a small, well-chosen set of expression controls and let attention drive where those controls are aimed. A written recipe (characters-motion-art; authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/expression-attention-rig.json","use":"python3 scripts/resolve.py recipe.expression-attention-rig"},{"id":"3dviz-pro-max/recipe-fantasy-village-diorama","name":"Fantasy village diorama","kind":"three","job":"scene","line":"Compose a small invented settlement around a memorable landmark, readable paths, and contrasting building silhouettes. A written recipe (environments-dioramas; authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/fantasy-village-diorama.json","use":"python3 scripts/resolve.py recipe.fantasy-village-diorama"},{"id":"3dviz-pro-max/recipe-fft-finite-window-spectrum-reconstruction","name":"Finite-window FFT spectrum and inverse reconstruction","kind":"three","job":"3d","line":"Compare one finite sampled signal under rectangular and tapered windows, reconstruct the exact windowed samples by inverse DFT, and distinguish bin spacing from true frequency resolution. A written recipe (linear-algebra, calculus-fields; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/fft-finite-window-spectrum-reconstruction.json","use":"python3 scripts/resolve.py recipe.fft-finite-window-spectrum-reconstruction"},{"id":"3dviz-pro-max/recipe-finite-egress-network-capacity-playback","name":"Finite egress-network capacity playback","kind":"three","job":"scene","line":"Move a finite supplied occupant count through a directed route network with integer travel steps, per-step arc capacities and a declared blocked-edge event, as an educational capacity scenario rather than an evacuation-safety result. A written recipe (architecture-interiors, operations-logistics; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/finite-egress-network-capacity-playback.json","use":"python3 scripts/resolve.py recipe.finite-egress-network-capacity-playback"},{"id":"3dviz-pro-max/recipe-finite-state-machine","name":"Clocked finite-state machine explorer","kind":"three","job":"3d","line":"Separate present state, next state and committed clock transitions. A written recipe (logic-circuits; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/finite-state-machine.json","use":"python3 scripts/resolve.py recipe.finite-state-machine"},{"id":"3dviz-pro-max/recipe-fisher-reaction-diffusion-front","name":"Bounded Fisher reaction-diffusion front","kind":"three","job":"3d","line":"Simulate the one-dimensional Fisher equation on a finite interval with a declared zero-flux stencil and conservative explicit-step positivity guard, as an idealized historical model rather than a forecast. A written recipe (earth-environment, calculus-fields; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/fisher-reaction-diffusion-front.json","use":"python3 scripts/resolve.py recipe.fisher-reaction-diffusion-front"},{"id":"3dviz-pro-max/recipe-flat-pack-assembly-sequence","name":"Flat-pack furniture assembly sequence","kind":"three","job":"model","line":"Turn an assembly into an ordered, checkable sequence where each step consumes real parts from a visible inventory. A written recipe (products-assemblies; authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/flat-pack-assembly-sequence.json","use":"python3 scripts/resolve.py recipe.flat-pack-assembly-sequence"},{"id":"3dviz-pro-max/recipe-folding-desk-lamp","name":"Folding desk lamp articulation","kind":"three","job":"model","line":"Explore a designed lamp by moving its hinges within a declared motion envelope. A written recipe (products-assemblies; authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/folding-desk-lamp.json","use":"python3 scripts/resolve.py recipe.folding-desk-lamp"},{"id":"3dviz-pro-max/recipe-forced-damped-room-response","name":"Forced damped rectangular-room modal response","kind":"three","job":"3d","line":"Drive a finite set of analytic rectangular-room modes with declared modal mass, damping and coupling rather than inferring loss from wall appearance. A written recipe (waves-optics-fields, architecture-interiors; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/forced-damped-room-response.json","use":"python3 scripts/resolve.py recipe.forced-damped-room-response"},{"id":"3dviz-pro-max/recipe-fourier-harmonic-synthesis","name":"Fourier harmonic synthesis with complex phasors","kind":"three","job":"3d","line":"Connect a finite bank of odd harmonics to a square-wave approximation and expose truncation near jumps. A written recipe (waves-optics-fields, calculus-fields; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/fourier-harmonic-synthesis.json","use":"python3 scripts/resolve.py recipe.fourier-harmonic-synthesis"},{"id":"3dviz-pro-max/recipe-full-adder","name":"One-bit full adder","kind":"three","job":"3d","line":"Connect sum and carry outputs to all three input bits. A written recipe (logic-circuits; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/full-adder.json","use":"python3 scripts/resolve.py recipe.full-adder"},{"id":"3dviz-pro-max/recipe-garden-creature-patrol","name":"Garden creature route and gait","kind":"three","job":"rig","line":"Make a small fictional quadruped travel a route with readable foot placement and stopping. A written recipe (characters-motion-art; authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/garden-creature-patrol.json","use":"python3 scripts/resolve.py recipe.garden-creature-patrol"},{"id":"3dviz-pro-max/recipe-general-soft-body-boundary-test","name":"XPBD soft-body boundary fixture","kind":"three","job":"3d","line":"Exercise one compliant particle mesh with pinned boundaries, explicit timestep/substeps/iterations and residuals rather than treating visual softness as a material measurement. A written recipe (soft-fluid-thermal, rigid-mechanics; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/general-soft-body-boundary-test.json","use":"python3 scripts/resolve.py recipe.general-soft-body-boundary-test"},{"id":"3dviz-pro-max/recipe-guided-layer-method-tutorial","name":"Reversible guided layer-method tutorial","kind":"three","job":"3d","line":"Turn a declared beginner layer sequence into inspectable goal predicates, legal move demonstrations, learner commits, hints and exact step-level undo rather than an irreversible animation playlist. A written recipe (twisty-puzzles; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/guided-layer-method-tutorial.json","use":"python3 scripts/resolve.py recipe.guided-layer-method-tutorial"},{"id":"3dviz-pro-max/recipe-gyroscope-precession","name":"Gyroscopic precession and angular momentum","kind":"three","job":"3d","line":"Show a torque changing the direction of angular momentum rather than speeding the spin, and keep the fast-spin assumption visible. A written recipe (rigid-mechanics; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits, with numeric defaults and a worked value. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/gyroscope-precession.json","use":"python3 scripts/resolve.py recipe.gyroscope-precession"},{"id":"3dviz-pro-max/recipe-hanoi-optimal-bound","name":"Towers of Hanoi and its optimal move bound","kind":"three","job":"3d","line":"Let a viewer play the puzzle while the known minimum move count stays visible as a target rather than a decoration. A written recipe (spatial-puzzles; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/hanoi-optimal-bound.json","use":"python3 scripts/resolve.py recipe.hanoi-optimal-bound"},{"id":"3dviz-pro-max/recipe-heart-cutaway","name":"Heart chamber cutaway","kind":"three","job":"3d","line":"Reveal four chambers without confusing presentation layers with tissue motion. A written recipe (anatomy-structures; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits, with numeric defaults and a worked value. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/heart-cutaway.json","use":"python3 scripts/resolve.py recipe.heart-cutaway"},{"id":"3dviz-pro-max/recipe-heat-rod-decay","name":"Heat diffusion along a rod with fixed end temperatures","kind":"three","job":"3d","line":"Watch an exact temperature mode decay while the rod itself stays geometrically fixed. A written recipe (soft-fluid-thermal; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/heat-rod-decay.json","use":"python3 scripts/resolve.py recipe.heat-rod-decay"},{"id":"3dviz-pro-max/recipe-hepatic-portal-route","name":"Hepatic portal blood route","kind":"three","job":"3d","line":"Show a named venous route that passes through two capillary beds before rejoining the systemic return. A written recipe (anatomy-structures; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits, with numeric defaults and a worked value. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/hepatic-portal-route.json","use":"python3 scripts/resolve.py recipe.hepatic-portal-route"},{"id":"3dviz-pro-max/recipe-hessian-critical-points","name":"Critical points and the second derivative test","kind":"three","job":"3d","line":"Classify stationary points on a surface from the discriminant, and show the inconclusive case as a real outcome. A written recipe (calculus-fields; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/hessian-critical-points.json","use":"python3 scripts/resolve.py recipe.hessian-critical-points"},{"id":"3dviz-pro-max/recipe-historical-diorama","name":"Historical diorama with evidence layers","kind":"three","job":"scene","line":"Organize a site reconstruction so documented remains and interpretive additions can be inspected separately. A written recipe (environments-dioramas; authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/historical-diorama.json","use":"python3 scripts/resolve.py recipe.historical-diorama"},{"id":"3dviz-pro-max/recipe-hydrostatic-depth-pressure","name":"Hydrostatic pressure at equal depth","kind":"three","job":"3d","line":"Compare pressure probes at the same depth in differently shaped stationary containers. A written recipe (soft-fluid-thermal; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/hydrostatic-depth-pressure.json","use":"python3 scripts/resolve.py recipe.hydrostatic-depth-pressure"},{"id":"3dviz-pro-max/recipe-imported-cube-state-solver-verification","name":"Imported 3×3 state and solver-result verification","kind":"three","job":"3d","line":"Parse an imported 3×3 state independently of local move history, validate inventory and reachability, call a versioned solver adapter, then replay and verify its returned moves against the imported state. A written recipe (twisty-puzzles, algorithms-data-structures; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/imported-cube-state-solver-verification.json","use":"python3 scripts/resolve.py recipe.imported-cube-state-solver-verification"},{"id":"3dviz-pro-max/recipe-interference-diffraction-pattern","name":"Two-slit interference and single-slit diffraction","kind":"three","job":"3d","line":"Keep slit separation and slit width as separate controls so the fringe pattern and its envelope have separate causes. A written recipe (waves-optics-fields; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/interference-diffraction-pattern.json","use":"python3 scripts/resolve.py recipe.interference-diffraction-pattern"},{"id":"3dviz-pro-max/recipe-inverse-kinematics-target","name":"Inverse-kinematics target and residual","kind":"three","job":"3d","line":"Make numerical target solving visible, including residuals and non-convergence. A written recipe (robotics-control; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/inverse-kinematics-target.json","use":"python3 scripts/resolve.py recipe.inverse-kinematics-target"},{"id":"3dviz-pro-max/recipe-irrigation-finite-scenario-envelope","name":"Finite irrigation scenario-envelope comparison","kind":"three","job":"3d","line":"Run the existing bounded root-zone budget over a finite supplied set of provenance-labeled scenarios under one shared forcing schedule, then display their daywise envelope without treating it as a probability distribution or confidence interval. A written recipe (earth-environment, environments-dioramas; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/irrigation-finite-scenario-envelope.json","use":"python3 scripts/resolve.py recipe.irrigation-finite-scenario-envelope"},{"id":"3dviz-pro-max/recipe-isotropic-seismic-plane-waves","name":"P and S plane waves in an isotropic elastic solid","kind":"three","job":"3d","line":"Compare homogeneous isotropic P and S plane waves through particle displacement, propagation direction and modulus-dependent speed in a finite three-dimensional inspection window. A written recipe (earth-environment, waves-optics-fields; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/isotropic-seismic-plane-waves.json","use":"python3 scripts/resolve.py recipe.isotropic-seismic-plane-waves"},{"id":"3dviz-pro-max/recipe-job-shop-schedule-playback","name":"Job shop schedule and solver boundary","kind":"three","job":"3d","line":"Play back a schedule that a solver produced, and keep the boundary between solving and animating visible. A written recipe (operations-logistics; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/job-shop-schedule-playback.json","use":"python3 scripts/resolve.py recipe.job-shop-schedule-playback"},{"id":"3dviz-pro-max/recipe-joint-pid-control","name":"PID joint control with saturation","kind":"three","job":"3d","line":"Show a controller responding to error, and let integral action and torque limits change the outcome visibly. A written recipe (robotics-control; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/joint-pid-control.json","use":"python3 scripts/resolve.py recipe.joint-pid-control"},{"id":"3dviz-pro-max/recipe-joint-trajectory-time-scaling","name":"Path, time scaling and joint limits","kind":"three","job":"3d","line":"Separate the geometric path from the schedule along it, so speed limits change timing without changing the path. A written recipe (robotics-control; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/joint-trajectory-time-scaling.json","use":"python3 scripts/resolve.py recipe.joint-trajectory-time-scaling"},{"id":"3dviz-pro-max/recipe-karst-cave-network","name":"Karst cave network with vertical connectivity","kind":"three","job":"scene","line":"Compose an underground world where the interesting decisions are vertical: which chamber connects to which, and by what route. A written recipe (environments-dioramas; authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/karst-cave-network.json","use":"python3 scripts/resolve.py recipe.karst-cave-network"},{"id":"3dviz-pro-max/recipe-kepler-equal-area-orbit","name":"Kepler ellipse with equal-time swept areas","kind":"three","job":"3d","line":"Advance a body nonuniformly around an ellipse and compare sectors swept in equal time intervals. A written recipe (astronomy-space; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/kepler-equal-area-orbit.json","use":"python3 scripts/resolve.py recipe.kepler-equal-area-orbit"},{"id":"3dviz-pro-max/recipe-kinetic-typography-stage","name":"Kinetic typography stage with readable alternatives","kind":"three","job":"rig","line":"Animate authored words and phrases in 3D while preserving reading order, pause control, captions and a static text representation. A written recipe (characters-motion-art, environments-dioramas; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/kinetic-typography-stage.json","use":"python3 scripts/resolve.py recipe.kinetic-typography-stage"},{"id":"3dviz-pro-max/recipe-kmp-prefix-pattern-dfa","name":"KMP pattern DFA: prefix recovery on mismatch","kind":"three","job":"3d","line":"Derive transition behavior from a concrete pattern and explain why a mismatch can preserve a partial match. A written recipe (algorithms-data-structures; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/kmp-prefix-pattern-dfa.json","use":"python3 scripts/resolve.py recipe.kmp-prefix-pattern-dfa"},{"id":"3dviz-pro-max/recipe-knee-layer-peel","name":"Knee structures with layer peel","kind":"three","job":"3d","line":"Inspect the joint interior through reversible layer visibility. A written recipe (anatomy-structures; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits, with numeric defaults and a worked value. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/knee-layer-peel.json","use":"python3 scripts/resolve.py recipe.knee-layer-peel"},{"id":"3dviz-pro-max/recipe-lantern-keeper-puppet","name":"Lantern keeper puppet performance","kind":"three","job":"rig","line":"Stage a readable miniature greeting with distinct anticipation, gesture and settle poses. A written recipe (characters-motion-art; authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/lantern-keeper-puppet.json","use":"python3 scripts/resolve.py recipe.lantern-keeper-puppet"},{"id":"3dviz-pro-max/recipe-layered-atmosphere-absorption-ray","name":"Layered atmosphere absorption-only chord","kind":"three","job":"3d","line":"Integrate a fixed straight chord through concentric piecewise-homogeneous absorbing shells and accumulate optical depth with Beer–Lambert attenuation, excluding refraction, scattering and weather. A written recipe (earth-environment, waves-optics-fields; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/layered-atmosphere-absorption-ray.json","use":"python3 scripts/resolve.py recipe.layered-atmosphere-absorption-ray"},{"id":"3dviz-pro-max/recipe-layered-attenuating-seismic-rays","name":"Flat layered attenuating seismic rays","kind":"three","job":"3d","line":"Trace one declared P or S geometric ray through flat constant-velocity layers while keeping travel time, interface refraction and phenomenological Q_x attenuation explicit. A written recipe (earth-environment, waves-optics-fields; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/layered-attenuating-seismic-rays.json","use":"python3 scripts/resolve.py recipe.layered-attenuating-seismic-rays"},{"id":"3dviz-pro-max/recipe-layered-maze-navigation","name":"Layered maze route puzzle","kind":"three","job":"3d","line":"Navigate a designed stacked maze while retaining an exact cell-and-link path history. A written recipe (spatial-puzzles; authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/layered-maze-navigation.json","use":"python3 scripts/resolve.py recipe.layered-maze-navigation"},{"id":"3dviz-pro-max/recipe-linear-transformation-3d","name":"Linear transformation in three dimensions","kind":"three","job":"3d","line":"Connect a real 3 by 3 matrix to transformed basis arrows, vectors, and a reference shape using one shared mapping. A written recipe (linear-algebra; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/linear-transformation-3d.json","use":"python3 scripts/resolve.py recipe.linear-transformation-3d"},{"id":"3dviz-pro-max/recipe-loading-dock-resource-board","name":"Loading dock resource scheduling","kind":"three","job":"3d","line":"Show contention for invented dock resources with inspectable event timing. A written recipe (operations-logistics; authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/loading-dock-resource-board.json","use":"python3 scripts/resolve.py recipe.loading-dock-resource-board"},{"id":"3dviz-pro-max/recipe-logic-gates","name":"Boolean gate workbench","kind":"three","job":"3d","line":"Make a combinational circuit explain its output for each input combination. A written recipe (logic-circuits; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/logic-gates.json","use":"python3 scripts/resolve.py recipe.logic-gates"},{"id":"3dviz-pro-max/recipe-mandelbrot-escape-orbit","name":"Mandelbrot escape-time map and iteration orbit","kind":"three","job":"3d","line":"Classify sampled parameters by detected escape and show unresolved finite-budget samples honestly. A written recipe (calculus-fields, abstract-systems-data; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/mandelbrot-escape-orbit.json","use":"python3 scripts/resolve.py recipe.mandelbrot-escape-orbit"},{"id":"3dviz-pro-max/recipe-map-projection-frames","name":"Geographic and projected coordinate frames","kind":"three","job":"3d","line":"Show the globe and its projected plane at once so distortion becomes something measured rather than described. A written recipe (earth-environment; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/map-projection-frames.json","use":"python3 scripts/resolve.py recipe.map-projection-frames"},{"id":"3dviz-pro-max/recipe-markov-chain-convergence","name":"Markov chain distribution and convergence","kind":"three","job":"3d","line":"Separate a single random walker from the distribution over states, and compare convergence or oscillation under a declared transition matrix and initial distribution. A written recipe (probability-statistics; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/markov-chain-convergence.json","use":"python3 scripts/resolve.py recipe.markov-chain-convergence"},{"id":"3dviz-pro-max/recipe-mass-spring-cloth-contract","name":"Mass-spring cloth and its solver contract","kind":"three","job":"3d","line":"Treat cloth as a solver with declared parameters: what is integrated, at what step, and what makes it explode. A written recipe (soft-fluid-thermal; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/mass-spring-cloth-contract.json","use":"python3 scripts/resolve.py recipe.mass-spring-cloth-contract"},{"id":"3dviz-pro-max/recipe-memory-allocation-fragmentation-trace","name":"Memory allocation: one first-fit fragmentation trace","kind":"three","job":"3d","line":"Replay one address-ordered heap so allocation failure, internal waste and external holes remain distinct. A written recipe (algorithms-data-structures; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/memory-allocation-fragmentation-trace.json","use":"python3 scripts/resolve.py recipe.memory-allocation-fragmentation-trace"},{"id":"3dviz-pro-max/recipe-mesh-orientability-check","name":"Manifoldness, orientation and mesh validity","kind":"three","job":"3d","line":"Make mesh validity inspectable: combinatorial manifoldness, consistent orientation and geometric self-intersection are three different questions. A written recipe (topology-symmetry; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/mesh-orientability-check.json","use":"python3 scripts/resolve.py recipe.mesh-orientability-check"},{"id":"3dviz-pro-max/recipe-minkowski-clearance","name":"Minkowski sum and clearance envelopes","kind":"three","job":"3d","line":"Turn a clearance question into a solid: grow an obstacle by a moving part so the answer becomes a containment test. A written recipe (solid-geometry; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/minkowski-clearance.json","use":"python3 scripts/resolve.py recipe.minkowski-clearance"},{"id":"3dviz-pro-max/recipe-mobius-orientation-trace","name":"A local orientation around a Moebius band","kind":"three","job":"3d","line":"Follow a local frame around a half-twisted ribbon and inspect the reversed seam identification. A written recipe (topology-symmetry; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/mobius-orientation-trace.json","use":"python3 scripts/resolve.py recipe.mobius-orientation-trace"},{"id":"3dviz-pro-max/recipe-modular-camera-rig","name":"Modular camera rig compatibility","kind":"three","job":"model","line":"Create an invented accessory rig with explicit slot rules and reversible changes. A written recipe (products-assemblies; authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/modular-camera-rig.json","use":"python3 scripts/resolve.py recipe.modular-camera-rig"},{"id":"3dviz-pro-max/recipe-molecular-shape-comparison","name":"Molecular shape and electron-pair geometry","kind":"three","job":"3d","line":"Contrast methane and water while distinguishing atoms from electron-pair guides. A written recipe (molecules-materials; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits, with numeric defaults and a worked value. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/molecular-shape-comparison.json","use":"python3 scripts/resolve.py recipe.molecular-shape-comparison"},{"id":"3dviz-pro-max/recipe-monte-carlo-volume","name":"Monte Carlo volume estimate with an interval","kind":"three","job":"3d","line":"Estimate a volume by sampling a bounding box and keep the uncertainty attached to every reported number. A written recipe (probability-statistics; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/monte-carlo-volume.json","use":"python3 scripts/resolve.py recipe.monte-carlo-volume"},{"id":"3dviz-pro-max/recipe-moon-phase-observer","name":"Moon phases from an observer viewpoint","kind":"three","job":"3d","line":"Link an external Sun-Earth-Moon diagram with the lunar disk seen by an Earth observer. A written recipe (astronomy-space; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/moon-phase-observer.json","use":"python3 scripts/resolve.py recipe.moon-phase-observer"},{"id":"3dviz-pro-max/recipe-moulded-enclosure-draft","name":"Moulded enclosure with draft, ribs and bosses","kind":"three","job":"model","line":"Model a plastic housing whose features carry the reasons they exist: pull direction, draft, wall thickness and stiffening. A written recipe (products-assemblies; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/moulded-enclosure-draft.json","use":"python3 scripts/resolve.py recipe.moulded-enclosure-draft"},{"id":"3dviz-pro-max/recipe-multi-head-attention-comparison","name":"Multi-head attention comparison without head averaging","kind":"three","job":"3d","line":"Compare two to eight supplied attention heads from their separate projections through concatenation and the output projection while retaining each head identity. A written recipe (abstract-systems-data, linear-algebra; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/multi-head-attention-comparison.json","use":"python3 scripts/resolve.py recipe.multi-head-attention-comparison"},{"id":"3dviz-pro-max/recipe-musculoskeletal-lever","name":"Bone, joint and muscle as a lever system","kind":"three","job":"3d","line":"Expose effort, fulcrum and load geometry on a limb so a moment arm becomes a measurable distance rather than an illustration. A written recipe (physiology-biomechanics; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits, with numeric defaults and a worked value. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/musculoskeletal-lever.json","use":"python3 scripts/resolve.py recipe.musculoskeletal-lever"},{"id":"3dviz-pro-max/recipe-museum-route-object-inspection","name":"Accessible museum route and object inspection","kind":"three","job":"scene","line":"Build a navigable gallery whose route, landmarks and exhibit inspection stay connected, with equivalent controls for essential spatial actions and venue-specific clearance assumptions kept explicit. A written recipe (environments-dioramas, architecture-interiors; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/museum-route-object-inspection.json","use":"python3 scripts/resolve.py recipe.museum-route-object-inspection"},{"id":"3dviz-pro-max/recipe-museum-visitor-evaluation-playback","name":"Museum visitor evaluation event playback","kind":"three","job":"rig","line":"Replay supplied or synthetic route and object-inspection events with provenance and missing-data states, without fabricating visitors or inferring causal behavior. A written recipe (characters-motion-art, environments-dioramas; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/museum-visitor-evaluation-playback.json","use":"python3 scripts/resolve.py recipe.museum-visitor-evaluation-playback"},{"id":"3dviz-pro-max/recipe-music-structure-spatial-mapping","name":"Music structure mapped into a spatial scene","kind":"three","job":"rig","line":"Map supplied musical events and sections to authored spatial parameters while keeping timing data, audio playback and visual interpretation separate. A written recipe (characters-motion-art, environments-dioramas; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/music-structure-spatial-mapping.json","use":"python3 scripts/resolve.py recipe.music-structure-spatial-mapping"},{"id":"3dviz-pro-max/recipe-natural-deduction-scope-tree","name":"Natural deduction: proof trees and assumption scope","kind":"three","job":"3d","line":"Inspect why each inference is licensed and which assumptions remain open. A written recipe (logic-circuits; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/natural-deduction-scope-tree.json","use":"python3 scripts/resolve.py recipe.natural-deduction-scope-tree"},{"id":"3dviz-pro-max/recipe-newton-cubic-root-basin-inspector","name":"Newton basins for z cubed minus one","kind":"three","job":"3d","line":"Iterate Newton’s rule for f(z)=z^3-1 on a finite complex grid, classify only tolerance-confirmed roots, and lift one selected orbit without mistaking iteration count for time. A written recipe (calculus-fields, topology-symmetry; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/newton-cubic-root-basin-inspector.json","use":"python3 scripts/resolve.py recipe.newton-cubic-root-basin-inspector"},{"id":"3dviz-pro-max/recipe-night-market-street","name":"Night market street with layered light","kind":"three","job":"scene","line":"Build a dense street where the lighting is made of many small owned sources and the crowd flows along readable lanes. A written recipe (environments-dioramas; authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/night-market-street.json","use":"python3 scripts/resolve.py recipe.night-market-street"},{"id":"3dviz-pro-max/recipe-normal-density-window","name":"Normal density and interval probability","kind":"three","job":"3d","line":"Move interval boundaries under a normal curve while separating density height from probability area. A written recipe (probability-statistics; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/normal-density-window.json","use":"python3 scripts/resolve.py recipe.normal-density-window"},{"id":"3dviz-pro-max/recipe-nozzle-continuity","name":"Flow rate through a narrowing conduit","kind":"three","job":"3d","line":"Compare cross-sectional average speeds while a fixed volume flow passes through different pipe areas. A written recipe (soft-fluid-thermal; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/nozzle-continuity.json","use":"python3 scripts/resolve.py recipe.nozzle-continuity"},{"id":"3dviz-pro-max/recipe-observer-frame-constellation-playback","name":"Observer-frame constellation and horizon playback","kind":"three","job":"3d","line":"Transform supplied catalog directions and constellation line identities into an observer horizon frame at declared site and times, retaining catalog epoch and unavailable proper-motion fields. A written recipe (astronomy-space; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/observer-frame-constellation-playback.json","use":"python3 scripts/resolve.py recipe.observer-frame-constellation-playback"},{"id":"3dviz-pro-max/recipe-open-signal-queue-network","name":"Open-boundary signal queue playback","kind":"three","job":"3d","line":"Compare finite supplied signal plans on an open movement network with explicit arrivals, routes, storage and saturation-service inputs, without reusing closed-lane car-following physics. A written recipe (operations-logistics; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/open-signal-queue-network.json","use":"python3 scripts/resolve.py recipe.open-signal-queue-network"},{"id":"3dviz-pro-max/recipe-orbital-elements-explorer","name":"Orbital elements and orbit shape","kind":"three","job":"3d","line":"Give each defined geometric orbital element a control, with explicit circular and equatorial conventions for undefined elements. A written recipe (astronomy-space; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/orbital-elements-explorer.json","use":"python3 scripts/resolve.py recipe.orbital-elements-explorer"},{"id":"3dviz-pro-max/recipe-orbital-isosurface-phase-probability","name":"Orbital isosurfaces: phase versus probability","kind":"three","job":"3d","line":"Compare signed orbital-amplitude contours with the non-negative squared amplitude of one supplied, identified one-particle orbital grid. A written recipe (molecules-materials, waves-optics-fields; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/orbital-isosurface-phase-probability.json","use":"python3 scripts/resolve.py recipe.orbital-isosurface-phase-probability"},{"id":"3dviz-pro-max/recipe-orbital-reference-frames","name":"Reference frames and time for orbital scenes","kind":"three","job":"3d","line":"Make the frame an explicit object: the same trajectory drawn in an inertial and a rotating frame looks completely different, and both are correct. A written recipe (astronomy-space; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/orbital-reference-frames.json","use":"python3 scripts/resolve.py recipe.orbital-reference-frames"},{"id":"3dviz-pro-max/recipe-orthogonal-projection-residual","name":"Orthogonal projection and the residual vector","kind":"three","job":"3d","line":"Make the residual the visible subject: the shortest connection from a point to a subspace is perpendicular to it. A written recipe (linear-algebra; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/orthogonal-projection-residual.json","use":"python3 scripts/resolve.py recipe.orthogonal-projection-residual"},{"id":"3dviz-pro-max/recipe-pallet-load-build","name":"Pallet build with stability rules","kind":"three","job":"3d","line":"Build a load where each placement is checked against authored stacking rules, so a pallet is a validated structure rather than a pile. A written recipe (operations-logistics; authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/pallet-load-build.json","use":"python3 scripts/resolve.py recipe.pallet-load-build"},{"id":"3dviz-pro-max/recipe-parcel-sorter-events","name":"Parcel sorter event playback","kind":"three","job":"3d","line":"Follow parcels through an invented sorter whose routing decisions and queues are inspectable. A written recipe (operations-logistics; authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/parcel-sorter-events.json","use":"python3 scripts/resolve.py recipe.parcel-sorter-events"},{"id":"3dviz-pro-max/recipe-periodic-trajectory-temporal-unwrapping","name":"Periodic trajectory: temporal unwrapping","kind":"three","job":"3d","line":"Separate wrapped cell images from one conditionally reconstructed continuous path in a fixed orthorhombic cell. A written recipe (molecules-materials; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/periodic-trajectory-temporal-unwrapping.json","use":"python3 scripts/resolve.py recipe.periodic-trajectory-temporal-unwrapping"},{"id":"3dviz-pro-max/recipe-permutation-cycles","name":"Piece permutation cycle explorer","kind":"three","job":"3d","line":"Show where pieces move without mistaking position cycles for complete puzzle state. A written recipe (twisty-puzzles; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/permutation-cycles.json","use":"python3 scripts/resolve.py recipe.permutation-cycles"},{"id":"3dviz-pro-max/recipe-petri-net-weighted-firing","name":"Petri nets: weighted firing and markings","kind":"three","job":"3d","line":"Make enabling, conflict and marking updates visible without confusing moving beads with tokens in transit. A written recipe (abstract-systems-data; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/petri-net-weighted-firing.json","use":"python3 scripts/resolve.py recipe.petri-net-weighted-firing"},{"id":"3dviz-pro-max/recipe-pipeline-throughput","name":"Pipelining, latency and throughput","kind":"three","job":"3d","line":"Separate how long one item takes from how often items finish, and tie both to the slowest stage. A written recipe (logic-circuits; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/pipeline-throughput.json","use":"python3 scripts/resolve.py recipe.pipeline-throughput"},{"id":"3dviz-pro-max/recipe-planar-refraction-ray","name":"Refraction at a planar interface","kind":"three","job":"3d","line":"Change the incident angle and indices while measuring both rays from the same surface normal. A written recipe (waves-optics-fields; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/planar-refraction-ray.json","use":"python3 scripts/resolve.py recipe.planar-refraction-ray"},{"id":"3dviz-pro-max/recipe-point-charge-field-superposition","name":"Electric field from two stationary charges","kind":"three","job":"3d","line":"Add two point-charge field contributions and distinguish direction from magnitude near singularities. A written recipe (waves-optics-fields; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/point-charge-field-superposition.json","use":"python3 scripts/resolve.py recipe.point-charge-field-superposition"},{"id":"3dviz-pro-max/recipe-polarization-malus","name":"Polarization and Malus law","kind":"three","job":"3d","line":"Track a transmission axis in three dimensions and derive intensity from the angle between axes rather than from an artistic dimming. A written recipe (waves-optics-fields; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/polarization-malus.json","use":"python3 scripts/resolve.py recipe.polarization-malus"},{"id":"3dviz-pro-max/recipe-polycrystal-slip-planes","name":"Polycrystalline grains and slip planes","kind":"three","job":"3d","line":"Show a polycrystal as differently oriented lattice domains and make slip planes a property of orientation rather than a texture. A written recipe (molecules-materials; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits, with numeric defaults and a worked value. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/polycrystal-slip-planes.json","use":"python3 scripts/resolve.py recipe.polycrystal-slip-planes"},{"id":"3dviz-pro-max/recipe-polyhedron-net","name":"Polyhedron net folding","kind":"three","job":"3d","line":"Keep face identity and shared edges visible while unfolding a solid. A written recipe (solid-geometry; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/polyhedron-net.json","use":"python3 scripts/resolve.py recipe.polyhedron-net"},{"id":"3dviz-pro-max/recipe-portable-speaker-exploded","name":"Portable speaker exploded assembly","kind":"three","job":"model","line":"Explain the authored part hierarchy of a small speaker through reversible separation. A written recipe (products-assemblies; authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/portable-speaker-exploded.json","use":"python3 scripts/resolve.py recipe.portable-speaker-exploded"},{"id":"3dviz-pro-max/recipe-predator-prey-phase-time","name":"Predator-prey cycles in phase space and model time","kind":"three","job":"3d","line":"Link an idealized two-population interaction model to its time series, phase portrait and bounded time-lifted trajectory without presenting aggregate state as individual animal behavior. A written recipe (earth-environment, calculus-fields; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/predator-prey-phase-time.json","use":"python3 scripts/resolve.py recipe.predator-prey-phase-time"},{"id":"3dviz-pro-max/recipe-projectile-trajectory","name":"Projectile trajectory and first contact","kind":"three","job":"3d","line":"Keep position, velocity and acceleration consistent through ballistic flight. A written recipe (rigid-mechanics; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/projectile-trajectory.json","use":"python3 scripts/resolve.py recipe.projectile-trajectory"},{"id":"3dviz-pro-max/recipe-protein-secondary-structure","name":"Protein secondary structure ribbon","kind":"three","job":"3d","line":"Build a cartoon protein view whose helices and strands come from annotated structure rather than from decorative shapes. A written recipe (molecules-materials; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits, with numeric defaults and a worked value. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/protein-secondary-structure.json","use":"python3 scripts/resolve.py recipe.protein-secondary-structure"},{"id":"3dviz-pro-max/recipe-pyraminx-legal-move-state","name":"Pyraminx legal-move state and turn player","kind":"three","job":"3d","line":"Drive a tetrahedral twisty puzzle from versioned discrete piece permutations and orientations, including distinct main-layer and tip moves, without inferring state from mesh transforms. A written recipe (twisty-puzzles, spatial-puzzles; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/pyraminx-legal-move-state.json","use":"python3 scripts/resolve.py recipe.pyraminx-legal-move-state"},{"id":"3dviz-pro-max/recipe-quadratic-julia-escape-inspector","name":"Quadratic Julia filled-set escape inspector","kind":"three","job":"3d","line":"Hold one quadratic parameter fixed, vary the initial complex point, and inspect detected escape without confusing the dynamical plane with the Mandelbrot parameter plane or finite non-escape with membership proof. A written recipe (calculus-fields, abstract-systems-data; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/quadratic-julia-escape-inspector.json","use":"python3 scripts/resolve.py recipe.quadratic-julia-escape-inspector"},{"id":"3dviz-pro-max/recipe-rag-retrieval-provenance","name":"RAG retrieval and provenance inspector","kind":"three","job":"3d","line":"Inspect one query's ranked passages, its fixed top-k retriever prior, and separately defined latent-document contributions in a bounded RAG formulation without presenting retrieval as citation proof. A written recipe (abstract-systems-data; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/rag-retrieval-provenance.json","use":"python3 scripts/resolve.py recipe.rag-retrieval-provenance"},{"id":"3dviz-pro-max/recipe-reaction-coordinate-energy-profile","name":"Reaction coordinate: sourced energy profile","kind":"three","job":"3d","line":"Plot supplied energy samples against one declared coordinate without turning interpolation or a sampled peak into a mechanism. A written recipe (molecules-materials; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/reaction-coordinate-energy-profile.json","use":"python3 scripts/resolve.py recipe.reaction-coordinate-energy-profile"},{"id":"3dviz-pro-max/recipe-reactive-trajectory-topology-change","name":"Reactive trajectory: explicit topology changes","kind":"three","job":"3d","line":"Preserve atom identity and sourced bond events across frames without guessing reaction chemistry from distance. A written recipe (molecules-materials; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/reactive-trajectory-topology-change.json","use":"python3 scripts/resolve.py recipe.reactive-trajectory-topology-change"},{"id":"3dviz-pro-max/recipe-reconciliation-control-loop","name":"Desired state, observed state and a reconciliation loop","kind":"three","job":"3d","line":"Model an operator loop where the difference between requested and observed state drives every action taken. A written recipe (abstract-systems-data; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/reconciliation-control-loop.json","use":"python3 scripts/resolve.py recipe.reconciliation-control-loop"},{"id":"3dviz-pro-max/recipe-rectangular-room-normal-modes","name":"Normal modes of a rigid rectangular room","kind":"three","job":"3d","line":"Inspect one analytic pressure eigenmode in a lossless rigid rectangular room, with its frequency, signed spatial lobes and nodal planes kept distinct from ray paths and reverberation models. A written recipe (waves-optics-fields, architecture-interiors; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/rectangular-room-normal-modes.json","use":"python3 scripts/resolve.py recipe.rectangular-room-normal-modes"},{"id":"3dviz-pro-max/recipe-recursion-call-stack","name":"Recursion, call stack and backtracking","kind":"three","job":"3d","line":"Build the call stack as a physical stack so that returning is popping, and let a backtracking search grow and prune it. A written recipe (algorithms-data-structures; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/recursion-call-stack.json","use":"python3 scripts/resolve.py recipe.recursion-call-stack"},{"id":"3dviz-pro-max/recipe-replicated-log-consensus","name":"Replicated log and leader-based consensus","kind":"three","job":"3d","line":"Give each replica its own visible log so agreement becomes a comparison between logs rather than a claim. A written recipe (abstract-systems-data; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/replicated-log-consensus.json","use":"python3 scripts/resolve.py recipe.replicated-log-consensus"},{"id":"3dviz-pro-max/recipe-reversible-branching-storybook-scene","name":"Reversible branching storybook spatial scene","kind":"three","job":"scene","line":"Turn narrative choices into distinct spatial dioramas while preserving authoritative branch state, checkpoints and a truthful back/reset contract. A written recipe (environments-dioramas, characters-motion-art; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/reversible-branching-storybook-scene.json","use":"python3 scripts/resolve.py recipe.reversible-branching-storybook-scene"},{"id":"3dviz-pro-max/recipe-ribbon-motion-sculpture","name":"Ribbon motion sculpture","kind":"three","job":"rig","line":"Compose a layered ribbon installation whose form can be explored without hiding its control curve. A written recipe (characters-motion-art; authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/ribbon-motion-sculpture.json","use":"python3 scripts/resolve.py recipe.ribbon-motion-sculpture"},{"id":"3dviz-pro-max/recipe-riemann-sphere-reciprocal-map","name":"Reciprocal complex mapping on the Riemann sphere","kind":"three","job":"3d","line":"Relate a bounded complex-plane viewport to the unit sphere and show how reciprocal mapping exchanges zero and infinity. A written recipe (topology-symmetry, calculus-fields; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/riemann-sphere-reciprocal-map.json","use":"python3 scripts/resolve.py recipe.riemann-sphere-reciprocal-map"},{"id":"3dviz-pro-max/recipe-robot-arm-forward-frames","name":"Robot arm forward-kinematics frames","kind":"three","job":"3d","line":"Connect joint coordinates to an articulated arm and inspectable endpoint frame. A written recipe (robotics-control; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/robot-arm-forward-frames.json","use":"python3 scripts/resolve.py recipe.robot-arm-forward-frames"},{"id":"3dviz-pro-max/recipe-robot-contact-task-execution","name":"Rigid robot contact task execution","kind":"three","job":"3d","line":"Inspect a bounded rigid robot approach/contact/hold/retreat task whose controller, collision solver and state transitions have separate authority. A written recipe (robotics-control, rigid-mechanics; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/robot-contact-task-execution.json","use":"python3 scripts/resolve.py recipe.robot-contact-task-execution"},{"id":"3dviz-pro-max/recipe-rolling-inertia-race","name":"Rolling without slipping and the inertia race","kind":"three","job":"3d","line":"Race bodies of equal mass and radius down one incline so the only difference is where their mass sits. A written recipe (rigid-mechanics; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/rolling-inertia-race.json","use":"python3 scripts/resolve.py recipe.rolling-inertia-race"},{"id":"3dviz-pro-max/recipe-room-first-reflection-paths","name":"Room acoustics through first-reflection image sources","kind":"three","job":"3d","line":"Reveal direct and single-wall specular paths in a rectangular room, with travel delays rather than a claimed wave solution. A written recipe (waves-optics-fields, architecture-interiors; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/room-first-reflection-paths.json","use":"python3 scripts/resolve.py recipe.room-first-reflection-paths"},{"id":"3dviz-pro-max/recipe-root-zone-irrigation-budget","name":"Root-zone irrigation water budget","kind":"three","job":"3d","line":"Balance daily root-zone depletion from rain, runoff, irrigation, capillary rise, evapotranspiration and deep percolation while keeping every flux and modeling assumption visible. A written recipe (earth-environment, environments-dioramas; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/root-zone-irrigation-budget.json","use":"python3 scripts/resolve.py recipe.root-zone-irrigation-budget"},{"id":"3dviz-pro-max/recipe-saddle-node-normal-form-branch-time","name":"Saddle-node normal form branch and bounded time trace","kind":"three","job":"3d","line":"Explore dx/dt=r-x^2 only on a declared bounded state/time window, linking its equilibrium branch, derivative stability and time trace through r=0. A written recipe (calculus-fields; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/saddle-node-normal-form-branch-time.json","use":"python3 scripts/resolve.py recipe.saddle-node-normal-form-branch-time"},{"id":"3dviz-pro-max/recipe-sampling-mean-distribution","name":"Sampling means from a skewed population","kind":"three","job":"3d","line":"Compare individual Bernoulli draws with the distribution of repeated sample means. A written recipe (probability-statistics; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/sampling-mean-distribution.json","use":"python3 scripts/resolve.py recipe.sampling-mean-distribution"},{"id":"3dviz-pro-max/recipe-sarcomere-sliding-filaments","name":"Sarcomere sliding filament comparison","kind":"three","job":"3d","line":"Compare relaxed and shortened sarcomeres without shrinking the filaments themselves. A written recipe (physiology-biomechanics; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits, with numeric defaults and a worked value. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/sarcomere-sliding-filaments.json","use":"python3 scripts/resolve.py recipe.sarcomere-sliding-filaments"},{"id":"3dviz-pro-max/recipe-sat-model-resolution-refutation","name":"SAT: a model versus a checked refutation","kind":"three","job":"3d","line":"Separate one successful assignment from a proof that no assignment can work. A written recipe (logic-circuits; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/sat-model-resolution-refutation.json","use":"python3 scripts/resolve.py recipe.sat-model-resolution-refutation"},{"id":"3dviz-pro-max/recipe-secondary-motion-chain","name":"Cape and hair follow-through chains","kind":"three","job":"rig","line":"Add trailing motion that is driven by the character rather than looped beside it, with limits that keep it from exploding. A written recipe (characters-motion-art; authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/secondary-motion-chain.json","use":"python3 scripts/resolve.py recipe.secondary-motion-chain"},{"id":"3dviz-pro-max/recipe-sensorthings-telemetry-freshness-sync","name":"SensorThings telemetry freshness and ordering view","kind":"three","job":"3d","line":"Reconcile a finite supplied SensorThings observation stream into stable scene objects while preserving phenomenon, result and arrival times and showing stale, late, duplicate or conflicting data without treating telemetry as truth. A written recipe (operations-logistics, architecture-interiors; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/sensorthings-telemetry-freshness-sync.json","use":"python3 scripts/resolve.py recipe.sensorthings-telemetry-freshness-sync"},{"id":"3dviz-pro-max/recipe-service-graph","name":"Service graph with trace inspection","kind":"three","job":"3d","line":"Connect service nodes to observed trace relationships while exposing incomplete coverage. A written recipe (abstract-systems-data; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/service-graph.json","use":"python3 scripts/resolve.py recipe.service-graph"},{"id":"3dviz-pro-max/recipe-setup-hold-timing","name":"Setup, hold and the clock period budget","kind":"three","job":"3d","line":"Show a register timing budget as a scene where violating a window has a visible, named consequence. A written recipe (logic-circuits; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/setup-hold-timing.json","use":"python3 scripts/resolve.py recipe.setup-hold-timing"},{"id":"3dviz-pro-max/recipe-simple-pendulum","name":"Ideal pendulum with measurable state","kind":"three","job":"3d","line":"Relate angular state to bob motion and distinguish small-angle approximation. A written recipe (rigid-mechanics; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/simple-pendulum.json","use":"python3 scripts/resolve.py recipe.simple-pendulum"},{"id":"3dviz-pro-max/recipe-single-attention-head-aggregation","name":"Single attention-head value aggregation","kind":"three","job":"3d","line":"Connect one query row's scaled query-key scores and softmax weights to the weighted sum of value vectors produced by one attention head. A written recipe (abstract-systems-data, linear-algebra; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/single-attention-head-aggregation.json","use":"python3 scripts/resolve.py recipe.single-attention-head-aggregation"},{"id":"3dviz-pro-max/recipe-single-qubit-bloch-ball","name":"Single-qubit pure and mixed states on the Bloch ball","kind":"three","job":"3d","line":"Relate a single-qubit density matrix to a point in the Bloch ball and distinguish pure-state phase from statistical mixing. A written recipe (linear-algebra, waves-optics-fields; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/single-qubit-bloch-ball.json","use":"python3 scripts/resolve.py recipe.single-qubit-bloch-ball"},{"id":"3dviz-pro-max/recipe-single-qubit-channel-map","name":"Single-qubit quantum-channel map","kind":"three","job":"3d","line":"Apply a supplied finite Kraus representation to single-qubit density matrices and compare the input Bloch ball with the channel output ellipsoid or shifted body. A written recipe (linear-algebra, abstract-systems-data, waves-optics-fields; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/single-qubit-channel-map.json","use":"python3 scripts/resolve.py recipe.single-qubit-channel-map"},{"id":"3dviz-pro-max/recipe-skeletal-hierarchy","name":"Skeletal hierarchy explorer","kind":"three","job":"3d","line":"Connect named bones to axial and appendicular groupings. A written recipe (anatomy-structures; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits, with numeric defaults and a worked value. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/skeletal-hierarchy.json","use":"python3 scripts/resolve.py recipe.skeletal-hierarchy"},{"id":"3dviz-pro-max/recipe-skull-foramina-exploded-route-atlas","name":"Dry-skull foramina exploded route atlas","kind":"three","job":"3d","line":"Inspect a licensed supplied adult dry-skull teaching mesh using curated cranial-fossa aperture labels and internal/external route anchors without detecting anatomy from holes. A written recipe (anatomy-structures; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/skull-foramina-exploded-route-atlas.json","use":"python3 scripts/resolve.py recipe.skull-foramina-exploded-route-atlas"},{"id":"3dviz-pro-max/recipe-sky-archipelago-world","name":"Floating archipelago with wind-driven travel","kind":"three","job":"scene","line":"Author a fictional world whose invented rule set is stated and consistently enforced, so travel between islands has real constraints. A written recipe (environments-dioramas; authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/sky-archipelago-world.json","use":"python3 scripts/resolve.py recipe.sky-archipelago-world"},{"id":"3dviz-pro-max/recipe-sliding-block-escape","name":"Sliding block escape board","kind":"three","job":"3d","line":"Slide authored rectangular blocks along constrained axes toward a visible exit. A written recipe (spatial-puzzles; authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/sliding-block-escape.json","use":"python3 scripts/resolve.py recipe.sliding-block-escape"},{"id":"3dviz-pro-max/recipe-small-neural-forward-activations","name":"Small neural-network forward activations","kind":"three","job":"3d","line":"Make every affine contribution, pre-activation, ReLU result, and output of a small two-layer network inspectable for one input. A written recipe (abstract-systems-data, linear-algebra; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/small-neural-forward-activations.json","use":"python3 scripts/resolve.py recipe.small-neural-forward-activations"},{"id":"3dviz-pro-max/recipe-smt-arithmetic-model-status","name":"SMT arithmetic: integer and real models","kind":"three","job":"3d","line":"Compare exact arithmetic domains and preserve solver uncertainty in the display. A written recipe (logic-circuits; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/smt-arithmetic-model-status.json","use":"python3 scripts/resolve.py recipe.smt-arithmetic-model-status"},{"id":"3dviz-pro-max/recipe-solid-of-revolution","name":"Profile to solid of revolution","kind":"three","job":"3d","line":"Connect a nonnegative profile, its sweep and volume slices. A written recipe (solid-geometry; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/solid-of-revolution.json","use":"python3 scripts/resolve.py recipe.solid-of-revolution"},{"id":"3dviz-pro-max/recipe-spectral-transition-orbital-inspector","name":"Spectral transitions: mixed orbital contributions","kind":"three","job":"3d","line":"Keep calculated transition energies and strengths tied to method output while showing that an excited state may mix several orbital pairs. A written recipe (molecules-materials; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/spectral-transition-orbital-inspector.json","use":"python3 scripts/resolve.py recipe.spectral-transition-orbital-inspector"},{"id":"3dviz-pro-max/recipe-square-dihedral-actions","name":"Square symmetries as exact permutations","kind":"three","job":"3d","line":"Apply rotations and reflections to labeled square corners and compare operation order. A written recipe (topology-symmetry; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/square-dihedral-actions.json","use":"python3 scripts/resolve.py recipe.square-dihedral-actions"},{"id":"3dviz-pro-max/recipe-stable-merge-sort-trace","name":"Stable mergesort with persistent item identity","kind":"three","job":"3d","line":"Track duplicate-valued items through recursive splitting and stable merging. A written recipe (algorithms-data-structures; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/stable-merge-sort-trace.json","use":"python3 scripts/resolve.py recipe.stable-merge-sort-trace"},{"id":"3dviz-pro-max/recipe-stage-previsualization-cue-stack","name":"Stage previsualization with a versioned cue stack","kind":"three","job":"rig","line":"Coordinate performer blocking, camera, lighting and scenic cues in a reversible previsualization without claiming live show-control execution. A written recipe (characters-motion-art, environments-dioramas; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/stage-previsualization-cue-stack.json","use":"python3 scripts/resolve.py recipe.stage-previsualization-cue-stack"},{"id":"3dviz-pro-max/recipe-stair-flight-geometry","name":"Stair flight geometry and handrail height","kind":"three","job":"scene","line":"Generate a stair from riser and tread dimensions and check it against published provisions instead of eyeballing it. A written recipe (architecture-interiors; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/stair-flight-geometry.json","use":"python3 scripts/resolve.py recipe.stair-flight-geometry"},{"id":"3dviz-pro-max/recipe-standing-string-modes","name":"Standing wave modes on a fixed string","kind":"three","job":"3d","line":"Reveal stationary nodes while particles of a string oscillate transversely. A written recipe (waves-optics-fields; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/standing-string-modes.json","use":"python3 scripts/resolve.py recipe.standing-string-modes"},{"id":"3dviz-pro-max/recipe-stellar-parallax-baseline","name":"Stellar parallax and observation baseline","kind":"three","job":"3d","line":"Compare two lines of sight from opposite orbital positions and keep the half-angle convention explicit. A written recipe (astronomy-space; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/stellar-parallax-baseline.json","use":"python3 scripts/resolve.py recipe.stellar-parallax-baseline"},{"id":"3dviz-pro-max/recipe-streamflow-forecast-playback","name":"Streamflow guidance playback on a river network","kind":"three","job":"3d","line":"Play modeled streamflow over a river network while keeping guidance, observation and visualization clearly separated. A written recipe (earth-environment; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/streamflow-forecast-playback.json","use":"python3 scripts/resolve.py recipe.streamflow-forecast-playback"},{"id":"3dviz-pro-max/recipe-studio-furniture-layout","name":"Studio furniture layout and clearance","kind":"three","job":"scene","line":"Arrange furniture in a measured authored room with visible footprint and door-sweep checks. A written recipe (architecture-interiors; authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/studio-furniture-layout.json","use":"python3 scripts/resolve.py recipe.studio-furniture-layout"},{"id":"3dviz-pro-max/recipe-supplied-brain-atlas-region-inspection","name":"Supplied brain-atlas region inspection","kind":"three","job":"3d","line":"Inspect regions from a supplied validated atlas label volume and label table without generating or relabeling anatomy. A written recipe (anatomy-structures; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/supplied-brain-atlas-region-inspection.json","use":"python3 scripts/resolve.py recipe.supplied-brain-atlas-region-inspection"},{"id":"3dviz-pro-max/recipe-supplied-opensim-muscle-wrap-path-playback","name":"Supplied OpenSim muscle wrapping-path playback","kind":"three","job":"3d","line":"Play supplied OpenSim muscle-tendon path samples across one bounded joint coordinate, preserving body frames and point identity without recomputing wrap contact or physiology. A written recipe (physiology-biomechanics; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/supplied-opensim-muscle-wrap-path-playback.json","use":"python3 scripts/resolve.py recipe.supplied-opensim-muscle-wrap-path-playback"},{"id":"3dviz-pro-max/recipe-svd-sphere-to-ellipsoid","name":"Singular value decomposition as orthogonal map, scale, orthogonal map","kind":"three","job":"3d","line":"Decompose one matrix into three visible stages, keep reflections visible as legitimate orthogonal factors, and connect the ellipsoid semi-axes to the singular values. A written recipe (linear-algebra; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/svd-sphere-to-ellipsoid.json","use":"python3 scripts/resolve.py recipe.svd-sphere-to-ellipsoid"},{"id":"3dviz-pro-max/recipe-symmetry-operations-tolerance","name":"Symmetry operations found under a tolerance","kind":"three","job":"3d","line":"Apply candidate symmetry operations to a 3D arrangement and let the tolerance that decides success be an explicit control. A written recipe (topology-symmetry; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/symmetry-operations-tolerance.json","use":"python3 scripts/resolve.py recipe.symmetry-operations-tolerance"},{"id":"3dviz-pro-max/recipe-terrain-contour-slices","name":"Terrain contours linked to a height field","kind":"three","job":"3d","line":"Connect equal-elevation contour lines with horizontal slices through a labeled synthetic terrain. A written recipe (earth-environment; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/terrain-contour-slices.json","use":"python3 scripts/resolve.py recipe.terrain-contour-slices"},{"id":"3dviz-pro-max/recipe-terrain-island","name":"Terrain island with grounded exploration","kind":"three","job":"scene","line":"Compose a traversable island around a ridge, sheltered inlet and readable path. A written recipe (environments-dioramas; authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/terrain-island.json","use":"python3 scripts/resolve.py recipe.terrain-island"},{"id":"3dviz-pro-max/recipe-three-qubit-ghz-correlations","name":"Three-qubit GHZ correlation inspector","kind":"three","job":"3d","line":"Inspect an ordered three-qubit GHZ state through its eight amplitudes, one- and two-qubit reductions and exact three-body Pauli parity settings. A written recipe (linear-algebra, abstract-systems-data, waves-optics-fields; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/three-qubit-ghz-correlations.json","use":"python3 scripts/resolve.py recipe.three-qubit-ghz-correlations"},{"id":"3dviz-pro-max/recipe-timed-colored-petri-net","name":"Timed colored Petri net: bindings and model time","kind":"three","job":"3d","line":"Bind typed token values and advance an explicit model clock without turning animation duration into net semantics. A written recipe (abstract-systems-data; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/timed-colored-petri-net.json","use":"python3 scripts/resolve.py recipe.timed-colored-petri-net"},{"id":"3dviz-pro-max/recipe-torque-driven-four-bar-dynamics","name":"Torque-driven planar four-bar dynamics","kind":"three","job":"3d","line":"Integrate one planar four-bar generalized coordinate from applied torque while solving loop closure on a locked assembly branch. A written recipe (rigid-mechanics, products-assemblies; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/torque-driven-four-bar-dynamics.json","use":"python3 scripts/resolve.py recipe.torque-driven-four-bar-dynamics"},{"id":"3dviz-pro-max/recipe-torus-euler-cells","name":"Torus cells and Euler characteristic","kind":"three","job":"3d","line":"Count unique cells on a periodic torus mesh and compare them with the identified parameter rectangle. A written recipe (topology-symmetry; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/torus-euler-cells.json","use":"python3 scripts/resolve.py recipe.torus-euler-cells"},{"id":"3dviz-pro-max/recipe-training-trajectory-checkpoint-inspector","name":"Training trajectory checkpoint inspector","kind":"three","job":"3d","line":"Inspect a trusted pre-extracted sequence of model checkpoints through comparable metrics and one fixed declared projection without loading or executing checkpoint binaries. A written recipe (abstract-systems-data, linear-algebra; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/training-trajectory-checkpoint-inspector.json","use":"python3 scripts/resolve.py recipe.training-trajectory-checkpoint-inspector"},{"id":"3dviz-pro-max/recipe-trefoil-knot-diagram","name":"Trefoil knot, crossings and invariants","kind":"three","job":"3d","line":"Keep the spatial curve and its projected diagram in one scene, so a crossing count belongs to the projection and not to the knot. A written recipe (topology-symmetry; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/trefoil-knot-diagram.json","use":"python3 scripts/resolve.py recipe.trefoil-knot-diagram"},{"id":"3dviz-pro-max/recipe-twisty-cube-3x3-face-turns","name":"3 by 3 cube face-turn player","kind":"three","job":"3d","line":"Model legal outer-layer turns with exact discrete state and animate their presentation without using mesh transforms as the puzzle state. A written recipe (twisty-puzzles; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/twisty-cube-3x3-face-turns.json","use":"python3 scripts/resolve.py recipe.twisty-cube-3x3-face-turns"},{"id":"3dviz-pro-max/recipe-twisty-mechanism-cutaway","name":"Twisty-puzzle mechanism cutaway and turn explanation","kind":"three","job":"3d","line":"Use a patent-grounded 3×3 mechanism example to explain how centers, sliding piece connectors and an interior element retain pieces while a face layer turns, clearly labeling illustrative clearance and physics limits. A written recipe (twisty-puzzles, products-assemblies; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/twisty-mechanism-cutaway.json","use":"python3 scripts/resolve.py recipe.twisty-mechanism-cutaway"},{"id":"3dviz-pro-max/recipe-two-parameter-loss-slice-gradient","name":"Two-parameter loss slice and gradient","kind":"three","job":"3d","line":"Distinguish a true two-parameter loss from a two-direction slice through a higher-dimensional model and show gradients in the coordinates actually displayed. A written recipe (calculus-fields, abstract-systems-data; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/two-parameter-loss-slice-gradient.json","use":"python3 scripts/resolve.py recipe.two-parameter-loss-slice-gradient"},{"id":"3dviz-pro-max/recipe-two-qubit-bell-correlations","name":"Two-qubit Bell-state marginals and joint correlations","kind":"three","job":"3d","line":"Inspect a normalized four-amplitude two-qubit state through its two reduced states and joint Pauli correlations, with Bell presets that make locally mixed marginals coexist with definite pair correlations. A written recipe (linear-algebra, abstract-systems-data, waves-optics-fields; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/two-qubit-bell-correlations.json","use":"python3 scripts/resolve.py recipe.two-qubit-bell-correlations"},{"id":"3dviz-pro-max/recipe-two-qubit-mixed-state-entanglement","name":"Two-qubit mixed-state partial-transpose inspector","kind":"three","job":"3d","line":"Inspect a supplied two-qubit density matrix, its reductions and partial-transpose spectrum with the exact 2×2 Peres-Horodecki separability boundary. A written recipe (linear-algebra, abstract-systems-data, waves-optics-fields; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/two-qubit-mixed-state-entanglement.json","use":"python3 scripts/resolve.py recipe.two-qubit-mixed-state-entanglement"},{"id":"3dviz-pro-max/recipe-union-find-mst","name":"Kruskal, union-find and the cut property","kind":"three","job":"3d","line":"Show component membership as a first-class object so that rejecting an edge has a visible reason. A written recipe (algorithms-data-structures; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/union-find-mst.json","use":"python3 scripts/resolve.py recipe.union-find-mst"},{"id":"3dviz-pro-max/recipe-vector-field-integration","name":"Streamlines, trajectories and integrator error","kind":"three","job":"3d","line":"Separate the field itself from the numerical path traced through it, and keep the step size visible as a modeling choice. A written recipe (calculus-fields; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/vector-field-integration.json","use":"python3 scripts/resolve.py recipe.vector-field-integration"},{"id":"3dviz-pro-max/recipe-ventilation-pressure-phases","name":"Ventilation pressure and motion phases","kind":"three","job":"3d","line":"Connect an illustrative thorax motion to pressure direction and airflow phase labels. A written recipe (physiology-biomechanics; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits, with numeric defaults and a worked value. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/ventilation-pressure-phases.json","use":"python3 scripts/resolve.py recipe.ventilation-pressure-phases"},{"id":"3dviz-pro-max/recipe-versioned-story-save-migration","name":"Versioned branching-story save migration","kind":"three","job":"rig","line":"Migrate a saved branching-story state through explicit schema versions, preserving immutable source data and rolling back on unknown or invalid nodes. A written recipe (characters-motion-art, environments-dioramas; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/versioned-story-save-migration.json","use":"python3 scripts/resolve.py recipe.versioned-story-save-migration"},{"id":"3dviz-pro-max/recipe-vertebral-column-mechanics","name":"Vertebral column regions, curves and disc structure","kind":"three","job":"3d","line":"Build a segmented spine whose regional counts and curvatures stay correct while an authored flexion envelope is explored. A written recipe (anatomy-structures; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits, with numeric defaults and a worked value. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/vertebral-column-mechanics.json","use":"python3 scripts/resolve.py recipe.vertebral-column-mechanics"},{"id":"3dviz-pro-max/recipe-vessel-radius-resistance","name":"Ideal vessel radius and resistance","kind":"three","job":"3d","line":"Compare how an ideal tube model changes resistance when radius changes. A written recipe (physiology-biomechanics; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits, with numeric defaults and a worked value. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/vessel-radius-resistance.json","use":"python3 scripts/resolve.py recipe.vessel-radius-resistance"},{"id":"3dviz-pro-max/recipe-voxel-packing-tray","name":"Voxel packing tray puzzle","kind":"three","job":"3d","line":"Place authored polycube pieces into a small grid volume using exact occupied cells. A written recipe (spatial-puzzles; authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/voxel-packing-tray.json","use":"python3 scripts/resolve.py recipe.voxel-packing-tray"},{"id":"3dviz-pro-max/recipe-wait-for-deadlock-cycle","name":"Wait-for graphs: single-instance deadlock","kind":"three","job":"3d","line":"Trace an actual blocked request to its current owner and inspect a cycle witness under explicit assumptions. A written recipe (abstract-systems-data; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/wait-for-deadlock-cycle.json","use":"python3 scripts/resolve.py recipe.wait-for-deadlock-cycle"},{"id":"3dviz-pro-max/recipe-warehouse-pick-tour","name":"Warehouse pick tour and inventory","kind":"three","job":"3d","line":"Connect a synthetic order list to rack locations and explicit pick confirmations. A written recipe (operations-logistics; authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/warehouse-pick-tour.json","use":"python3 scripts/resolve.py recipe.warehouse-pick-tour"},{"id":"3dviz-pro-max/recipe-water-hydrogen-bond-network","name":"Water hydrogen-bond illustration","kind":"three","job":"3d","line":"Distinguish intramolecular O-H bonds from selected illustrative intermolecular connections. A written recipe (molecules-materials; sourced): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits, with numeric defaults and a worked value. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/water-hydrogen-bond-network.json","use":"python3 scripts/resolve.py recipe.water-hydrogen-bond-network"},{"id":"3dviz-pro-max/recipe-watershed-flow-accumulation","name":"Flow direction, accumulation and stream networks","kind":"three","job":"3d","line":"Derive drainage from a terrain grid so that a stream network is the result of a stated rule and a threshold, not a painted line. A written recipe (earth-environment; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/watershed-flow-accumulation.json","use":"python3 scripts/resolve.py recipe.watershed-flow-accumulation"},{"id":"3dviz-pro-max/recipe-winged-flight-cycle","name":"Winged creature flight cycle and banking turns","kind":"three","job":"rig","line":"Build a flier whose wing cycle, banking and heading come from one motion state instead of three unrelated animations. A written recipe (characters-motion-art; authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code; its own limits say no scene was run for it.","path":"skills/3dviz-pro-max/data/recipes/winged-flight-cycle.json","use":"python3 scripts/resolve.py recipe.winged-flight-cycle"},{"id":"3dviz-pro-max/recipe-xr-ar-museum-placement-uncertainty","name":"AR museum placement and occlusion uncertainty","kind":"three","job":"scene","line":"Place one museum object from a WebXR hit-test pose, optionally maintain an anchor and depth occlusion when separately enabled, and expose pose loss, unsupported features and device-owned uncertainty. A written recipe (architecture-interiors; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/xr-ar-museum-placement-uncertainty.json","use":"python3 scripts/resolve.py recipe.xr-ar-museum-placement-uncertainty"},{"id":"3dviz-pro-max/recipe-xr-museum-world-scale-teleport","name":"XR museum world-scale teleport contract","kind":"three","job":"scene","line":"Navigate a meter-authored museum using supplied walkable polygons and teleport targets while treating device bounded-floor geometry, authored collision and local-floor fallback as separate contracts. A written recipe (architecture-interiors; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/xr-museum-world-scale-teleport.json","use":"python3 scripts/resolve.py recipe.xr-museum-world-scale-teleport"},{"id":"3dviz-pro-max/recipe-xr-two-hand-product-manipulation","name":"XR two-hand product manipulation contract","kind":"three","job":"model","line":"Inspect one tabletop product using stable authored handle frames, one-hand rigid grab and a bounded two-hand transform on the product root, with controller-loss and desktop alternatives explicit. A written recipe (products-assemblies; part sourced, part authored): the parts to model, the one state that drives them, what must stay true, how it should move and its known limits. Text for an agent to build from, not code.","path":"skills/3dviz-pro-max/data/recipes/xr-two-hand-product-manipulation.json","use":"python3 scripts/resolve.py recipe.xr-two-hand-product-manipulation"},{"id":"3dviz-pro-max/look-accessible-high-contrast-stylization","name":"Accessible high-contrast stylization","kind":"three","job":"look","line":"Build the art direction from value lanes, boundaries, patterns and state shapes so meaningful graphics and controls survive palette changes, lighting and post effects. A style profile record: a creative proposal to adapt, not a rendered or measured result. Guidance only; no numeric defaults.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/accessible-high-contrast-stylization.json","use":"python3 scripts/resolve.py knowledge.accessible-high-contrast-stylization"},{"id":"3dviz-pro-max/look-graphic-shape-language-across-asset-types","name":"Graphic shape language across asset types","kind":"three","job":"look","line":"Define a small grammar of masses, cuts, edges and exceptions, then translate its relationships into unlike objects without forcing them into one silhouette. A style profile record: a creative proposal to adapt, not a rendered or measured result. Guidance only; no numeric defaults.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/graphic-shape-language-across-asset-types.json","use":"python3 scripts/resolve.py knowledge.graphic-shape-language-across-asset-types"},{"id":"3dviz-pro-max/look-motion-style-with-state-legibility","name":"Motion style with state legibility","kind":"three","job":"look","line":"Define a reusable timing and pose grammar whose selected, active, waiting, complete and error states remain distinguishable at hold frames, interruption points and reduced motion. A style profile record: a creative proposal to adapt, not a rendered or measured result. Guidance only; no numeric defaults.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/motion-style-with-state-legibility.json","use":"python3 scripts/resolve.py knowledge.motion-style-with-state-legibility"},{"id":"3dviz-pro-max/look-style-bioluminescent-deep-sea","name":"Bioluminescent deep sea","kind":"three","job":"look","line":"An abyss with no sun: the only light is made by the organizms in frame, falling off within a couple of meters into near-black water. A style profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/style-bioluminescent-deep-sea.json","use":"python3 scripts/resolve.py knowledge.style-bioluminescent-deep-sea"},{"id":"3dviz-pro-max/look-style-cartoon","name":"Cartoon expression","kind":"three","job":"look","line":"Organize the subject around an expressive pose, clear feature hierarchy and playful contrast of large and small shapes. A style profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/style-cartoon.json","use":"python3 scripts/resolve.py knowledge.style-cartoon"},{"id":"3dviz-pro-max/look-style-cel-shaded","name":"Cel-shaded bands","kind":"three","job":"look","line":"Compose deliberately limited light bands to make form readable through graphic value regions. A style profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/style-cel-shaded.json","use":"python3 scripts/resolve.py knowledge.style-cel-shaded"},{"id":"3dviz-pro-max/look-style-cinematic","name":"Cinematic staging","kind":"three","job":"look","line":"Design attention through foreground, focal action and background separation instead of relying solely on glow or dark exposure. A style profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/style-cinematic.json","use":"python3 scripts/resolve.py knowledge.style-cinematic"},{"id":"3dviz-pro-max/look-style-clay","name":"Clay-like sculpted forms","kind":"three","job":"look","line":"Suggest a hand-shaped object through soft mass transitions and a few intentional surface irregularities. A style profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/style-clay.json","use":"python3 scripts/resolve.py knowledge.style-clay"},{"id":"3dviz-pro-max/look-style-faceted","name":"Faceted planes","kind":"three","job":"look","line":"Use changes between visible planes as the main visual rhythm, not merely as an accidental low-resolution result. A style profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/style-faceted.json","use":"python3 scripts/resolve.py knowledge.style-faceted"},{"id":"3dviz-pro-max/look-style-felt-wool","name":"Felt and wool-like softness","kind":"three","job":"look","line":"Suggest a soft crafted textile with rounded silhouettes, layered patches and sparse fibers scaled for the view. A style profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/style-felt-wool.json","use":"python3 scripts/resolve.py knowledge.style-felt-wool"},{"id":"3dviz-pro-max/look-style-generative","name":"Generative variation systems","kind":"three","job":"look","line":"Choose a small set of authored rules whose variations produce coherent families, with parameters that have observable roles. A style profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/style-generative.json","use":"python3 scripts/resolve.py knowledge.style-generative"},{"id":"3dviz-pro-max/look-style-geometric-abstract","name":"Geometric abstraction","kind":"three","job":"look","line":"Build a visual language from a small vocabulary of geometric relationships with an explicit distinction between metaphor and measured quantities. A style profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/style-geometric-abstract.json","use":"python3 scripts/resolve.py knowledge.style-geometric-abstract"},{"id":"3dviz-pro-max/look-style-ghibli-painterly-pastoral","name":"Painterly pastoral (hand-painted animation background look)","kind":"three","job":"look","line":"A wide sunlit countryside where the sky is the subject: flat cloud banks, grouped green value masses and one terracotta accent, painted rather than simulated. A style profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK. Named after a film studio's style; the record is the author's own description of a look.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/style-ghibli-painterly-pastoral.json","use":"python3 scripts/resolve.py knowledge.style-ghibli-painterly-pastoral"},{"id":"3dviz-pro-max/look-style-glass-translucent","name":"Glass and translucent layering","kind":"three","job":"look","line":"Use see-through appearance selectively to reveal depth, thickness or nested structure while keeping an opaque reference where needed. A style profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/style-glass-translucent.json","use":"python3 scripts/resolve.py knowledge.style-glass-translucent"},{"id":"3dviz-pro-max/look-style-hand-painted","name":"Hand-painted surface accents","kind":"three","job":"look","line":"Place authored marks where they explain shape, use or attention rather than covering every surface with equal detail. A style profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/style-hand-painted.json","use":"python3 scripts/resolve.py knowledge.style-hand-painted"},{"id":"3dviz-pro-max/look-style-holographic","name":"Holographic display metaphor","kind":"three","job":"look","line":"Use a visibly authored projected-display metaphor to reveal layers or selection, without claiming a real optical hologram. A style profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/style-holographic.json","use":"python3 scripts/resolve.py knowledge.style-holographic"},{"id":"3dviz-pro-max/look-style-lantern-festival-riverside","name":"Riverside lantern festival (Southeast-Asia-inspired, fictional)","kind":"three","job":"look","line":"A fictional dusk river town lit from within: warm paper practicals against a cooling blue-violet sky, wet stone reflecting both. A style profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/style-lantern-festival-riverside.json","use":"python3 scripts/resolve.py knowledge.style-lantern-festival-riverside"},{"id":"3dviz-pro-max/look-style-low-poly","name":"Low-poly shape economy","kind":"three","job":"look","line":"Spend geometric detail on the contour and meaningful part boundaries rather than distributing it evenly. A style profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/style-low-poly.json","use":"python3 scripts/resolve.py knowledge.style-low-poly"},{"id":"3dviz-pro-max/look-style-minimalist","name":"Minimalist visual hierarchy","kind":"three","job":"look","line":"Keep only forms that communicate identity, relation or interaction; use spacing and proportion as the primary expressive tools. A style profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/style-minimalist.json","use":"python3 scripts/resolve.py knowledge.style-minimalist"},{"id":"3dviz-pro-max/look-style-monochrome-study","name":"Monochrome form study","kind":"three","job":"look","line":"Use value, surface response and silhouette to study form with a deliberately restricted hue range. A style profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/style-monochrome-study.json","use":"python3 scripts/resolve.py knowledge.style-monochrome-study"},{"id":"3dviz-pro-max/look-style-neon-noir-rain","name":"Neon noir, rain-wet street","kind":"three","job":"look","line":"A night street where almost every surface is unlit and color arrives only as neon reflected off wet asphalt and glass. A style profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/style-neon-noir-rain.json","use":"python3 scripts/resolve.py knowledge.style-neon-noir-rain"},{"id":"3dviz-pro-max/look-style-origami","name":"Origami-inspired fold emphasis","kind":"three","job":"look","line":"Make connected folded planes the defining expression and distinguish an inspired sculpture from a verified foldable design. A style profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/style-origami.json","use":"python3 scripts/resolve.py knowledge.style-origami"},{"id":"3dviz-pro-max/look-style-painterly","name":"Painterly scene composition","kind":"three","job":"look","line":"Treat the complete scene as grouped value and color masses, reserving sharp detail for the focal subject. A style profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/style-painterly.json","use":"python3 scripts/resolve.py knowledge.style-painterly"},{"id":"3dviz-pro-max/look-style-papercraft","name":"Papercraft construction cues","kind":"three","job":"look","line":"Express a made-from-sheet proposal through folds, cut edges and layered panels rather than adding paper texture alone. A style profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/style-papercraft.json","use":"python3 scripts/resolve.py knowledge.style-papercraft"},{"id":"3dviz-pro-max/look-style-photorealistic","name":"Photorealistic appearance goal","kind":"three","job":"look","line":"Aim for a plausible photographed appearance through consistent scale, construction detail and a deliberate lighting setup, without claiming measured fidelity. A style profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/style-photorealistic.json","use":"python3 scripts/resolve.py knowledge.style-photorealistic"},{"id":"3dviz-pro-max/look-style-retro-low-resolution","name":"Retro low-resolution presentation","kind":"three","job":"look","line":"Choose an intentional image-grid and detail hierarchy so pixel structure supports the scene instead of making controls unreadable. A style profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/style-retro-low-resolution.json","use":"python3 scripts/resolve.py knowledge.style-retro-low-resolution"},{"id":"3dviz-pro-max/look-style-scientific-encoding","name":"Scientific encoding as presentation","kind":"three","job":"look","line":"Treat color, size and position as declared data mappings, not as a freely interchangeable surface style; record units and legend meaning. A style profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/style-scientific-encoding.json","use":"python3 scripts/resolve.py knowledge.style-scientific-encoding"},{"id":"3dviz-pro-max/look-style-stop-motion-inspired","name":"Stop-motion-inspired timing","kind":"three","job":"look","line":"Design visible held poses and deliberate handmade staging without presenting the result as photographed physical animation. A style profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/style-stop-motion-inspired.json","use":"python3 scripts/resolve.py knowledge.style-stop-motion-inspired"},{"id":"3dviz-pro-max/look-style-stylized-realism","name":"Stylized realism balance","kind":"three","job":"look","line":"Keep construction and recognizable material relationships while deliberately exaggerating selected shapes or color relationships. A style profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/style-stylized-realism.json","use":"python3 scripts/resolve.py knowledge.style-stylized-realism"},{"id":"3dviz-pro-max/look-style-stylized","name":"Stylized proportions","kind":"three","job":"look","line":"Choose one proportional exaggeration that gives the subject character while preserving its identifying parts. A style profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/style-stylized.json","use":"python3 scripts/resolve.py knowledge.style-stylized"},{"id":"3dviz-pro-max/look-style-surreal","name":"Surreal spatial invention","kind":"three","job":"look","line":"Choose a purposeful impossible relationship and support it with otherwise coherent local visual cues. A style profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/style-surreal.json","use":"python3 scripts/resolve.py knowledge.style-surreal"},{"id":"3dviz-pro-max/look-style-technical-illustration","name":"Technical illustration clarity","kind":"three","job":"look","line":"Prioritize identifiable parts, ordered reveals and unambiguous labels while distinguishing sourced structure from authored simplification. A style profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/style-technical-illustration.json","use":"python3 scripts/resolve.py knowledge.style-technical-illustration"},{"id":"3dviz-pro-max/look-style-tilt-shift-diorama","name":"Tilt-shift diorama (fake-miniature photography)","kind":"three","job":"look","line":"A full-size scene photographed as if it were a tabletop model: high telephoto camera, a narrow horizontal band of sharp focus, lifted saturation and hard small-scale sun. A style profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/style-tilt-shift-diorama.json","use":"python3 scripts/resolve.py knowledge.style-tilt-shift-diorama"},{"id":"3dviz-pro-max/look-style-toy-miniature","name":"Toy miniature scale cues","kind":"three","job":"look","line":"Present the subject as a deliberately crafted small object using a readable base, tactile parts and selective oversizing. A style profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/style-toy-miniature.json","use":"python3 scripts/resolve.py knowledge.style-toy-miniature"},{"id":"3dviz-pro-max/look-style-voxel","name":"Voxel cell composition","kind":"three","job":"look","line":"Choose a visible cell rhythm and use clustered blocks to express larger silhouettes rather than scattering isolated cubes. A style profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/style-voxel.json","use":"python3 scripts/resolve.py knowledge.style-voxel"},{"id":"3dviz-pro-max/look-style-wireframe","name":"Wireframe structure view","kind":"three","job":"look","line":"Use selected edges to expose construction or relationships, deciding whether the view shows mesh topology, component outlines or an abstract graph. A style profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/style-wireframe.json","use":"python3 scripts/resolve.py knowledge.style-wireframe"},{"id":"3dviz-pro-max/look-stylized-pbr-material-response","name":"Stylized PBR material response","kind":"three","job":"look","line":"Art-direct a compact family of highlight widths, roughness transitions and material-role contrasts while keeping glTF metallic-roughness transport explicit. A style profile record: a creative proposal to adapt, not a rendered or measured result. Guidance only; no numeric defaults.","path":"skills/3dviz-pro-max/data/knowledge/style-profile/stylized-pbr-material-response.json","use":"python3 scripts/resolve.py knowledge.stylized-pbr-material-response"},{"id":"3dviz-pro-max/light-baked-runtime-lightmap-ownership","name":"Baked and runtime lightmap ownership","kind":"three","job":"lighting","line":"Assign every direct, indirect, ambient-occlusion and emissive contribution to the bake or runtime before binding a lighting-only lightmap product, with a bake-safe unwrap/channel and explicit linear-light encoding. A lighting profile record: a creative proposal to adapt, not a rendered or measured result. Guidance only; no numeric defaults.","path":"skills/3dviz-pro-max/data/knowledge/lighting-profile/baked-runtime-lightmap-ownership.json","use":"python3 scripts/resolve.py knowledge.baked-runtime-lightmap-ownership"},{"id":"3dviz-pro-max/light-blender-three-ibl-shadow-ownership","name":"Environment IBL and direct-shadow ownership","kind":"three","job":"lighting","line":"Assign environment lighting, roughness prefiltering, direct lights and shadow maps separate jobs so a Blender HDR look becomes a controlled Three.js lighting rig rather than an unexplained brightness match. A lighting profile record: a creative proposal to adapt, not a rendered or measured result. Guidance only; no numeric defaults.","path":"skills/3dviz-pro-max/data/knowledge/lighting-profile/blender-three-ibl-shadow-ownership.json","use":"python3 scripts/resolve.py knowledge.blender-three-ibl-shadow-ownership"},{"id":"3dviz-pro-max/light-emissive-practical-light-balance","name":"Emissive practical and scene-light balance","kind":"three","job":"lighting","line":"Separate the visible glowing surface of a practical fixture from the mechanism that illuminates nearby receivers, then tune them under one declared exposure. A lighting profile record: a creative proposal to adapt, not a rendered or measured result. Guidance only; no numeric defaults.","path":"skills/3dviz-pro-max/data/knowledge/lighting-profile/emissive-practical-light-balance.json","use":"python3 scripts/resolve.py knowledge.emissive-practical-light-balance"},{"id":"3dviz-pro-max/light-lighting-mood-dark-studio-product","name":"Dark studio product light from three soft boxes","kind":"three","job":"lighting","line":"Shape a product against a dark ground with three rectangular soft boxes whose reflections describe the form. A lighting profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/lighting-profile/lighting-mood-dark-studio-product.json","use":"python3 scripts/resolve.py knowledge.lighting-mood-dark-studio-product"},{"id":"3dviz-pro-max/light-lighting-mood-dawn-cool","name":"Cool dawn with a pale low key and standing mist","kind":"three","job":"lighting","line":"Keep the ambient cool and blue while a pale low key just begins to warm the surfaces it touches. A lighting profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/lighting-profile/lighting-mood-dawn-cool.json","use":"python3 scripts/resolve.py knowledge.lighting-mood-dawn-cool"},{"id":"3dviz-pro-max/light-lighting-mood-dusk-golden-hour","name":"Golden hour dusk with a low warm key","kind":"three","job":"lighting","line":"Set a low warm sun against a cool sky fill so long shadows describe the ground and every vertical picks up a rim. A lighting profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/lighting-profile/lighting-mood-dusk-golden-hour.json","use":"python3 scripts/resolve.py knowledge.lighting-mood-dusk-golden-hour"},{"id":"3dviz-pro-max/light-lighting-mood-fog-shafts","name":"Fog with visible light shafts through openings","kind":"three","job":"lighting","line":"Put a low key behind an occluder and raise the fog until the beams between the openings become the subject. A lighting profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/lighting-profile/lighting-mood-fog-shafts.json","use":"python3 scripts/resolve.py knowledge.lighting-mood-fog-shafts"},{"id":"3dviz-pro-max/light-lighting-mood-night-lantern","name":"Night lit by lanterns and a thin moon","kind":"three","job":"lighting","line":"Light a night scene from warm practicals at human height with only a thin cool moon as key, so the lanterns carry the composition. A lighting profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/lighting-profile/lighting-mood-night-lantern.json","use":"python3 scripts/resolve.py knowledge.lighting-mood-night-lantern"},{"id":"3dviz-pro-max/light-lighting-mood-noir-hard-key","name":"Noir single hard key with a controlled black level","kind":"three","job":"lighting","line":"Light from one hard source at a steep ratio and let most of the frame fall away, while holding the black level just above zero. A lighting profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/lighting-profile/lighting-mood-noir-hard-key.json","use":"python3 scripts/resolve.py knowledge.lighting-mood-noir-hard-key"},{"id":"3dviz-pro-max/light-lighting-mood-overcast-soft","name":"Overcast daylight with no cast shadows","kind":"three","job":"lighting","line":"Use a bright cloud deck as the whole source so form reads through soft gradients and occlusion instead of cast shadows. A lighting profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/lighting-profile/lighting-mood-overcast-soft.json","use":"python3 scripts/resolve.py knowledge.lighting-mood-overcast-soft"},{"id":"3dviz-pro-max/light-lighting-mood-underwater","name":"Underwater light from the surface with dense blue extinction","kind":"three","job":"lighting","line":"Drop the key almost overhead, tint everything toward blue-green and let dense fog remove anything past a short distance. A lighting profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/lighting-profile/lighting-mood-underwater.json","use":"python3 scripts/resolve.py knowledge.lighting-mood-underwater"},{"id":"3dviz-pro-max/light-lighting-time-of-day-sun-arc","name":"Time of day as a sun arc: elevation, colour and shadow length","kind":"three","job":"lighting","line":"Pick one sun elevation and azimuth for the hour you want, then read key color, intensity and shadow length off a single table so every light in the scene agrees with that one direction. A lighting profile record: a creative proposal to adapt, not a rendered or measured result. Carries a block of numeric defaults (palette, sky, fog, light rig, tone mapping and exposure, camera, materials, motion, post) to paste into a scene's LOOK.","path":"skills/3dviz-pro-max/data/knowledge/lighting-profile/lighting-time-of-day-sun-arc.json","use":"python3 scripts/resolve.py knowledge.lighting-time-of-day-sun-arc"},{"id":"3dviz-pro-max/light-local-reflection-probe-scope","name":"Local reflection and probe spatial scope","kind":"three","job":"lighting","line":"Choose and label the spatial approximation for local reflections or diffuse irradiance: global environment, positioned cubemap capture, diffuse probe or supported probe grid, without promising automatic GI or portable box projection. A lighting profile record: a creative proposal to adapt, not a rendered or measured result. Guidance only; no numeric defaults.","path":"skills/3dviz-pro-max/data/knowledge/lighting-profile/local-reflection-probe-scope.json","use":"python3 scripts/resolve.py knowledge.local-reflection-probe-scope"},{"id":"3dviz-pro-max/light-shared-display-color-management","name":"Working space, output transform and texture colour roles","kind":"three","job":"lighting","line":"Keep lighting computations in a linear working space, convert once at output, and label every texture as color or as data. A lighting profile record: a creative proposal to adapt, not a rendered or measured result. Guidance only; no numeric defaults.","path":"skills/3dviz-pro-max/data/knowledge/lighting-profile/shared-display-color-management.json","use":"python3 scripts/resolve.py knowledge.shared-display-color-management"},{"id":"3dviz-pro-max/light-shared-light-comparison-rig","name":"Fixed lighting rig for one-variable comparison","kind":"three","job":"lighting","line":"Freeze every lighting and output setting so that a difference between two views can only come from the thing being compared. A lighting profile record: a creative proposal to adapt, not a rendered or measured result. Guidance only; no numeric defaults.","path":"skills/3dviz-pro-max/data/knowledge/lighting-profile/shared-light-comparison-rig.json","use":"python3 scripts/resolve.py knowledge.shared-light-comparison-rig"},{"id":"3dviz-pro-max/light-shared-pbr-studio-environment","name":"Environment-led studio lighting for physically based materials","kind":"three","job":"lighting","line":"Let a controlled environment carry most of the illumination, and add discrete lights only for the shaping the environment cannot supply. A lighting profile record: a creative proposal to adapt, not a rendered or measured result. Guidance only; no numeric defaults.","path":"skills/3dviz-pro-max/data/knowledge/lighting-profile/shared-pbr-studio-environment.json","use":"python3 scripts/resolve.py knowledge.shared-pbr-studio-environment"},{"id":"3dviz-pro-max/light-shared-shadow-volume-fit","name":"Fitting the shadow volume to the scene that needs it","kind":"three","job":"lighting","line":"Size the shadow-casting volume to the region that actually needs shadows, then spend resolution and bias inside that budget. A lighting profile record: a creative proposal to adapt, not a rendered or measured result. Guidance only; no numeric defaults.","path":"skills/3dviz-pro-max/data/knowledge/lighting-profile/shared-shadow-volume-fit.json","use":"python3 scripts/resolve.py knowledge.shared-shadow-volume-fit"},{"id":"3dviz-pro-max/light-shared-stylized-outdoor-daylight","name":"Stylised outdoor daylight with one committed sun","kind":"three","job":"lighting","line":"Commit to a single sun direction and a sky fill, and keep every shadow, highlight and painted-in cue consistent with it. A lighting profile record: a creative proposal to adapt, not a rendered or measured result. Guidance only; no numeric defaults.","path":"skills/3dviz-pro-max/data/knowledge/lighting-profile/shared-stylized-outdoor-daylight.json","use":"python3 scripts/resolve.py knowledge.shared-stylized-outdoor-daylight"},{"id":"3dviz-pro-max/light-shared-surface-feature-inspection-light","name":"Inspection lighting for surface features and normals","kind":"three","job":"lighting","line":"Use a deliberately unflattering light and a normal-revealing pass to find geometry defects that a good-looking hero light hides. A lighting profile record: a creative proposal to adapt, not a rendered or measured result. Guidance only; no numeric defaults.","path":"skills/3dviz-pro-max/data/knowledge/lighting-profile/shared-surface-feature-inspection-light.json","use":"python3 scripts/resolve.py knowledge.shared-surface-feature-inspection-light"},{"id":"3dviz-pro-max/light-shared-transmissive-enclosure-light","name":"Lighting a closed transmissive volume","kind":"three","job":"lighting","line":"Give a transparent enclosure something worth transmitting: a lit backdrop, a lit interior and edges that stay readable. A lighting profile record: a creative proposal to adapt, not a rendered or measured result. Guidance only; no numeric defaults.","path":"skills/3dviz-pro-max/data/knowledge/lighting-profile/shared-transmissive-enclosure-light.json","use":"python3 scripts/resolve.py knowledge.shared-transmissive-enclosure-light"},{"id":"3dviz-pro-max/light-shared-unlit-quantitative-encoding","name":"Unlit encoding when colour carries the measurement","kind":"three","job":"lighting","line":"When color encodes a quantity, remove shading from the encoded surface so that illumination cannot be mistaken for value. A lighting profile record: a creative proposal to adapt, not a rendered or measured result. Guidance only; no numeric defaults.","path":"skills/3dviz-pro-max/data/knowledge/lighting-profile/shared-unlit-quantitative-encoding.json","use":"python3 scripts/resolve.py knowledge.shared-unlit-quantitative-encoding"},{"id":"3dviz-pro-max/light-temporal-shadow-exposure-stability","name":"Temporal shadow and exposure stability","kind":"three","job":"lighting","line":"Keep moving-camera and moving-light results stable by fitting shadow coverage, tuning bias against visible geometry, declaring shadow-map invalidation and holding exposure constant during comparisons. A lighting profile record: a creative proposal to adapt, not a rendered or measured result. Guidance only; no numeric defaults.","path":"skills/3dviz-pro-max/data/knowledge/lighting-profile/temporal-shadow-exposure-stability.json","use":"python3 scripts/resolve.py knowledge.temporal-shadow-exposure-stability"}]}]}