@imgcli/mcp 0.0.0-stage → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +28 -2
  3. package/THIRD_PARTY_NOTICES +26 -0
  4. package/catalog.json +70 -0
  5. package/dist/access.js +60 -0
  6. package/dist/catalog-schema.js +115 -0
  7. package/dist/catalog.js +144 -0
  8. package/dist/index.js +100 -0
  9. package/dist/rules.js +22 -0
  10. package/package.json +35 -4
package/catalog.json ADDED
@@ -0,0 +1,70 @@
1
+ {
2
+ "schemaVersion": 1,
3
+ "revision": "287cdd24535e9c31",
4
+ "components": [
5
+ {"slug":"agent-steps","title":"Agent Steps","description":"AI agent steps animation: a streaming task log with spinner and checkmarks for agent demos. An agent narrating its own work: the prompt lands in a pill, and under it a log writes itself one line at a time — each step running with a faint spinning globe, then flipping to past tense behind a check while the whole column steps up a row so the live line always sits on the centre. When the work is done the column swells and clears, and the last line slides to the middle and becomes the answer. Every proportion and every curve is fitted from frame measurements.","category":"ai-input","tier":"free","aliases":[],"docsPath":"/docs/ai-input/agent-steps","notes":"pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette and a bare Remotion render is black.","exportName":"AgentSteps","target":"components/imgcli/agent-steps.tsx","importPath":"@/components/imgcli/agent-steps","files":["components/imgcli/agent-steps.tsx"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"query","type":"string | undefined","required":false,"defaultExpression":"\"A 30-second launch video for a Next.js analytics dashboard\""},{"name":"steps","type":"string | AgentStep[] | undefined","required":false,"defaultExpression":"DEFAULT_STEPS"},{"name":"result","type":"string | undefined","required":false,"defaultExpression":"\"Rendered 900 frames\""},{"name":"queryHold","type":"number | undefined","required":false,"defaultExpression":"0.683"},{"name":"stepHold","type":"number | undefined","required":false,"defaultExpression":"0.45"},{"name":"finalHold","type":"number | undefined","required":false,"defaultExpression":"0.283"},{"name":"paperColor","type":"string | undefined","required":false},{"name":"glowColor","type":"string | undefined","required":false},{"name":"glowX","type":"number | undefined","required":false,"defaultExpression":"0.858"},{"name":"glowY","type":"number | undefined","required":false,"defaultExpression":"0.854"},{"name":"glowRadius","type":"number | undefined","required":false,"defaultExpression":"0.465"},{"name":"pillColor","type":"string | undefined","required":false},{"name":"inkColor","type":"string | undefined","required":false},{"name":"stepColor","type":"string | undefined","required":false},{"name":"accentColor","type":"string | undefined","required":false},{"name":"centerY","type":"number | undefined","required":false,"defaultExpression":"0.5"},{"name":"fontFamily","type":"string | undefined","required":false},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":160,"controls":{"query":{"type":"text","label":"Prompt","default":"A 30-second launch video for a Next.js analytics dashboard"},"steps":{"type":"text","label":"Steps (running > done; …)","default":"Searching the registry… > Searched the registry @globe; Looking up components matching “dashboard”… > Looked up 6 matching components; Reading the docs… > Read 4 component docs @globe; Checking available props… > Checked available props; Building the timeline… > Set 9 scene timings; Rendering frames… > Rendered frames"},"result":{"type":"text","label":"Result","default":"Rendered 900 frames"},"stepHold":{"type":"number","label":"Seconds per step","default":0.45,"min":0.15,"max":2,"step":0.05},"queryHold":{"type":"number","label":"Prompt hold","default":0.683,"min":0.2,"max":3,"step":0.05},"finalHold":{"type":"number","label":"Last step hold","default":0.283,"min":0.1,"max":2,"step":0.05},"paperColor":{"type":"color","label":"Page","default":"#faf9f6"},"glowColor":{"type":"color","label":"Wash","default":"rgb(228, 230, 240)"},"glowRadius":{"type":"number","label":"Wash radius","default":0.465,"min":0,"max":1.2,"step":0.005},"pillColor":{"type":"color","label":"Pill","default":"#ffffff"},"inkColor":{"type":"color","label":"Prompt ink","default":"#141414"},"stepColor":{"type":"color","label":"Step ink","default":"#6e6a63"},"accentColor":{"type":"color","label":"Check","default":"#3072db"},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":1,"max":4,"step":0.25}}},"sourceHash":"7a2fee8c5aef","installHash":"cfdb942a3c59216d","measurement":{"sourceHash":"7a2fee8c5aef","width":1280,"height":720,"fps":30,"durationInFrames":160,"settle":{"base":142,"baseWords":9,"perWord":0},"copy":{"prop":"result","pxPerChar":47.63,"maxChars":28}}},
6
+ {"slug":"announce-title","title":"Announce Title","description":"Launch title animation, product announcement intro with kinetic typography. A four-shot launch title: the eyebrow rushes past the camera on a receding type plane and lands on a colour field, the name assembles word by word on paper, and a macro pan across the tagline cuts wide as the line builds itself last word first while a white sweep drains it out of colour. Content, palette and the mark that leads the closing line are all props.","category":"scenes","tier":"free","aliases":[],"docsPath":"/docs/scenes/announce-title","notes":"its colours are explicit props (`paperColor`, `titleColor`, `voidColor`, …) rather than a palette, and it takes no `mode`.","exportName":"AnnounceTitle","target":"components/imgcli/announce-title.tsx","importPath":"@/components/imgcli/announce-title","files":["components/imgcli/announce-title.tsx"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"fontFamily","type":"string | undefined","required":false},{"name":"eyebrow","type":"string | undefined","required":false,"defaultExpression":"\"Introducing\""},{"name":"title","type":"string | undefined","required":false,"defaultExpression":"\"snapcn 1.0\""},{"name":"tagline","type":"string | undefined","required":false,"defaultExpression":"\"Ready-made scenes for Remotion, in one command.\""},{"name":"voidColor","type":"string | undefined","required":false,"defaultExpression":"\"#100022\""},{"name":"fieldColor","type":"string | undefined","required":false,"defaultExpression":"\"#5600f5\""},{"name":"paperColor","type":"string | undefined","required":false,"defaultExpression":"\"#fcfcfa\""},{"name":"titleColor","type":"string | undefined","required":false,"defaultExpression":"\"#4800c9\""},{"name":"nightColor","type":"string | undefined","required":false,"defaultExpression":"\"#000028\""},{"name":"glowColor","type":"string | undefined","required":false,"defaultExpression":"\"#08ff4b\""},{"name":"glowStrength","type":"number | undefined","required":false,"defaultExpression":"0.139"},{"name":"taglineColor","type":"string | undefined","required":false,"defaultExpression":"\"#f2f8ff\""},{"name":"inkColor","type":"string | undefined","required":false,"defaultExpression":"\"#ffffff\""},{"name":"symbolPath","type":"string | undefined","required":false,"defaultExpression":"MARK_PATH"},{"name":"symbolColors","type":"string | string[] | undefined","required":false},{"name":"symbolScale","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":170,"controls":{"eyebrow":{"type":"text","label":"Eyebrow","default":"Introducing"},"title":{"type":"text","label":"Title","default":"snapcn 1.0"},"tagline":{"type":"text","label":"Tagline","default":"Ready-made scenes for Remotion, in one command."},"symbolPath":{"type":"text","label":"Symbol path","default":"M15.757 15.459c-3.324 0.816 -6.07 2.966 -7.563 5.911 -1.194 2.388 -1.174 1.672 -1.174 24.66 0 19.982 0.02 21.077 0.378 22.132 0.955 2.926 2.946 4.498 6.588 5.215 1.99 0.398 2.528 0.657 3.702 1.732 1.055 0.975 1.473 2.169 1.473 4.219 0.02 2.408 0.836 3.901 2.647 4.856l1.035 0.537 19.505 0.06c17.574 0.06 19.624 0.02 20.739 -0.259 1.493 -0.418 2.647 -1.333 3.403 -2.766l0.537 -1.015 0.06 -6.269c0.04 -3.443 0.04 -6.807 0 -7.444l-0.06 -1.194 -0.617 0.995c-0.717 1.174 -2.01 2.289 -3.383 2.906l-0.975 0.458 -16.121 0.06c-11.763 0.04 -16.42 -0 -17.216 -0.159 -2.548 -0.557 -5.135 -2.408 -6.468 -4.657 -1.294 -2.189 -1.314 -2.548 -1.254 -16.44l0.06 -12.439 0.478 -1.154c0.876 -2.209 2.926 -4.18 5.374 -5.155l1.115 -0.458 16.519 -0.06c16.101 -0.04 16.539 -0.04 17.813 0.358 1.592 0.498 2.966 1.473 3.941 2.826l0.736 1.035 0.06 -6.648c0.06 -7.304 -0.06 -8.319 -1.115 -9.832 -0.597 -0.876 -1.95 -1.811 -3.025 -2.11 -0.438 -0.119 -9.096 -0.199 -23.386 -0.179 -18.37 0.02 -22.908 0.06 -23.804 0.279zM79.665 31.819c-6.508 3.901 -11.902 7.185 -11.981 7.304 -0.08 0.119 -0.139 5.055 -0.1 10.947l0.04 10.748 2.886 1.811c1.592 0.995 4.14 2.587 5.672 3.523 1.533 0.935 5.632 3.463 9.096 5.613 3.463 2.15 6.488 3.901 6.707 3.901 0.219 -0 0.537 -0.139 0.697 -0.318 0.279 -0.279 0.318 -2.806 0.318 -24.958 0 -15.544 -0.08 -24.839 -0.199 -25.157 -0.139 -0.398 -0.318 -0.517 -0.736 -0.517 -0.358 0.02 -4.617 2.448 -12.399 7.105z"},"symbolColors":{"type":"text","label":"Symbol colours (comma-separated)","default":""},"symbolScale":{"type":"number","label":"Symbol size","default":1,"min":0,"max":3,"step":0.05},"fieldColor":{"type":"color","label":"Colour field","default":"#5600f5"},"titleColor":{"type":"color","label":"Title ink","default":"#4800c9"},"paperColor":{"type":"color","label":"Title paper","default":"#fcfcfa"},"voidColor":{"type":"color","label":"Opening ground","default":"#100022"},"nightColor":{"type":"color","label":"Closing ground","default":"#000028"},"glowColor":{"type":"color","label":"Closing glow","default":"#08ff4b"},"glowStrength":{"type":"number","label":"Glow strength","default":0.139,"min":0,"max":0.4,"step":0.005},"taglineColor":{"type":"color","label":"Tagline ink","default":"#f2f8ff"},"inkColor":{"type":"color","label":"Shot ink","default":"#ffffff"},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":1,"max":4,"step":0.25}}},"sourceHash":"a97092e27564","installHash":"07e9e5e41d22b92d","measurement":{"sourceHash":"a97092e27564","width":1280,"height":720,"fps":30,"durationInFrames":170,"settle":{"base":149,"baseWords":1,"perWord":0},"copy":{"prop":"title","pxPerChar":128.1,"maxChars":10}}},
7
+ {"slug":"answer-highlight","title":"Answer Highlight","description":"AI answer highlight animation, ChatGPT-style chat response with a text selection. A question in a pill, an answer that writes itself a word at a time, and then the beat the whole shot is for: a caret lands mid-sentence and a selection band drags across one statement, wrapping the line the way a real one does — and settles onto the single word that matters. Name the sentence and the word as strings; the run is found in the answer for you, punctuation and all.","category":"ai-input","tier":"free","aliases":[],"docsPath":"/docs/ai-input/answer-highlight","notes":"pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette and a bare Remotion render is black.","exportName":"AnswerHighlight","target":"components/imgcli/answer-highlight.tsx","importPath":"@/components/imgcli/answer-highlight","files":["components/imgcli/answer-highlight.tsx"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"question","type":"string | undefined","required":false,"defaultExpression":"\"How should we structure the demo video?\""},{"name":"answer","type":"string | undefined","required":false,"defaultExpression":"DEFAULT_ANSWER"},{"name":"statement","type":"string | undefined","required":false,"defaultExpression":"\"keep the timeline declarative\""},{"name":"word","type":"string | undefined","required":false,"defaultExpression":"\"declarative\""},{"name":"questionHold","type":"number | undefined","required":false,"defaultExpression":"0.6"},{"name":"beforeDrag","type":"number | undefined","required":false,"defaultExpression":"0.45"},{"name":"beforeWord","type":"number | undefined","required":false,"defaultExpression":"0.6"},{"name":"wordStep","type":"number | undefined","required":false,"defaultExpression":"WORD_STEP_S"},{"name":"dragStep","type":"number | undefined","required":false,"defaultExpression":"BAND_STEP_S"},{"name":"paperColor","type":"string | undefined","required":false},{"name":"pillColor","type":"string | undefined","required":false},{"name":"questionColor","type":"string | undefined","required":false},{"name":"answerColor","type":"string | undefined","required":false},{"name":"accentColor","type":"string | undefined","required":false},{"name":"centerY","type":"number | undefined","required":false,"defaultExpression":"0.5"},{"name":"fontFamily","type":"string | undefined","required":false},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":190,"controls":{"question":{"type":"text","label":"Question","default":"How should we structure the demo video?"},"answer":{"type":"text","label":"Answer","default":"Build one composition per scene and keep the timeline declarative, so the same props always render the same frames. Anything that reads the clock at render time is a bug you will find in the export."},"statement":{"type":"text","label":"Statement to select","default":"keep the timeline declarative"},"word":{"type":"text","label":"Word to pick out","default":"declarative"},"questionHold":{"type":"number","label":"Question hold","default":0.6,"min":0.2,"max":3,"step":0.05},"wordStep":{"type":"number","label":"Seconds per word","default":0.055,"min":0.02,"max":0.2,"step":0.005},"beforeDrag":{"type":"number","label":"Pause before the drag","default":0.45,"min":0,"max":2,"step":0.05},"dragStep":{"type":"number","label":"Drag speed (s/word)","default":0.11,"min":0.03,"max":0.4,"step":0.005},"beforeWord":{"type":"number","label":"Pause before the word","default":0.6,"min":0,"max":2,"step":0.05},"paperColor":{"type":"color","label":"Page","default":"#faf9f6"},"pillColor":{"type":"color","label":"Question pill","default":"#ffffff"},"questionColor":{"type":"color","label":"Question ink","default":"#6e6a63"},"answerColor":{"type":"color","label":"Answer ink","default":"#141414"},"accentColor":{"type":"color","label":"Selection","default":"#3072db"},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":1,"max":4,"step":0.25}}},"sourceHash":"70f135821c46","installHash":"bc306578c49b140d","measurement":{"sourceHash":"70f135821c46","width":1280,"height":720,"fps":30,"durationInFrames":190,"settle":{"base":132,"baseWords":36,"perWord":1.65},"copy":{"prop":"word","pxPerChar":66.55,"maxChars":11}}},
8
+ {"slug":"answer-stream","title":"Answer Stream","description":"Streaming AI response animation, from the send button to the answer typing in. The beat after send: a macro shot on the button that cuts — hard, on its fastest frame — to the answer building itself on the page, while the camera pulls back 1.364× about a focal point above the frame to keep up with it. Every word arrives hot and cools to the foreground.","category":"ai-input","tier":"free","aliases":[],"docsPath":"/docs/ai-input/answer-stream","notes":"pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette and a bare Remotion render is black.","exportName":"AnswerStream","target":"components/imgcli/answer-stream.tsx","importPath":"@/components/imgcli/answer-stream","files":["components/imgcli/answer-stream.tsx"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json","https://imgcli.com/r/input.json"],"props":[{"name":"question","type":"string | undefined","required":false,"defaultExpression":"\"How do I rank higher in AI answers?\""},{"name":"answer","type":"string | undefined","required":false,"defaultExpression":"\"Analysing your prompt gaps…\\nFound 27 prompts you should rank for and don't yet, so your name shows up everywhere AI looks.\""},{"name":"headline","type":"string | undefined","required":false,"defaultExpression":"\"Your AI visibility score: 34% — here's how I'd fix it:\""},{"name":"cards","type":"AnswerCard[] | undefined","required":false,"defaultExpression":"DEFAULT_CARDS"},{"name":"model","type":"string | undefined","required":false,"defaultExpression":"\"Auto\""},{"name":"commitAt","type":"number | undefined","required":false,"defaultExpression":"1.0"},{"name":"cutAt","type":"number | undefined","required":false,"defaultExpression":"1.284"},{"name":"pullbackAt","type":"number | undefined","required":false,"defaultExpression":"1.933"},{"name":"pullbackDuration","type":"number | undefined","required":false,"defaultExpression":"1.1"},{"name":"wordsPerSecond","type":"number | undefined","required":false,"defaultExpression":"25"},{"name":"coolSeconds","type":"number | undefined","required":false,"defaultExpression":"0.23"},{"name":"macroZoom","type":"number | undefined","required":false,"defaultExpression":"2.36"},{"name":"pullbackFrom","type":"number | undefined","required":false,"defaultExpression":"1.364"},{"name":"pullbackUndershoot","type":"number | undefined","required":false,"defaultExpression":"0.028"},{"name":"focusX","type":"number | undefined","required":false,"defaultExpression":"0.5"},{"name":"focusY","type":"number | undefined","required":false,"defaultExpression":"-0.548"},{"name":"blur","type":"number | undefined","required":false,"defaultExpression":"3"},{"name":"accentColor","type":"string | undefined","required":false},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false},{"name":"fontFamily","type":"string | undefined","required":false},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":150,"controls":{"question":{"type":"text","label":"Question","default":"How do I rank higher in AI answers?"},"answer":{"type":"text","label":"Answer","default":"Analysing your prompt gaps…\nFound 27 prompts you should rank for and don't yet, so your name shows up everywhere AI looks."},"headline":{"type":"text","label":"Headline","default":"Your AI visibility score: 34% — here's how I'd fix it:"},"model":{"type":"text","label":"Model","default":"Auto"},"commitAt":{"type":"number","label":"Commit at (s)","default":1,"min":0,"max":3,"step":0.01},"cutAt":{"type":"number","label":"Cut at (s)","default":1.284,"min":0.2,"max":4,"step":0.01},"pullbackAt":{"type":"number","label":"Pull back at (s)","default":1.933,"min":0.5,"max":5,"step":0.01},"pullbackDuration":{"type":"number","label":"Pull back for (s)","default":1.1,"min":0.2,"max":3,"step":0.05},"pullbackUndershoot":{"type":"number","label":"Undershoot","default":0.028,"min":0,"max":0.2,"step":0.002},"pullbackFrom":{"type":"number","label":"Pull back from","default":1.364,"min":1,"max":3,"step":0.005},"focusY":{"type":"number","label":"Focus Y","default":-0.548,"min":-2,"max":1,"step":0.005},"macroZoom":{"type":"number","label":"Macro zoom","default":2.36,"min":1,"max":5,"step":0.01},"wordsPerSecond":{"type":"number","label":"Words / second","default":25,"min":4,"max":60,"step":1},"coolSeconds":{"type":"number","label":"Cool over (s)","default":0.23,"min":0,"max":1.5,"step":0.01},"blur":{"type":"number","label":"Motion blur","default":3,"min":0,"max":20,"step":0.5},"accentColor":{"type":"color","label":"Accent","default":"#266DF0"},"mode":{"type":"select","label":"Mode","default":"light","options":["light","dark"]},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"da229660a8ba","installHash":"d716e849e04209a9","measurement":{"sourceHash":"da229660a8ba","width":1280,"height":720,"fps":30,"durationInFrames":150,"settle":{"base":120,"baseWords":8,"perWord":0},"copy":{"prop":"model","pxPerChar":268.25,"maxChars":9}}},
9
+ {"slug":"block-wordmark","title":"Block Wordmark","description":"Logo sting and wordmark animation: blocks build into your brand name. A wordmark builds out of solid blocks — a square scales in, a coloured deck fans out around it and winds back, the stack collapses and stretches into one block per letter, then each block flashes a colour and swaps for its real letterform.","category":"logos","tier":"free","aliases":[],"docsPath":"/docs/logos/block-wordmark","notes":"pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette and a bare Remotion render is black.","exportName":"BlockWordmark","target":"components/imgcli/block-wordmark.tsx","importPath":"@/components/imgcli/block-wordmark","files":["components/imgcli/block-wordmark.tsx"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"text","type":"string | undefined","required":false,"defaultExpression":"\"base\""},{"name":"fontSize","type":"number | undefined","required":false,"defaultExpression":"160"},{"name":"fontFamily","type":"string | undefined","required":false},{"name":"fontWeight","type":"string | number | undefined","required":false,"defaultExpression":"400"},{"name":"color","type":"string | undefined","required":false},{"name":"colors","type":"string | string[] | undefined","required":false},{"name":"background","type":"string | undefined","required":false},{"name":"blockGap","type":"number | undefined","required":false,"defaultExpression":"0.093"},{"name":"cornerRadius","type":"number | undefined","required":false,"defaultExpression":"0.18"},{"name":"ascenderRatio","type":"number | undefined","required":false},{"name":"ascenderStemRatio","type":"number | undefined","required":false},{"name":"blockSizing","type":"\"square\" | \"glyph\" | undefined","required":false,"defaultExpression":"\"square\""},{"name":"maxWidth","type":"number | undefined","required":false,"defaultExpression":"0.92"},{"name":"cards","type":"number | undefined","required":false,"defaultExpression":"6"},{"name":"cardStagger","type":"number | undefined","required":false,"defaultExpression":"2"},{"name":"spinTurns","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"liftRatio","type":"number | undefined","required":false,"defaultExpression":"0.665"},{"name":"growDuration","type":"number | undefined","required":false,"defaultExpression":"9"},{"name":"spinDuration","type":"number | undefined","required":false,"defaultExpression":"33"},{"name":"splitDuration","type":"number | undefined","required":false,"defaultExpression":"5"},{"name":"splitStagger","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"ascenderDuration","type":"number | undefined","required":false,"defaultExpression":"12"},{"name":"holdDuration","type":"number | undefined","required":false,"defaultExpression":"54"},{"name":"flashStagger","type":"number | undefined","required":false,"defaultExpression":"4"},{"name":"flashDuration","type":"number | undefined","required":false,"defaultExpression":"3"},{"name":"flashToSwap","type":"number | undefined","required":false,"defaultExpression":"5"},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"className","type":"string | undefined","required":false},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":150,"controls":{"text":{"type":"text","label":"Wordmark","default":"snapcn"},"color":{"type":"color","label":"Ink","default":"#0000FF"},"colors":{"type":"text","label":"Deck & flash colours (comma-separated)","default":"#3072db, #1a4487, #6b9be8, #092148, #9cbdf2"},"background":{"type":"color","label":"Background","default":"#faf9f6"},"fontSize":{"type":"number","label":"Font size","default":160,"min":48,"max":320,"step":4},"fontWeight":{"type":"select","label":"Font weight","default":"400","options":["400"]},"blockSizing":{"type":"select","label":"Block sizing","default":"square","options":["square","glyph"]},"blockGap":{"type":"number","label":"Block gap (× side)","default":0.093,"min":0,"max":0.4,"step":0.005},"cornerRadius":{"type":"number","label":"Corner radius (× side)","default":0.18,"min":0,"max":0.5,"step":0.01},"cards":{"type":"number","label":"Deck cards","default":6,"min":2,"max":12,"step":1},"spinDuration":{"type":"number","label":"Shuffle frames","default":33,"min":12,"max":90,"step":1},"holdDuration":{"type":"number","label":"Hold before resolve","default":54,"min":0,"max":150,"step":2},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":1,"max":4,"step":0.25}}},"sourceHash":"049313c08a85","installHash":"e4b7be3a1a28eb70","measurement":{"sourceHash":"049313c08a85","width":1280,"height":720,"fps":30,"durationInFrames":150,"settle":{"base":117,"baseWords":1,"perWord":0},"copy":{"prop":"text","pxPerChar":119.5,"maxChars":6}}},
10
+ {"slug":"bloom-lockup","title":"Bloom Lockup","description":"Logo reveal in four seconds. A wall of finished work blooms outward from your logo, cuts in tight on it, then bends away through a lens and a flash while the logo rises to take its wordmark and tagline. Measured frame by frame off a reference recording.","category":"scenes","tier":"free","aliases":[],"docsPath":"/docs/scenes/bloom-lockup","notes":"120 frames at 30fps; paints its own background. Pass your logo as SVG paths (logo={{ width, height, shapes }}) and your screens as images.","exportName":"BloomLockup","target":"components/imgcli/bloom-lockup/index.tsx","importPath":"@/components/imgcli/bloom-lockup","files":["components/imgcli/bloom-lockup/index.tsx","components/imgcli/bloom-lockup/data.ts"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"wordmark","type":"string | undefined","required":false},{"name":"tagline","type":"string | undefined","required":false},{"name":"logo","type":"{ width: number; height: number; shapes: readonly string[]; fill?: number; } | undefined","required":false},{"name":"images","type":"readonly string[] | undefined","required":false},{"name":"imagesA","type":"readonly string[] | undefined","required":false},{"name":"imagesB","type":"readonly string[] | undefined","required":false},{"name":"wordmarkFont","type":"string | undefined","required":false},{"name":"wordmarkWeight","type":"number | undefined","required":false},{"name":"wordmarkSize","type":"number | undefined","required":false},{"name":"speed","type":"number | undefined","required":false},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":120,"controls":{"wordmark":{"type":"text","label":"Wordmark","default":"snapcn"},"tagline":{"type":"text","label":"Tagline","default":"snapcn.dev"},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"5efbc4ee6354","installHash":"db6454b5323ca307","measurement":{"sourceHash":"5efbc4ee6354","width":1280,"height":720,"fps":30,"durationInFrames":120,"settle":{"base":111,"baseWords":1,"perWord":0},"copy":{"prop":"wordmark","pxPerChar":213.5,"maxChars":6}}},
11
+ {"slug":"brand-wheel","title":"Brand Wheel","description":"Rotating logos text: a lead word and a wheel of brand pills that rolls through the platforms you ship to, blurred rows above and below, then a cursor clicks the last one. Motion measured frame by frame from a recording.","category":"text","tier":"free","aliases":[],"docsPath":"/docs/text/brand-wheel","notes":"lead is the fixed word; items is the reel, comma separated, top to bottom, and it comes to rest on the LAST one. Known brands (X, YouTube, LinkedIn, Instagram, TikTok, Product Hunt, Google, Shopify, Meta, Stripe) get their mark; anything else gets its initial. Six items run 139 frames; each extra item adds 20 (brandWheelDuration).","exportName":"BrandWheel","target":"components/imgcli/brand-wheel/index.tsx","importPath":"@/components/imgcli/brand-wheel","files":["components/imgcli/brand-wheel/index.tsx","components/imgcli/brand-wheel/data.ts"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"lead","type":"string | undefined","required":false,"defaultExpression":"\"launch on\""},{"name":"items","type":"string | undefined","required":false,"defaultExpression":"\"X, YouTube, LinkedIn, Instagram, TikTok, Product Hunt\""},{"name":"accent","type":"string | undefined","required":false},{"name":"cursor","type":"boolean | undefined","required":false,"defaultExpression":"true"},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false,"defaultExpression":"\"light\""},{"name":"fontFamily","type":"string | undefined","required":false,"defaultExpression":"\"Default\""}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":139,"controls":{"lead":{"type":"text","label":"Lead word","default":"launch on"},"items":{"type":"text","label":"Brands (comma separated)","default":"X, YouTube, LinkedIn, Instagram, TikTok, Product Hunt"},"cursor":{"type":"boolean","label":"Click the last one","default":true},"mode":{"type":"select","label":"Theme","default":"light","options":["light","dark"]},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"76a85d609054","installHash":"b130ade9a0245410"},
12
+ {"slug":"button-press","title":"Button Press","description":"Cursor clicks a button: a cursor walks onto a split action button (label, divider, chevron), it darkens on hover, gives on press, spins while pending and lands on a drawn tick. The deploy, publish or send beat of every launch video. Built on cursor-track.","category":"cursor","tier":"free","aliases":[],"docsPath":"/docs/cursor/button-press","notes":"label, pending and done are the three states; width is fixed so the button never reflows. Pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette.","exportName":"ButtonPress","target":"components/imgcli/button-press.tsx","importPath":"@/components/imgcli/button-press","files":["components/imgcli/button-press.tsx"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json","https://imgcli.com/r/cursor-track.json"],"props":[{"name":"label","type":"string | undefined","required":false,"defaultExpression":"\"Deploy\""},{"name":"pending","type":"string | undefined","required":false,"defaultExpression":"\"Deploying…\""},{"name":"done","type":"string | undefined","required":false,"defaultExpression":"\"Deployed\""},{"name":"width","type":"number | undefined","required":false,"defaultExpression":"320"},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"className","type":"string | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":126,"controls":{"label":{"type":"text","label":"Label","default":"Deploy"},"pending":{"type":"text","label":"Pending","default":"Deploying…"},"done":{"type":"text","label":"Done","default":"Deployed"},"width":{"type":"number","label":"Width","default":320,"min":160,"max":600,"step":10},"mode":{"type":"select","label":"Theme","default":"light","options":["light","dark"]},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"8a55df8d5b56","installHash":"5fa59a02e31f501a"},
13
+ {"slug":"capture-reveal","title":"Capture Reveal","description":"Screenshot capture animation: a progress toast counts to 100% over a browser window. The window drops away, the toast confirms the copy, and a two-line headline rises from behind it.","category":"screens","tier":"free","aliases":[],"docsPath":"/docs/screens/capture-reveal","notes":"set src to replace the sample screenshot, use | for a line break in headline, and set capturing and copied for the toast messages.","exportName":"CaptureReveal","target":"components/imgcli/capture-reveal.tsx","importPath":"@/components/imgcli/capture-reveal","files":["components/imgcli/capture-reveal.tsx"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"headline","type":"string | undefined","required":false,"defaultExpression":"\"capture it | in one take\""},{"name":"capturing","type":"string | undefined","required":false,"defaultExpression":"\"Capturing frame...\""},{"name":"copied","type":"string | undefined","required":false,"defaultExpression":"\"Frame copied.\""},{"name":"src","type":"string | undefined","required":false,"defaultExpression":"\"https://media.snapcn.dev/stills/capture-reveal-window.webp\""},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false,"defaultExpression":"\"light\""},{"name":"fontFamily","type":"string | undefined","required":false,"defaultExpression":"\"Default\""}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":130,"controls":{"headline":{"type":"text","label":"Headline (| breaks a line)","default":"capture it | in one take"},"capturing":{"type":"text","label":"Toast while capturing","default":"Capturing frame..."},"copied":{"type":"text","label":"Toast when done","default":"Frame copied."},"src":{"type":"image","label":"Screenshot","default":"https://media.snapcn.dev/stills/capture-reveal-window.webp"},"mode":{"type":"select","label":"Theme","default":"light","options":["light","dark"]},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"14b44a806232","installHash":"fd96b599a1ec474a","measurement":{"sourceHash":"14b44a806232","width":1280,"height":720,"fps":30,"durationInFrames":130,"settle":{"base":114,"baseWords":6,"perWord":0},"copy":{"prop":"copied","pxPerChar":60.77,"maxChars":19}}},
14
+ {"slug":"card-rail","title":"Card Rail","description":"Card carousel animation: cards flicked sideways on a tilted 3D plane. A rail of cards flicked sideways across a tilted plane. The cards do not crawl past on a loop — they are flicked: the rail leaves at speed, decelerates for well over a second and comes to rest about a card further along, the way a carousel behaves under a thumb rather than under a timer. The plane is not flat to the camera either. Measured on a recording's card edges, the horizontal scale grows 0.000825 per pixel of height about the frame's own centre line, so the foot of a card is a fifth wider than its head while horizontals stay horizontal and the type stays upright — which is why a row of plain rectangles reads as a surface receding into the frame rather than as a filmstrip.","category":"scenes","tier":"free","aliases":[],"docsPath":"/docs/scenes/card-rail","notes":"images, titles, notes and tags are parallel lists split by `|` (not by comma: a data: URL has one of its own), one entry per card, and the rail repeats them rather than running out. Leave the text fields blank and the picture becomes the whole card, which is how a card designed elsewhere is handed in as one image. heading holds the top of the frame; from is the frame the flick starts on and may be negative to open mid-flight; offset is where the rail sits before it moves. backdrop takes two colour stops or one picture. Pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette.","exportName":"CardRail","target":"components/imgcli/card-rail.tsx","importPath":"@/components/imgcli/card-rail","files":["components/imgcli/card-rail.tsx"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"cards","type":"string | readonly RailCard[] | undefined","required":false,"defaultExpression":"DEFAULT_CARDS"},{"name":"heading","type":"string | undefined","required":false,"defaultExpression":"\"Browse scenes\""},{"name":"from","type":"number | undefined","required":false,"defaultExpression":"0"},{"name":"flicks","type":"number | undefined","required":false,"defaultExpression":"3"},{"name":"every","type":"number | undefined","required":false,"defaultExpression":"30"},{"name":"offset","type":"number | undefined","required":false,"defaultExpression":"0"},{"name":"backdrop","type":"string | undefined","required":false,"defaultExpression":"\"\""},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false,"defaultExpression":"\"light\""},{"name":"fontFamily","type":"string | undefined","required":false,"defaultExpression":"\"Default\""}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":108,"controls":{"heading":{"type":"text","label":"Title","default":"Browse scenes"},"cards":{"type":"text","label":"Cards (picture > title > small print > tag | …)","default":"https://media.snapcn.dev/demos/posters/orbit-gallery.webp > Orbit Gallery > Scene · 300 frames > @snapcn/orbit-gallery | https://media.snapcn.dev/demos/posters/moodboard-reveal.webp > Moodboard Reveal > Scene · 150 frames > @snapcn/moodboard-reveal | https://media.snapcn.dev/demos/posters/hero-launch.webp > Hero Launch > Scene · 170 frames > @snapcn/hero-launch | https://media.snapcn.dev/demos/posters/phone-frame.webp > Phone Frame > Scene · 240 frames > @snapcn/phone-frame | https://media.snapcn.dev/demos/posters/count-grid.webp > Count Grid > Scene · 47 frames > @snapcn/count-grid | https://media.snapcn.dev/demos/posters/terminal-simulator.webp > Terminal Simulator > Scene · 200 frames > @snapcn/terminal-simulator | https://media.snapcn.dev/demos/posters/logo-flicker.webp > Logo Flicker > Scene · 100 frames > @snapcn/logo-flicker | https://media.snapcn.dev/demos/posters/laptop-frame.webp > Laptop Frame > Scene · 240 frames > @snapcn/laptop-frame | https://media.snapcn.dev/demos/posters/announce-title.webp > Announce Title > Scene · 170 frames > @snapcn/announce-title"},"offset":{"type":"number","label":"Rail start (px)","default":0,"min":-400,"max":400,"step":1},"flicks":{"type":"number","label":"Flicks","default":3,"min":1,"max":8,"step":1},"every":{"type":"number","label":"Frames between flicks","default":30,"min":10,"max":90,"step":1},"from":{"type":"number","label":"Flick starts (frame)","default":0,"min":-30,"max":60,"step":1},"backdrop":{"type":"text","label":"Backdrop stops (| two)","default":""},"mode":{"type":"select","label":"Theme","default":"light","options":["light","dark"]},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"aaee0d860870","installHash":"abe787c7c37ddc93","measurement":{"sourceHash":"aaee0d860870","width":1280,"height":720,"fps":30,"durationInFrames":108,"settle":{"base":108,"baseWords":2,"perWord":0},"copy":{"prop":"heading","pxPerChar":98.54,"maxChars":13}}},
15
+ {"slug":"caret","title":"UI Caret","description":"A blinking text caret — a controlled vertical bar, or a pure motion atom that blinks deterministically from useCurrentFrame.","category":"ai-input","tier":"free","aliases":[],"docsPath":"/docs","notes":"it paints with `color`, which defaults to `currentColor`, and takes no `mode`.","exportName":"Caret","target":"components/imgcli/caret.tsx","importPath":"@/components/imgcli/caret","files":["components/imgcli/caret.tsx"],"dependencies":["remotion"],"registryDependencies":[],"props":[{"name":"color","type":"string | undefined","required":false,"defaultExpression":"\"currentColor\""},{"name":"width","type":"number | undefined","required":false,"defaultExpression":"2"},{"name":"height","type":"number | undefined","required":false,"defaultExpression":"18"},{"name":"radius","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"opacity","type":"number | undefined","required":false},{"name":"blink","type":"boolean | undefined","required":false,"defaultExpression":"false"},{"name":"blinkPerSecond","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"marginLeft","type":"number | undefined","required":false,"defaultExpression":"0"},{"name":"className","type":"string | undefined","required":false},{"name":"style","type":"CSSProperties | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":120,"controls":{"height":{"type":"number","label":"Height","default":28,"min":8,"max":80,"step":2},"width":{"type":"number","label":"Width","default":3,"min":1,"max":8,"step":1},"radius":{"type":"number","label":"Radius","default":1,"min":0,"max":8,"step":1},"blink":{"type":"boolean","label":"Blink","default":true},"blinkPerSecond":{"type":"number","label":"Blink/sec","default":1,"min":0.25,"max":4,"step":0.25},"color":{"type":"color","label":"Color","default":"#1F1E1D"}}},"sourceHash":"6fb0472714d1","installHash":"e86d03714f79e0ff"},
16
+ {"slug":"channel-thread","title":"Channel Thread","description":"Slack-style chat animation: team messages arrive with typing dots. A work chat filling itself in, the way the channel actually reads: an avatar, a name in bold, a quiet timestamp and the messages as plain lines under them. Messages land one at a time, a second message from the same person joins the group without repeating the name, and when somebody new starts typing three dots hold their line until the words arrive. The transcript never creeps — it sits perfectly still between arrivals and then scrolls, once, by exactly the room the new line needs, and only when the newest line would fall past the anchor. Every vertical number came off a recording and closes on it: carry the layout's arithmetic across the whole scene and it predicts the last frame's baselines to within a pixel.","category":"social","tier":"free","aliases":[],"docsPath":"/docs/social/channel-thread","notes":"script is the conversation, groups split by `;` and a group's messages by `|`; people is one `name time` per group; beats is the frame each message lands on and opens is the frame its row appears, so a pause before someone answers is a number rather than a gap you have to guess at. avatars takes one image per group, split by `|` (not by comma — a data: URL has one of its own). Pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette.","exportName":"ChannelThread","target":"components/imgcli/channel-thread.tsx","importPath":"@/components/imgcli/channel-thread","files":["components/imgcli/channel-thread.tsx"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"messages","type":"string | readonly ThreadMessage[] | undefined","required":false,"defaultExpression":"DEFAULT_MESSAGES"},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false,"defaultExpression":"\"dark\""},{"name":"fontFamily","type":"string | undefined","required":false,"defaultExpression":"\"Default\""}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":110,"controls":{"messages":{"type":"text","label":"Messages (avatar > name time > text | …)","default":"/avatars/07.jpg > rhea 9:41 AM > Launch video by Thursday? | We have nothing shot. | /avatars/13.jpg > sam 9:42 AM > Already done. | Built it out of snapcn."},"mode":{"type":"select","label":"Theme","default":"dark","options":["light","dark"]},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"70845cb84531","installHash":"db40e96ffee7ff8e","measurement":{"sourceHash":"70845cb84531","width":1280,"height":720,"fps":30,"durationInFrames":110,"settle":{"base":110,"baseWords":0,"perWord":0}}},
17
+ {"slug":"check-cycle","title":"Check Cycle","description":"Rotating words beside a checkbox: a sentence that finishes itself several ways. \"Create your own\" sits left of a ticked shadcn-style checkbox and the word to its right rolls up out of a slot — Intros, Demos, Launches, Changelogs, Tutorials, And more — then the line steps back a little and rests. Every number came off a recording, frame by frame: the two words in the slot move as one strip on the in-out cubic over exactly half a second, a roll every twenty frames. The type moves by fractions of a pixel instead of the whole-pixel steps a browser snaps text to.","category":"text","tier":"free","aliases":[],"docsPath":"/docs/text/check-cycle","notes":"headline is the part of the sentence that never changes; words is what finishes it, comma separated, rolled through in order beside a ticked checkbox, then the line steps back to 80% and rests. Pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette.","exportName":"CheckCycle","target":"components/imgcli/check-cycle.tsx","importPath":"@/components/imgcli/check-cycle","files":["components/imgcli/check-cycle.tsx"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"headline","type":"string | undefined","required":false,"defaultExpression":"\"Create your own\""},{"name":"words","type":"string | undefined","required":false,"defaultExpression":"\"Intros, Demos, Launches, Changelogs, Tutorials, And more\""},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false,"defaultExpression":"\"light\""},{"name":"fontFamily","type":"string | undefined","required":false,"defaultExpression":"\"Default\""}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":136,"controls":{"headline":{"type":"text","label":"Lead-in","default":"Create your own"},"words":{"type":"text","label":"Words (comma separated)","default":"Intros, Demos, Launches, Changelogs, Tutorials, And more"},"mode":{"type":"select","label":"Theme","default":"light","options":["light","dark"]},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"dded8eacb63e","installHash":"2f1232cd80981271","measurement":{"sourceHash":"dded8eacb63e","width":1280,"height":720,"fps":30,"durationInFrames":136,"settle":{"base":129,"baseWords":7,"perWord":13.33},"copy":{"prop":"headline","pxPerChar":39.67,"maxChars":22}}},
18
+ {"slug":"click-type","title":"Click Type","description":"Click to type: a prompt composer (Prompt Send's glass panel, writing surface and round send button) whose placeholder writes itself while a cursor flies in from the edge and clicks the field, then a hard cut into the field where the real prompt types at the caret and send arms. Two shots of one composer under a constant camera, anchored on the first letter, so the type never scales while it moves. Built on cursor-track.","category":"cursor","tier":"free","aliases":[],"docsPath":"/docs/cursor/click-type","notes":"placeholder writes itself in the wide shot; prompt is what types after the click, in the close-up. Pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette.","exportName":"ClickType","target":"components/imgcli/click-type.tsx","importPath":"@/components/imgcli/click-type","files":["components/imgcli/click-type.tsx"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json","https://imgcli.com/r/input.json","https://imgcli.com/r/caret.json","https://imgcli.com/r/cursor-track.json"],"props":[{"name":"placeholder","type":"string | undefined","required":false,"defaultExpression":"\"Describe what you want to build...\""},{"name":"prompt","type":"string | undefined","required":false,"defaultExpression":"DEFAULT_PROMPT"},{"name":"hint","type":"string | undefined","required":false,"defaultExpression":"\"New suggestion\""},{"name":"accentColor","type":"string | undefined","required":false},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"className","type":"string | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":103,"controls":{"placeholder":{"type":"text","label":"Placeholder","default":"Describe what you want to build..."},"prompt":{"type":"text","label":"Prompt","default":"Build me a marketing site"},"hint":{"type":"text","label":"Hint","default":"New suggestion"},"accentColor":{"type":"color","label":"Wash","default":"#3577e0"},"mode":{"type":"select","label":"Theme","default":"light","options":["light","dark"]},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"3cf605e8d552","installHash":"1fe381b8a44bfe08"},
19
+ {"slug":"count-grid","title":"Count Grid","description":"Number count-up grid: cards multiply and a counter jumps, the it-scales stat shot. A grid of cards rushes in under a horizontal smear, settles on five and a label, then the camera pulls back a fraction while every empty cell around them fills in from the middle out and the number jumps. The \"and it scales\" shot, without a cut — one card is deliberately late to land, which is what makes the entry read as five separate things arriving rather than one picture being pushed in.","category":"scenes","tier":"free","aliases":[],"docsPath":"/docs/scenes/count-grid","notes":"pass cards an array of image URLs and from/to/noun for the label.","exportName":"CountGrid","target":"components/imgcli/count-grid.tsx","importPath":"@/components/imgcli/count-grid","files":["components/imgcli/count-grid.tsx"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"from","type":"string | undefined","required":false,"defaultExpression":"\"5\""},{"name":"to","type":"string | undefined","required":false,"defaultExpression":"\"500\""},{"name":"noun","type":"string | undefined","required":false,"defaultExpression":"\"clips\""},{"name":"cards","type":"string[] | undefined","required":false,"defaultExpression":"OWN_CARDS"},{"name":"background","type":"string | undefined","required":false},{"name":"inkFrom","type":"string | undefined","required":false},{"name":"inkTo","type":"string | undefined","required":false},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":47,"controls":{"from":{"type":"text","label":"Count before","default":"5"},"to":{"type":"text","label":"Count after","default":"500"},"noun":{"type":"text","label":"Noun","default":"clips"},"mode":{"type":"select","label":"Mode","default":"light","options":["light","dark"]},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"b7242f01ac06","installHash":"69c8a86b81f4eb3d","measurement":{"sourceHash":"b7242f01ac06","width":1280,"height":720,"fps":30,"durationInFrames":47,"settle":{"base":47,"baseWords":1,"perWord":0},"copy":{"prop":"noun","pxPerChar":256.2,"maxChars":5}}},
20
+ {"slug":"cursor-track","title":"Cursor Track","description":"Cursor click animation: a mouse pointer that moves and clicks over any UI. A synthetic cursor that walks a path of normalized waypoints over any children and pulses a click ring on arrival. A hand-drawn macOS-style arrow with an outline that keeps it readable over arbitrary footage, or a touch puck — for UI sims, and for recordings whose real cursor never made it into the file.","category":"screens","tier":"free","aliases":[],"docsPath":"/docs/screens/cursor-track","notes":"pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette and a bare Remotion render is black.","exportName":"CursorTrack","target":"components/imgcli/cursor-track.tsx","importPath":"@/components/imgcli/cursor-track","files":["components/imgcli/cursor-track.tsx"],"dependencies":["remotion"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"children","type":"ReactNode","required":false},{"name":"path","type":"CursorWaypoint[] | undefined","required":false,"defaultExpression":"DEMO_PATH"},{"name":"variant","type":"CursorVariant | undefined","required":false,"defaultExpression":"\"arrow\""},{"name":"size","type":"number | undefined","required":false},{"name":"color","type":"string | undefined","required":false},{"name":"outlineColor","type":"string | undefined","required":false},{"name":"ringColor","type":"string | undefined","required":false},{"name":"clickFrames","type":"number | undefined","required":false,"defaultExpression":"CLICK_FRAMES"},{"name":"showBefore","type":"boolean | undefined","required":false,"defaultExpression":"false"},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"className","type":"string | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":132,"controls":{"variant":{"type":"select","label":"Cursor","default":"arrow","options":["arrow","dot"]},"size":{"type":"number","label":"Cursor size","default":28,"min":12,"max":72,"step":1},"color":{"type":"color","label":"Cursor","default":"#141414"},"outlineColor":{"type":"color","label":"Outline","default":"#faf9f6"},"ringColor":{"type":"color","label":"Click ring","default":"#3072db"},"clickFrames":{"type":"number","label":"Click ring length","default":14,"min":6,"max":40,"step":1},"showBefore":{"type":"boolean","label":"Park before start","default":false},"speed":{"type":"number","label":"Speed","default":1,"min":1,"max":4,"step":0.25}}},"sourceHash":"a7acab598f88","installHash":"71bde0be50aa9335","measurement":{"sourceHash":"a7acab598f88","width":1280,"height":720,"fps":30,"durationInFrames":132,"settle":{"base":113,"baseWords":0,"perWord":0}}},
21
+ {"slug":"cut-lockup","title":"Cut Lockup","description":"Logo reveal in hard cuts. The logo lands huge on grid paper, steps down in three cuts, pushes in, cuts to night where its construction lines and anchor points draw themselves, then a paper panel wipes up onto the resting lockup. Cuts, scales, push and wipe are measured frame by frame off a reference recording.","category":"scenes","tier":"free","aliases":[],"docsPath":"/docs/scenes/cut-lockup","notes":"108 frames at 30fps; paints its own background. Pass your logo as SVG paths (logo={{ width, height, shapes }}).","exportName":"CutLockup","target":"components/imgcli/cut-lockup/index.tsx","importPath":"@/components/imgcli/cut-lockup","files":["components/imgcli/cut-lockup/index.tsx","components/imgcli/cut-lockup/data.ts"],"dependencies":["remotion"],"registryDependencies":[],"props":[{"name":"logo","type":"LogoArt | undefined","required":false,"defaultExpression":"SNAPCN_LOGO"},{"name":"size","type":"number | undefined","required":false,"defaultExpression":"0.2335"},{"name":"ink","type":"string | undefined","required":false,"defaultExpression":"\"#1f1f1f\""},{"name":"paper","type":"[string, string, string] | undefined","required":false,"defaultExpression":"[\"#f6f6f6\", \"#f8f8f8\", \"#fcfcfc\"]"},{"name":"grid","type":"{ color: string; pitch: number; width: number; } | undefined","required":false,"defaultExpression":"{ color: \"rgba(0,0,0,0.014)\", pitch: 22, width: 1 }"},{"name":"roughness","type":"number | undefined","required":false,"defaultExpression":"0.35"},{"name":"steps","type":"CutStep[] | undefined","required":false,"defaultExpression":"[\n { from: 0, scale: 9.525, x: 0.11536, y: -0.00035, drift: -0.0001655 },\n { from: 8, scale: 4.6105, x: 0.01566, y: 0.00175 },\n { from: 18, scale: 3.0057, x: -0.003 },\n { from: 28, scale: 1, x: -0.0083, y: 0.00126 },\n ]"},{"name":"push","type":"[number, number][] | undefined","required":false,"defaultExpression":"[\n [36, 1],\n [37, 1.0006],\n [38, 1.0048],\n [39, 1.0087],\n [40, 1.0162],\n [41, 1.0313],\n [42, 1.0703],\n ]"},{"name":"night","type":"string | undefined","required":false,"defaultExpression":"\"#242424\""},{"name":"line","type":"string | undefined","required":false,"defaultExpression":"\"rgba(255,255,255,0.11)\""},{"name":"dot","type":"string | undefined","required":false,"defaultExpression":"\"rgba(255,255,255,0.22)\""},{"name":"nightAt","type":"number | undefined","required":false,"defaultExpression":"43"},{"name":"nightScale","type":"number | undefined","required":false,"defaultExpression":"1.154"},{"name":"drawFrames","type":"number | undefined","required":false,"defaultExpression":"7"},{"name":"drawSpread","type":"number | undefined","required":false,"defaultExpression":"22"},{"name":"wipe","type":"[number, number][] | undefined","required":false,"defaultExpression":"[\n [91, 1],\n [92, 386 / 390],\n [93, 376 / 390],\n [94, 360 / 390],\n [95, 334 / 390],\n [96, 277 / 390],\n [97, 114 / 390],\n [98, 57 / 390],\n [99, 31 / 390],\n [100, 15 / 390],\n [101, 5 / 390],\n [102, 0],\n ]"},{"name":"endPaper","type":"string | undefined","required":false,"defaultExpression":"\"#f8f8f8\""},{"name":"endScale","type":"number | undefined","required":false,"defaultExpression":"1.1894"},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":108,"controls":{"size":{"type":"number","label":"Logo width","default":0.2335,"min":0.1,"max":0.5,"step":0.005},"ink":{"type":"color","label":"Ink","default":"#1f1f1f"},"night":{"type":"color","label":"Night","default":"#242424"},"endPaper":{"type":"color","label":"Paper","default":"#f8f8f8"},"roughness":{"type":"number","label":"Print roughness","default":0.35,"min":0,"max":2,"step":0.05},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"c4598805c0ca","installHash":"d4b2a99891eca351"},
22
+ {"slug":"dot-bloom","title":"Dot Bloom","description":"Halftone dot transition. White dots spark over the outgoing shot while it washes out to cream, then the cream breaks into warm coral, peach and blush dots in drifting diagonal bands that thin out cell by cell until the incoming shot is all that is left. Every cell of every step is replayed from a reference recording.","category":"transitions","tier":"free","aliases":[],"docsPath":"/docs/transitions/dot-bloom","notes":"lay it over both shots and cut under it at DOT_BLOOM_CUT, where the cream covers the frame.","exportName":"DotBloom","target":"components/imgcli/dot-bloom.tsx","importPath":"@/components/imgcli/dot-bloom","files":["components/imgcli/dot-bloom.tsx"],"dependencies":["remotion"],"registryDependencies":[],"props":[{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"className","type":"string | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":30,"controls":{"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"2d4390df7248","installHash":"88bc1003a82c562d"},
23
+ {"slug":"drop-line","title":"Drop Line","description":"Words cut past one card at a time, then the last word sinks out from under the dot of its own i","category":"text","tier":"free","aliases":[],"docsPath":"/docs/text/drop-line","notes":"38 frames at 30fps.","exportName":"DropLine","target":"components/imgcli/drop-line/index.tsx","importPath":"@/components/imgcli/drop-line","files":["components/imgcli/drop-line/index.tsx","components/imgcli/drop-line/data.ts"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"words","type":"string[] | undefined","required":false},{"name":"fontFamily","type":"string | undefined","required":false},{"name":"fontWeight","type":"number | undefined","required":false},{"name":"fontSize","type":"number | undefined","required":false},{"name":"wordSize","type":"number[] | undefined","required":false},{"name":"wordNudge","type":"number[] | undefined","required":false},{"name":"wordTracking","type":"number[] | undefined","required":false},{"name":"wordKerning","type":"number[][] | undefined","required":false},{"name":"ink","type":"string | undefined","required":false},{"name":"paper","type":"string | undefined","required":false},{"name":"speed","type":"number | undefined","required":false},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":38,"controls":{"fontSize":{"type":"number","label":"Font size","default":130,"min":48,"max":240,"step":1},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"cf6d17f9db8b","installHash":"3c0fb64a67f7ffd7"},
24
+ {"slug":"follower-rush","title":"Follower Rush","description":"Follower count animation: X/Twitter follower notification with a count-up and avatar wave, for social proof. An X-style follower notification that piles up — avatars stack in and the count explodes, then the row bends into an undulating wave of faces.","category":"social","tier":"free","aliases":[],"docsPath":"/docs/social/follower-rush","notes":"pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette and a bare Remotion render is black.","exportName":"FollowerRush","target":"components/imgcli/follower-rush.tsx","importPath":"@/components/imgcli/follower-rush","files":["components/imgcli/follower-rush.tsx"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"totalFollowers","type":"number | undefined","required":false,"defaultExpression":"5000"},{"name":"followers","type":"Follower[] | undefined","required":false,"defaultExpression":"SAMPLE_FOLLOWERS"},{"name":"accentColor","type":"string | undefined","required":false},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false},{"name":"fontFamily","type":"string | undefined","required":false},{"name":"orientation","type":"\"horizontal\" | \"vertical\" | undefined","required":false,"defaultExpression":"\"horizontal\""},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":300,"controls":{"totalFollowers":{"type":"number-input","label":"Total followers","default":5000,"min":10,"max":1000000,"step":100},"accentColor":{"type":"color","label":"Accent","default":"#266DF0"},"theme":{"type":"select","label":"Theme","default":"light","options":["light","dark"]},"orientation":{"type":"select","label":"Orientation","default":"horizontal","options":["horizontal","vertical"]},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":1,"max":4,"step":0.25}}},"sourceHash":"ec087dbf8bdd","installHash":"658bc2fd0e97d053","measurement":{"sourceHash":"ec087dbf8bdd","width":1280,"height":720,"fps":30,"durationInFrames":300,"settle":{"base":300,"baseWords":0,"perWord":0}}},
25
+ {"slug":"font-shuffle","title":"Font Shuffle","description":"Launch title animation: the line decodes out of scrambled glyphs set in the wrong typeface, flashes the accent, settles to ink, then the product name cycles through eleven typefaces (mono, light, humanist, pixel, script, slab, condensed, italic, blackletter, wide, bold grotesk) while the line zooms a step closer on each swap. Every beat is a held state measured off a recording frame by frame — timing, masks, layout, zoom and colour.","category":"text","tier":"free","aliases":[],"docsPath":"/docs/text/font-shuffle","notes":"lead stays serif, subject tries on eleven typefaces; accent is the colour the line flashes before it settles. Pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette.","exportName":"FontShuffle","target":"components/imgcli/font-shuffle.tsx","importPath":"@/components/imgcli/font-shuffle","files":["components/imgcli/font-shuffle.tsx"],"dependencies":["remotion"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"lead","type":"string | undefined","required":false,"defaultExpression":"\"Introducing\""},{"name":"subject","type":"string | undefined","required":false,"defaultExpression":"\"snapcn Pro\""},{"name":"accent","type":"string | undefined","required":false,"defaultExpression":"\"#9b8ed3\""},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false,"defaultExpression":"\"light\""}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":115,"controls":{"lead":{"type":"text","label":"Lead (stays serif)","default":"Introducing"},"subject":{"type":"text","label":"Subject (tries on fonts)","default":"snapcn Pro"},"accent":{"type":"color","label":"Accent","default":"#9b8ed3"},"mode":{"type":"select","label":"Theme","default":"light","options":["light","dark"]},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"d3c1fddba5e7","installHash":"1b31591951c61903","measurement":{"sourceHash":"d3c1fddba5e7","width":1280,"height":720,"fps":30,"durationInFrames":115,"settle":{"base":69,"baseWords":1,"perWord":0},"copy":{"prop":"subject","pxPerChar":113.2,"maxChars":10}}},
26
+ {"slug":"gather-lockup","title":"Gather Lockup","description":"Logo reveal in two and a half seconds. A wall of your work sits under a line of type. The line falls apart word by word, the wall cuts in to a row of four, and each slot swaps its picture and hands over to your mark and wordmark. Measured frame by frame off a reference recording.","category":"scenes","tier":"free","aliases":[],"docsPath":"/docs/scenes/gather-lockup","notes":"60 frames at 24fps; paints its own background. Pass 15 images, and your logo as SVG paths (logo={{ width, height, shapes }}).","exportName":"GatherLockup","target":"components/imgcli/gather-lockup/index.tsx","importPath":"@/components/imgcli/gather-lockup","files":["components/imgcli/gather-lockup/index.tsx","components/imgcli/gather-lockup/data.ts"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"lines","type":"readonly (readonly string[])[] | undefined","required":false},{"name":"images","type":"readonly string[] | undefined","required":false},{"name":"captions","type":"readonly string[] | undefined","required":false},{"name":"wordmark","type":"string | undefined","required":false},{"name":"logo","type":"{ width: number; height: number; shapes: readonly string[]; } | undefined","required":false},{"name":"font","type":"string | undefined","required":false},{"name":"wordmarkColor","type":"string | undefined","required":false},{"name":"wordmarkTracking","type":"number | undefined","required":false},{"name":"backdrop","type":"string | undefined","required":false},{"name":"speed","type":"number | undefined","required":false},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":24,"durationInFrames":60,"controls":{"wordmark":{"type":"text","label":"Wordmark","default":"snapcn"},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"b30972d8e8b9","installHash":"549658a098c8309a","measurement":{"sourceHash":"b30972d8e8b9","width":1280,"height":720,"fps":24,"durationInFrames":60,"settle":{"base":33,"baseWords":1,"perWord":0},"copy":{"prop":"wordmark","pxPerChar":196.83,"maxChars":6}}},
27
+ {"slug":"hello-zoom","title":"Hello Zoom","description":"Words flicker in place, one line types on, then the camera dives through its own letters into the next card","category":"text","tier":"free","aliases":[],"docsPath":"/docs/text/hello-zoom","notes":"75 frames at 30fps.","exportName":"HelloZoom","target":"components/imgcli/hello-zoom/index.tsx","importPath":"@/components/imgcli/hello-zoom","files":["components/imgcli/hello-zoom/index.tsx"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"words","type":"string | string[] | undefined","required":false,"defaultExpression":"[\n \"React\",\n \"Remotion\",\n \"shadcn\",\n \"Next.js\",\n \"Vite\",\n \"Tailwind\",\n \"TypeScript\",\n ]"},{"name":"lead","type":"string | undefined","required":false,"defaultExpression":"\"Hello\""},{"name":"rest","type":"string | undefined","required":false,"defaultExpression":"\"snapcn.\""},{"name":"nextWord","type":"string | undefined","required":false,"defaultExpression":"\"npx\""},{"name":"fontFamily","type":"string | undefined","required":false},{"name":"fontWeight","type":"number | undefined","required":false,"defaultExpression":"700"},{"name":"inkColor","type":"string | undefined","required":false},{"name":"paperColor","type":"string | undefined","required":false},{"name":"through","type":"[number, number] | undefined","required":false},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":75,"controls":{"words":{"type":"text","label":"Flicker words (comma-separated)","default":"React, Remotion, shadcn, Next.js, Vite, Tailwind, TypeScript"},"lead":{"type":"text","label":"Lead word","default":"Hello"},"rest":{"type":"text","label":"Typed on","default":"snapcn."},"nextWord":{"type":"text","label":"Next card","default":"npx"},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"fontWeight":{"type":"number","label":"Font weight","default":700,"min":500,"max":800,"step":100},"inkColor":{"type":"color","label":"Ink","default":"#141414"},"paperColor":{"type":"color","label":"Paper","default":"#faf9f6"},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"20d0d090677d","installHash":"8a66cd49f394c4a7"},
28
+ {"slug":"hero-launch","title":"Product Hero","description":"Product launch hero scene for a SaaS launch video intro. Cinematic product-launch hero — two cards slide into formation as the headline reveals above.","category":"scenes","tier":"free","aliases":[],"docsPath":"/docs/scenes/hero-launch","notes":"set image1, image2, and heading to customize the scene. Both cards accept image or video URLs.","exportName":"HeroLaunch","target":"components/imgcli/hero-launch.tsx","importPath":"@/components/imgcli/hero-launch","files":["components/imgcli/hero-launch.tsx"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"heading","type":"string | undefined","required":false,"defaultExpression":"\"Introducing Imgcli\""},{"name":"image1","type":"string | undefined","required":false,"defaultExpression":"\"https://media.snapcn.dev/demos/moodboard-reveal.mp4\""},{"name":"image2","type":"string | undefined","required":false,"defaultExpression":"\"https://media.snapcn.dev/demos/orbit-gallery.mp4\""},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false},{"name":"fontFamily","type":"string | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":170,"controls":{"image1":{"type":"image","label":"Left card (image/video)","default":"https://media.snapcn.dev/demos/moodboard-reveal.mp4"},"image2":{"type":"image","label":"Right card (image/video)","default":"https://media.snapcn.dev/demos/orbit-gallery.mp4"},"heading":{"type":"text","label":"Headline","default":"Introducing Imgcli"},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"056612f01df5","installHash":"8a83e31a9746c979","measurement":{"sourceHash":"056612f01df5","width":1280,"height":720,"fps":30,"durationInFrames":170,"settle":{"base":170,"baseWords":2,"perWord":0},"copy":{"prop":"heading","pxPerChar":71.17,"maxChars":18}}},
29
+ {"slug":"input","title":"UI Input","description":"A text input whose idle/hover/active/typing/invalid state is a pure function of the timeline; the focus ring, border, caret, and value reveal are keyframed presets.","category":"ai-input","tier":"free","aliases":[],"docsPath":"/docs","notes":"pass `theme` (or wrap the composition in `SnapCnUIProvider`) to repaint it; it takes no `mode`.","exportName":"Input","target":"components/imgcli/input.tsx","importPath":"@/components/imgcli/input","files":["components/imgcli/input.tsx","components/imgcli/use-input-transition.ts"],"dependencies":["remotion","class-variance-authority"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json","https://imgcli.com/r/caret.json","utils"],"props":[{"name":"state","type":"InputState | undefined","required":false,"defaultExpression":"\"idle\""},{"name":"style","type":"InputStyle | undefined","required":false},{"name":"placeholder","type":"string | undefined","required":false,"defaultExpression":"\"you@example.com\""},{"name":"value","type":"string | undefined","required":false,"defaultExpression":"\"remotion@snapcn.dev\""},{"name":"size","type":"InputSize | undefined","required":false,"defaultExpression":"\"default\""},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"primary","type":"string | undefined","required":false},{"name":"fullWidth","type":"boolean | undefined","required":false,"defaultExpression":"false"},{"name":"className","type":"string | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":120,"controls":{"placeholder":{"type":"text","label":"Placeholder","default":"you@example.com"},"value":{"type":"text","label":"Value","default":"remotion@snapcn.dev"},"size":{"type":"select","label":"Size","default":"default","options":["sm","default","lg"]},"state":{"type":"select","label":"State","default":"typing","options":["idle","hover","active","typing","blur","invalid"]},"primary":{"type":"color","label":"Primary","default":"#171717"}},"example":"import { Input } from \"@/components/imgcli/input\";\n\n<Input\n state=\"typing\"\n/>"},"sourceHash":"806bdf961d94","installHash":"abb39b6794a7257a"},
30
+ {"slug":"karaoke-captions","title":"Karaoke Captions","description":"Karaoke captions: word-by-word highlighted subtitles synced to speech. A caption line that fills word by word as it is spoken — heavy outlined type that reads on any footage. Three presets: karaoke, highlight (the word rides an accent bar), clean.","category":"captions","tier":"free","aliases":[],"docsPath":"/docs/captions/karaoke-captions","notes":"pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette and a bare Remotion render is black.","exportName":"KaraokeCaptions","target":"components/imgcli/karaoke-captions.tsx","importPath":"@/components/imgcli/karaoke-captions","files":["components/imgcli/karaoke-captions.tsx"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"captions","type":"Caption[] | undefined","required":false},{"name":"srt","type":"string | undefined","required":false},{"name":"preset","type":"KaraokePreset | undefined","required":false,"defaultExpression":"\"boxed\""},{"name":"strokeRatio","type":"number | undefined","required":false},{"name":"strokeColor","type":"string | undefined","required":false,"defaultExpression":"\"#000000\""},{"name":"uppercase","type":"boolean | undefined","required":false},{"name":"lines","type":"CaptionLine[] | undefined","required":false},{"name":"text","type":"string | undefined","required":false,"defaultExpression":"\"Acme reconciles every transaction automatically\""},{"name":"emphasize","type":"string | undefined","required":false,"defaultExpression":"\"automatically\""},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"fontFamily","type":"string | undefined","required":false},{"name":"mode","type":"CaptionTheme | undefined","required":false,"defaultExpression":"\"dark\""},{"name":"accentColor","type":"string | undefined","required":false,"defaultExpression":"\"#FFE81F\""},{"name":"fontSize","type":"number | undefined","required":false},{"name":"fontWeight","type":"number | undefined","required":false},{"name":"aspect","type":"SafeAreaPreset | undefined","required":false,"defaultExpression":"\"landscape\""},{"name":"pill","type":"boolean | undefined","required":false},{"name":"emphasisScale","type":"number | undefined","required":false,"defaultExpression":"1.08"},{"name":"baseColor","type":"string | undefined","required":false},{"name":"fillColor","type":"string | undefined","required":false},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"className","type":"string | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":150,"controls":{"text":{"type":"text","label":"Line text","default":"Acme reconciles every transaction automatically"},"emphasize":{"type":"text","label":"Emphasized words (comma-separated)","default":"automatically"},"preset":{"type":"select","label":"Preset","default":"boxed","options":["boxed","karaoke","highlight","clean"]},"theme":{"type":"select","label":"Theme","default":"dark","options":["light","dark"]},"accentColor":{"type":"color","label":"Accent","default":"#FFE81F"},"fontSize":{"type":"number","label":"Font size","default":0,"min":0,"max":96,"step":1},"fontWeight":{"type":"select","label":"Font weight","default":"0","options":["400","500","600","700"]},"aspect":{"type":"select","label":"Safe area","default":"landscape","options":["landscape","portrait","square"]},"emphasisScale":{"type":"number","label":"Emphasis scale","default":1.08,"min":1,"max":1.2,"step":0.01},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":1,"max":4,"step":0.25}}},"sourceHash":"5a807f563fb1","installHash":"a20c44d8f35baf01","measurement":{"sourceHash":"5a807f563fb1","width":1280,"height":720,"fps":30,"durationInFrames":150,"settle":{"base":134,"baseWords":5,"perWord":0},"copy":{"prop":"emphasize","pxPerChar":75.46,"maxChars":13}}},
31
+ {"slug":"laptop-frame","title":"Laptop Frame","description":"MacBook laptop mockup animation that opens and zooms into your screenshot or video. MacBook-style laptop that opens, runs a dynamic-island notch notification, then dives the camera into the screen until an image or video fills the frame.","category":"screens","tier":"free","aliases":[],"docsPath":"/docs/screens/laptop-frame","notes":"pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette and a bare Remotion render is black.","exportName":"LaptopFrame","target":"components/imgcli/laptop-frame.tsx","importPath":"@/components/imgcli/laptop-frame","files":["components/imgcli/laptop-frame.tsx"],"dependencies":["remotion"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"children","type":"ReactNode","required":false},{"name":"screenSrc","type":"string | undefined","required":false},{"name":"entrance","type":"LaptopFrameEntrance | undefined","required":false,"defaultExpression":"\"rise\""},{"name":"finale","type":"LaptopFrameFinale | undefined","required":false,"defaultExpression":"\"none\""},{"name":"bezelColor","type":"string | undefined","required":false},{"name":"screenColor","type":"string | undefined","required":false},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false},{"name":"fontFamily","type":"string | undefined","required":false},{"name":"indicatorColor","type":"string | undefined","required":false,"defaultExpression":"\"#30D158\""},{"name":"restTilt","type":"number | undefined","required":false,"defaultExpression":"REST_TILT"},{"name":"radius","type":"number | undefined","required":false,"defaultExpression":"LID_RADIUS"},{"name":"shadow","type":"string | undefined","required":false},{"name":"scale","type":"number | undefined","required":false,"defaultExpression":"0.95"},{"name":"showNotch","type":"boolean | undefined","required":false,"defaultExpression":"true"},{"name":"notchLabel","type":"string | undefined","required":false,"defaultExpression":"\"AirPods Connected\""},{"name":"batteryLevel","type":"number | undefined","required":false,"defaultExpression":"85"},{"name":"floatLoop","type":"boolean | undefined","required":false,"defaultExpression":"true"},{"name":"floatAmplitude","type":"number | undefined","required":false,"defaultExpression":"4"},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"className","type":"string | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":240,"controls":{"screenSrc":{"type":"image","label":"Screen (image or video)","default":"https://media.snapcn.dev/demos/answer-stream.mp4"},"entrance":{"type":"select","label":"Entrance","default":"open","options":["rise","open","none"]},"finale":{"type":"select","label":"Finale","default":"zoom-to-screen","options":["none","zoom-to-screen"]},"notchLabel":{"type":"text","label":"Notch label","default":"AirPods Connected"},"showNotch":{"type":"boolean","label":"Notch","default":true},"batteryLevel":{"type":"number","label":"Battery level","default":85,"min":0,"max":100,"step":1},"bezelColor":{"type":"color","label":"Bezel color","default":"#1D1D1F"},"screenColor":{"type":"color","label":"Screen color","default":"#FFFFFF"},"restTilt":{"type":"number","label":"Lid tilt","default":18,"min":0,"max":45,"step":1},"radius":{"type":"number","label":"Lid radius","default":22,"min":8,"max":40,"step":1},"scale":{"type":"number","label":"Scale","default":0.85,"min":0.4,"max":1.4,"step":0.05},"floatLoop":{"type":"boolean","label":"Float loop","default":true},"floatAmplitude":{"type":"number","label":"Float amplitude","default":4,"min":0,"max":16,"step":1},"shadow":{"type":"text","label":"Shadow","default":"0 40px 80px rgba(10,12,20,0.45)"},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":1,"max":4,"step":0.25}}},"sourceHash":"a07ad2c8237a","installHash":"617fba5f01de846c","measurement":{"sourceHash":"a07ad2c8237a","width":1280,"height":720,"fps":30,"durationInFrames":240,"settle":{"base":185,"baseWords":2,"perWord":0},"copy":{"prop":"notchLabel","pxPerChar":75.35,"maxChars":17}}},
32
+ {"slug":"logo-assemble","title":"Logo Assemble","description":"Logo reveal animation: image cards orbit and collapse into your logo and brand name. A single ring of image cards revolves around a centred title, then spins inward and drains to the middle — giving birth to a simple logo that slides left as the brand name reveals to its right.","category":"logos","tier":"free","aliases":[],"docsPath":"/docs/logos/logo-assemble","notes":"pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette and a bare Remotion render is black.","exportName":"LogoAssemble","target":"components/imgcli/logo-assemble.tsx","importPath":"@/components/imgcli/logo-assemble","files":["components/imgcli/logo-assemble.tsx"],"dependencies":["remotion"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"logoSrc","type":"string | undefined","required":false,"defaultExpression":"\"https://imgcli.com/logo/imgcli-white.svg\""},{"name":"brandName","type":"string | undefined","required":false,"defaultExpression":"\"Imgcli\""},{"name":"middleText","type":"string | undefined","required":false,"defaultExpression":"\"Cinematic components\\nfor React\""},{"name":"images","type":"string[] | undefined","required":false,"defaultExpression":"DEFAULT_IMAGES"},{"name":"count","type":"number | undefined","required":false,"defaultExpression":"10"},{"name":"background","type":"string | undefined","required":false},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"className","type":"string | undefined","required":false},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false},{"name":"fontFamily","type":"string | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":108,"controls":{"brandName":{"type":"text","label":"Brand name","default":"Imgcli"},"middleText":{"type":"text","label":"Center text","default":"Cinematic components for React"},"logoSrc":{"type":"image","label":"Logo (simple, monochrome)","default":"/logo/imgcli-white.svg"},"count":{"type":"number","label":"Ring images","default":10,"min":5,"max":16,"step":1},"background":{"type":"color","label":"Background","default":"#050505"},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":1,"max":4,"step":0.25}}},"sourceHash":"00caa87a38b5","installHash":"eb2fde3bedf190b0","measurement":{"sourceHash":"00caa87a38b5","width":1280,"height":720,"fps":30,"durationInFrames":108,"settle":{"base":90,"baseWords":1,"perWord":0},"copy":{"prop":"brandName","pxPerChar":104.5,"maxChars":13}}},
33
+ {"slug":"logo-collapse","title":"Logo Collapse","description":"Logo reveal intro: a stack of photos flicks through and collapses into your logo. A stack of shots flicked through, collapsing into your mark, and the wordmark landing beside it. One card holds the middle of the frame and cuts to the next shot, each smaller and each held for less time than the last, so the sequence winds itself up instead of running at a constant clip. Nothing cross-fades and nothing tweens between shots — the reference holds each card at a fixed size for its whole beat and then cuts, which reads as a stack of prints being dealt rather than as a zoom. At the end of the run the card cuts to a plain tile with the mark on it, the mark overshoots its resting size by a third and settles in three frames, the tile goes, and the mark steps aside twice to make room for the word.","category":"logos","tier":"free","aliases":[],"docsPath":"/docs/logos/logo-collapse","notes":"images is the stack, split by `|` (not by comma: a data: URL has one of its own); sizes and holds are parallel to it, one entry per shot, sizes as a share of the frame height where `0.48` is square and `0.82x0.461` is 16:9; mark is what the stack collapses into and wordmark the word that lands beside it. background takes an optional plate and accent the colour the two brackets ping in. Pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette.","exportName":"LogoCollapse","target":"components/imgcli/logo-collapse.tsx","importPath":"@/components/imgcli/logo-collapse","files":["components/imgcli/logo-collapse.tsx"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"images","type":"string | undefined","required":false,"defaultExpression":"\"https://media.snapcn.dev/demos/posters/count-grid.webp|https://media.snapcn.dev/demos/posters/moodboard-reveal.webp|https://media.snapcn.dev/demos/posters/orbit-gallery.webp|https://media.snapcn.dev/demos/posters/hero-launch.webp|https://media.snapcn.dev/demos/posters/phone-frame.webp|https://media.snapcn.dev/demos/posters/terminal-simulator.webp\""},{"name":"sizes","type":"string | undefined","required":false,"defaultExpression":"\"0.82x0.461,0.72x0.405,0.63x0.354,0.55x0.309,0.46x0.259,0.36x0.203\""},{"name":"holds","type":"string | undefined","required":false,"defaultExpression":"\"1,5,5,4,2,5\""},{"name":"mark","type":"string | undefined","required":false,"defaultExpression":"\"https://imgcli.com/logo/imgcli.svg\""},{"name":"wordmark","type":"string | undefined","required":false,"defaultExpression":"\"Imgcli\""},{"name":"background","type":"string | undefined","required":false,"defaultExpression":"\"\""},{"name":"accent","type":"string | undefined","required":false,"defaultExpression":"\"\""},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false,"defaultExpression":"\"light\""},{"name":"fontFamily","type":"string | undefined","required":false,"defaultExpression":"\"Default\""}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":52,"controls":{"images":{"type":"text","label":"Shots (| separated)","default":"https://media.snapcn.dev/demos/posters/count-grid.webp|https://media.snapcn.dev/demos/posters/moodboard-reveal.webp|https://media.snapcn.dev/demos/posters/orbit-gallery.webp|https://media.snapcn.dev/demos/posters/hero-launch.webp|https://media.snapcn.dev/demos/posters/phone-frame.webp|https://media.snapcn.dev/demos/posters/terminal-simulator.webp"},"sizes":{"type":"text","label":"Card size (share of height, w or wxh)","default":"0.82x0.461,0.72x0.405,0.63x0.354,0.55x0.309,0.46x0.259,0.36x0.203"},"holds":{"type":"text","label":"Frames per shot","default":"1,5,5,4,2,5"},"mark":{"type":"image","label":"Mark","default":"/logo/imgcli.svg"},"wordmark":{"type":"text","label":"Wordmark","default":"Imgcli"},"background":{"type":"image","label":"Backplate","default":""},"accent":{"type":"color","label":"Bracket colour","default":""},"mode":{"type":"select","label":"Theme","default":"light","options":["light","dark"]},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"73aca7bcf7af","installHash":"e7734afce1be2b1f","measurement":{"sourceHash":"73aca7bcf7af","width":1280,"height":720,"fps":30,"durationInFrames":52,"settle":{"base":30,"baseWords":1,"perWord":0},"copy":{"prop":"wordmark","pxPerChar":86.5,"maxChars":13}}},
34
+ {"slug":"logo-drift","title":"Logo Drift","description":"Logo wall animation: a logo cloud of integrations drifting behind a headline. A field of tiles drifting past a headline while the camera pulls steadily back, so the wall of things-it-works-with keeps arriving from every edge. The pull-back is one linear scale measured at 0.176 per second across every tile; the words do not fade in, they arrive 1.216× large and 4.3px soft and land in 140ms.","category":"logos","tier":"free","aliases":[],"docsPath":"/docs/logos/logo-drift","notes":"pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette and a bare Remotion render is black.","exportName":"LogoDrift","target":"components/imgcli/logo-drift.tsx","importPath":"@/components/imgcli/logo-drift","files":["components/imgcli/logo-drift.tsx"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"headline","type":"string | undefined","required":false,"defaultExpression":"\"Built for the stack you already use.\""},{"name":"tiles","type":"DriftTile[] | undefined","required":false,"defaultExpression":"SNAPCN_STACK"},{"name":"pullback","type":"number | undefined","required":false,"defaultExpression":"0.1762"},{"name":"tileSpeed","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"tileScale","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"tileFade","type":"number | undefined","required":false,"defaultExpression":"0.4"},{"name":"tileRadius","type":"number | undefined","required":false,"defaultExpression":"0.02"},{"name":"wordAt","type":"number | undefined","required":false,"defaultExpression":"0.017"},{"name":"wordStagger","type":"number | undefined","required":false,"defaultExpression":"0.15"},{"name":"wordDuration","type":"number | undefined","required":false,"defaultExpression":"WORD_DUR"},{"name":"wordScale","type":"number | undefined","required":false,"defaultExpression":"WORD_SCALE"},{"name":"wordBlur","type":"number | undefined","required":false,"defaultExpression":"WORD_BLUR"},{"name":"exitAt","type":"number | undefined","required":false,"defaultExpression":"3.13"},{"name":"exitDuration","type":"number | undefined","required":false,"defaultExpression":"EXIT_DUR"},{"name":"exitScale","type":"number | undefined","required":false,"defaultExpression":"EXIT_SCALE"},{"name":"exitBlur","type":"number | undefined","required":false,"defaultExpression":"EXIT_BLUR"},{"name":"fontSize","type":"number | undefined","required":false,"defaultExpression":"20"},{"name":"fontWeight","type":"number | undefined","required":false,"defaultExpression":"500"},{"name":"glyphScale","type":"number | undefined","required":false,"defaultExpression":"0.34"},{"name":"glow","type":"boolean | undefined","required":false,"defaultExpression":"true"},{"name":"glowColor","type":"string | undefined","required":false},{"name":"glowOpacity","type":"number | undefined","required":false,"defaultExpression":"0.07"},{"name":"accentColor","type":"string | undefined","required":false},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false},{"name":"fontFamily","type":"string | undefined","required":false},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":108,"controls":{"headline":{"type":"text","label":"Headline","default":"Built for the stack you already use."},"pullback":{"type":"number","label":"Pull-back / sec","default":0.1762,"min":0,"max":0.4,"step":0.001},"tileSpeed":{"type":"number","label":"Drift","default":1,"min":0,"max":3,"step":0.05},"tileScale":{"type":"number","label":"Tile size","default":1,"min":0.3,"max":2,"step":0.05},"tileFade":{"type":"number","label":"Tile fade τ (s)","default":0.4,"min":0.05,"max":2,"step":0.01},"tileRadius":{"type":"number","label":"Tile radius","default":0.02,"min":0,"max":0.5,"step":0.01},"glyphScale":{"type":"number","label":"Glyph size","default":0.34,"min":0.1,"max":0.7,"step":0.01},"wordStagger":{"type":"number","label":"Word stagger (s)","default":0.15,"min":0,"max":0.6,"step":0.005},"wordDuration":{"type":"number","label":"Word lands in (s)","default":0.14,"min":0.02,"max":1,"step":0.005},"wordScale":{"type":"number","label":"Word arrives at","default":1.216,"min":0.5,"max":2,"step":0.001},"wordBlur":{"type":"number","label":"Word blur (px)","default":4.3,"min":0,"max":20,"step":0.1},"exitAt":{"type":"number","label":"Exit at (s)","default":3.13,"min":0.5,"max":10,"step":0.01},"exitDuration":{"type":"number","label":"Exit over (s)","default":0.34,"min":0.05,"max":2,"step":0.01},"fontSize":{"type":"number","label":"Headline size","default":20,"min":8,"max":64,"step":0.5},"glow":{"type":"boolean","label":"Wash","default":true},"glowOpacity":{"type":"number","label":"Wash strength","default":0.07,"min":0,"max":0.5,"step":0.005},"accentColor":{"type":"color","label":"Accent","default":"#3072db"},"mode":{"type":"select","label":"Mode","default":"light","options":["light","dark"]},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"87957d7927bb","installHash":"7611010103e94b52","measurement":{"sourceHash":"87957d7927bb","width":1280,"height":720,"fps":30,"durationInFrames":108,"settle":{"base":108,"baseWords":7,"perWord":0},"copy":{"prop":"headline","pxPerChar":35.42,"maxChars":36}}},
35
+ {"slug":"logo-flicker","title":"Logo Flicker","description":"Logo reveal intro: a fast image flicker that settles on your logo. Images flip across a central card very fast, the flicker decelerates and fades, and the logo and brand name resolve underneath — a strobe of imagery settling onto the mark.","category":"logos","tier":"free","aliases":[],"docsPath":"/docs/logos/logo-flicker","notes":"pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette and a bare Remotion render is black.","exportName":"LogoFlicker","target":"components/imgcli/logo-flicker.tsx","importPath":"@/components/imgcli/logo-flicker","files":["components/imgcli/logo-flicker.tsx"],"dependencies":["remotion"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"logoSrc","type":"string | undefined","required":false,"defaultExpression":"\"https://imgcli.com/logo/imgcli-white.svg\""},{"name":"brandName","type":"string | undefined","required":false,"defaultExpression":"\"Imgcli\""},{"name":"images","type":"string[] | undefined","required":false,"defaultExpression":"DEFAULT_IMAGES"},{"name":"flipInterval","type":"number | undefined","required":false,"defaultExpression":"FLIP_INTERVAL"},{"name":"background","type":"string | undefined","required":false},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"className","type":"string | undefined","required":false},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false},{"name":"fontFamily","type":"string | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":100,"controls":{"brandName":{"type":"text","label":"Brand name","default":"Imgcli"},"logoSrc":{"type":"image","label":"Logo (simple, monochrome)","default":"/logo/imgcli-white.svg"},"flipInterval":{"type":"number","label":"Flip interval (frames)","default":2,"min":1,"max":6,"step":1},"background":{"type":"color","label":"Background","default":"#050505"},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":1,"max":4,"step":0.25}}},"sourceHash":"658f57a21449","installHash":"39ae3d46a9e44deb","measurement":{"sourceHash":"658f57a21449","width":1280,"height":720,"fps":30,"durationInFrames":100,"settle":{"base":84,"baseWords":1,"perWord":0},"copy":{"prop":"brandName","pxPerChar":213.5,"maxChars":6}}},
36
+ {"slug":"moodboard-reveal","title":"Moodboard Reveal","description":"Photo gallery reveal: a moodboard fly-through that lands on a hero image. A kinetic headline with a swapping inline image, then a scattered gallery of photos flies in, the camera pushes through it as the background lifts from near-black to off-white, and it lands on a single hero image.","category":"scenes","tier":"free","aliases":[],"docsPath":"/docs/scenes/moodboard-reveal","notes":"this scene spans light and dark by design, so it takes no `mode` — pass `theme` to repaint it.","exportName":"MoodboardReveal","target":"components/imgcli/moodboard-reveal.tsx","importPath":"@/components/imgcli/moodboard-reveal","files":["components/imgcli/moodboard-reveal.tsx"],"dependencies":["remotion"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"leadIn","type":"string | undefined","required":false,"defaultExpression":"\"that lets you\""},{"name":"emphasis","type":"string | undefined","required":false,"defaultExpression":"\"filter\""},{"name":"tailIn","type":"string | undefined","required":false,"defaultExpression":"\"out AI.\""},{"name":"images","type":"string[] | undefined","required":false,"defaultExpression":"DEFAULT_IMAGES"},{"name":"heroImage","type":"string | undefined","required":false},{"name":"darkColor","type":"string | undefined","required":false},{"name":"lightColor","type":"string | undefined","required":false},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"fontFamily","type":"string | undefined","required":false},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"className","type":"string | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":150,"controls":{"leadIn":{"type":"text","label":"Lead-in","default":"that lets you"},"emphasis":{"type":"text","label":"Emphasis word","default":"filter"},"tailIn":{"type":"text","label":"Tail","default":"out AI."},"heroImage":{"type":"image","label":"Hero image","default":"/showcase-assets/821d815affa6496c39cbdeeec7a84603.jpg"},"darkColor":{"type":"color","label":"Start background","default":"#0A0A0A"},"lightColor":{"type":"color","label":"End background","default":"#E7E7E7"},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":1,"max":4,"step":0.25}}},"sourceHash":"79f27993f51d","installHash":"0c3b076f8d89b8df","measurement":{"sourceHash":"79f27993f51d","width":1280,"height":720,"fps":30,"durationInFrames":150,"settle":{"base":150,"baseWords":3,"perWord":0},"copy":{"prop":"emphasis","pxPerChar":210.5,"maxChars":6}}},
37
+ {"slug":"orb-swarm","title":"Orb Swarm","description":"Kinetic typography scene with glass orbs: a sentence told one beat at a time while four orbs burst out of it, split into eight and sixteen, wind into a clockwise vortex, collapse into a knot, pay out as a chain, loop around the closing words and shrink away bead by bead. Every phase was measured frame by frame off a 24fps reference and is replayed on the same clock; the orbs are shaded per pixel into a canvas (a scrolling band texture bowed like latitude lines, a soft glass edge) and the type is drawn into the same canvas four times finer than the frame so its baselines land between pixels.","category":"scenes","tier":"free","aliases":[],"docsPath":"/docs/scenes/orb-swarm","notes":"script is six cards separated by |; the first, second and last arrive whole and the three in the middle reveal word by word. softness is the blur on the type in card pixels (0 is crisp). background and ink are the page and the settled type; orbColor recolours the orbs (and the word tints) by hue, keeping their shading.","exportName":"OrbSwarm","target":"components/imgcli/orb-swarm.tsx","importPath":"@/components/imgcli/orb-swarm","files":["components/imgcli/orb-swarm.tsx"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"script","type":"string | undefined","required":false,"defaultExpression":"DEFAULT_SCRIPT"},{"name":"background","type":"string | undefined","required":false},{"name":"ink","type":"string | undefined","required":false},{"name":"orbColor","type":"string | undefined","required":false},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false},{"name":"fontFamily","type":"string | undefined","required":false},{"name":"softness","type":"number | undefined","required":false,"defaultExpression":"0.7"},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"className","type":"string | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":160,"controls":{"script":{"type":"text","label":"Script (| card)","default":"one command | what if | every launch | you shipped | got a video | in seconds"},"orbColor":{"type":"color","label":"Orb colour","default":"#3577e0"},"mode":{"type":"select","label":"Mode","default":"light","options":["light","dark"]},"softness":{"type":"number","label":"Type softness","default":0.7,"min":0,"max":2,"step":0.05},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"d15bdf72ec9e","installHash":"5e24080f0d83150b","measurement":{"sourceHash":"d15bdf72ec9e","width":1280,"height":720,"fps":30,"durationInFrames":160,"settle":{"base":160,"baseWords":18,"perWord":0},"copy":{"prop":"script","pxPerChar":16.42,"maxChars":77}}},
38
+ {"slug":"orbit-gallery","title":"Orbit Gallery","description":"Image gallery intro: photos spiral into the centre around a title. An image-universe hero: a continuous stream of photos flows along an Archimedean spiral (a vortex) from the frame edges into the center — evenly spaced by arc length, shrinking and rotating to follow the coil, with the title held in the clear middle. A slow, cinematic opener for launch and editorial videos.","category":"scenes","tier":"free","aliases":[],"docsPath":"/docs/scenes/orbit-gallery","notes":"pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette and a bare Remotion render is black.","exportName":"OrbitGallery","target":"components/imgcli/orbit-gallery.tsx","importPath":"@/components/imgcli/orbit-gallery","files":["components/imgcli/orbit-gallery.tsx"],"dependencies":["remotion"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"title","type":"string | undefined","required":false,"defaultExpression":"\"A whole new universe\""},{"name":"subtitle","type":"string | undefined","required":false,"defaultExpression":"\"Article — The Design Process\""},{"name":"buttonLabel","type":"string | undefined","required":false,"defaultExpression":"\"Explore\""},{"name":"images","type":"string[] | undefined","required":false},{"name":"turns","type":"number | undefined","required":false,"defaultExpression":"3"},{"name":"spacing","type":"number | undefined","required":false,"defaultExpression":"5"},{"name":"spread","type":"number | undefined","required":false,"defaultExpression":"7"},{"name":"sizeAttenuation","type":"number | undefined","required":false,"defaultExpression":"2"},{"name":"imageSize","type":"number | undefined","required":false,"defaultExpression":"172"},{"name":"cardAspect","type":"number | undefined","required":false,"defaultExpression":"0.78"},{"name":"fadeIn","type":"number | undefined","required":false,"defaultExpression":"20"},{"name":"fadeOut","type":"number | undefined","required":false,"defaultExpression":"0"},{"name":"cornerRadius","type":"number | undefined","required":false,"defaultExpression":"5"},{"name":"orbitSeconds","type":"number | undefined","required":false,"defaultExpression":"40"},{"name":"background","type":"string | undefined","required":false},{"name":"textColor","type":"string | undefined","required":false},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false},{"name":"fontFamily","type":"string | undefined","required":false},{"name":"footerLeft","type":"string | undefined","required":false,"defaultExpression":"\"\""},{"name":"footerCenter","type":"string | undefined","required":false,"defaultExpression":"\"\""},{"name":"footerRight","type":"string | undefined","required":false,"defaultExpression":"\"\""},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"className","type":"string | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":300,"controls":{"title":{"type":"text","label":"Title","default":"A whole new universe"},"subtitle":{"type":"text","label":"Subtitle","default":"Article — The Design Process"},"buttonLabel":{"type":"text","label":"Button label","default":"Explore"},"turns":{"type":"number-input","label":"Spiral coils","default":3,"min":1,"max":6,"step":0.1},"spacing":{"type":"number-input","label":"Card spacing","default":5,"min":2,"max":14,"step":0.5},"spread":{"type":"number-input","label":"Spread","default":7,"min":1,"max":10,"step":0.5},"imageSize":{"type":"number-input","label":"Image size","default":172,"min":80,"max":360,"step":10},"sizeAttenuation":{"type":"number-input","label":"Center shrink","default":2,"min":0,"max":4,"step":0.25},"cornerRadius":{"type":"number-input","label":"Corner radius","default":5,"min":0,"max":20,"step":1},"orbitSeconds":{"type":"number-input","label":"Seconds per flow","default":40,"min":10,"max":120,"step":1},"background":{"type":"color","label":"Background","default":"#050505"},"textColor":{"type":"color","label":"Text color","default":"#FFFFFF"},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"a55a951ba51d","installHash":"389a3dc78d47daf0","measurement":{"sourceHash":"a55a951ba51d","width":1280,"height":720,"fps":30,"durationInFrames":300,"settle":{"base":300,"baseWords":0,"perWord":0},"copy":{"prop":"buttonLabel","pxPerChar":183,"maxChars":7}}},
39
+ {"slug":"phone-frame","title":"Phone Frame","description":"iPhone mockup animation: phone device frame for app screenshots and screen recordings. iPhone-style device frame with a dynamic island and a screen slot — flat or lightly 3D-tilted, with rise, rotate-in, or float entrances and a subtle float loop.","category":"screens","tier":"free","aliases":[],"docsPath":"/docs/screens/phone-frame","notes":"pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette and a bare Remotion render is black.","exportName":"PhoneFrame","target":"components/imgcli/phone-frame.tsx","importPath":"@/components/imgcli/phone-frame","files":["components/imgcli/phone-frame.tsx"],"dependencies":["remotion"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"children","type":"ReactNode","required":false},{"name":"screenSrc","type":"string | undefined","required":false},{"name":"variant","type":"PhoneFrameVariant | undefined","required":false,"defaultExpression":"\"flat\""},{"name":"entrance","type":"PhoneFrameEntrance | undefined","required":false,"defaultExpression":"\"rise\""},{"name":"bezelColor","type":"string | undefined","required":false},{"name":"screenColor","type":"string | undefined","required":false},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false},{"name":"fontFamily","type":"string | undefined","required":false},{"name":"radius","type":"number | undefined","required":false},{"name":"screenRadius","type":"number | undefined","required":false},{"name":"shadow","type":"string | undefined","required":false},{"name":"scale","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"showDynamicIsland","type":"boolean | undefined","required":false,"defaultExpression":"true"},{"name":"floatLoop","type":"boolean | undefined","required":false,"defaultExpression":"true"},{"name":"floatAmplitude","type":"number | undefined","required":false,"defaultExpression":"6"},{"name":"tiltAngle","type":"number | undefined","required":false,"defaultExpression":"-12"},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"className","type":"string | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":240,"controls":{"variant":{"type":"select","label":"Variant","default":"showcase","options":["flat","tilt","showcase"]},"entrance":{"type":"select","label":"Entrance","default":"float","options":["rise","rotate-in","float"]},"screenSrc":{"type":"image","label":"Screen (image or video)","default":"https://media.snapcn.dev/showcase-mobile-videos/boss-energy-roundup.mp4"},"bezelColor":{"type":"color","label":"Bezel color","default":"#C7C9CE"},"screenColor":{"type":"color","label":"Screen color","default":"#0A0A0B"},"radius":{"type":"number","label":"Body radius","default":53,"min":24,"max":90,"step":1},"screenRadius":{"type":"number","label":"Screen radius","default":41,"min":12,"max":78,"step":1},"scale":{"type":"number","label":"Scale","default":0.92,"min":0.4,"max":1.5,"step":0.05},"tiltAngle":{"type":"number","label":"Tilt angle","default":-12,"min":-30,"max":30,"step":1},"showDynamicIsland":{"type":"boolean","label":"Dynamic island","default":true},"floatLoop":{"type":"boolean","label":"Float loop","default":false},"floatAmplitude":{"type":"number","label":"Float amplitude","default":6,"min":0,"max":20,"step":1},"shadow":{"type":"text","label":"Shadow","default":"0 30px 70px rgba(16,24,40,0.28)"},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"100a95b4bea1","installHash":"c31dcaacc07c9f73","measurement":{"sourceHash":"100a95b4bea1","width":1280,"height":720,"fps":30,"durationInFrames":240,"settle":{"base":240,"baseWords":0,"perWord":0}}},
40
+ {"slug":"phone-stack","title":"Phone Stack","description":"Stacked phone screens with video. Phone screens rise out of a blur from below one after another, and each new one pushes the stack back: the older screens shrink and step up so only their tops peek out above the newest. Every screen plays its own clip under an iOS status bar. Proportions measured off a reference recording.","category":"screens","tier":"free","aliases":[],"docsPath":"/docs/screens/phone-stack","notes":"pass one clip per screen as videos; the page and glow are props.","exportName":"PhoneStack","target":"components/imgcli/phone-stack.tsx","importPath":"@/components/imgcli/phone-stack","files":["components/imgcli/phone-stack.tsx"],"dependencies":["remotion"],"registryDependencies":[],"props":[{"name":"videos","type":"string[] | undefined","required":false,"defaultExpression":"DEFAULT_VIDEOS"},{"name":"stagger","type":"number | undefined","required":false,"defaultExpression":"14"},{"name":"background","type":"string | undefined","required":false,"defaultExpression":"\"#f3f3ee\""},{"name":"glowColor","type":"string | undefined","required":false,"defaultExpression":"\"#cdb4e6\""},{"name":"statusColor","type":"string | undefined","required":false,"defaultExpression":"\"#ffffff\""},{"name":"time","type":"string | undefined","required":false,"defaultExpression":"\"9:41\""},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"className","type":"string | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":120,"controls":{"stagger":{"type":"number","label":"Frames between screens","default":14,"min":6,"max":30,"step":1},"time":{"type":"text","label":"Status bar time","default":"9:41"},"background":{"type":"color","label":"Page","default":"#f3f3ee"},"glowColor":{"type":"color","label":"Glow","default":"#cdb4e6"},"statusColor":{"type":"color","label":"Status bar","default":"#ffffff"},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"dca34d6ac2e9","installHash":"031c78d4df25a56f"},
41
+ {"slug":"portal-intro","title":"Portal Intro","description":"Sentence-to-picture intro. The lead words fade up one at a time, the line re-sets with a small rounded picture chip inside it and leans in until the chip takes the frame; a title types itself over the picture, lifts away, and the mark and the name arrive. Fitted frame by frame from a reference recording.","category":"scenes","tier":"free","aliases":[],"docsPath":"/docs/scenes/portal-intro","notes":"pass mode=\"dark\" if you are rendering onto a dark frame; the picture, title and mark are props.","exportName":"PortalIntro","target":"components/imgcli/portal-intro.tsx","importPath":"@/components/imgcli/portal-intro","files":["components/imgcli/portal-intro.tsx"],"dependencies":["remotion"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"lead","type":"string | undefined","required":false,"defaultExpression":"\"your launch video\""},{"name":"trail","type":"string | undefined","required":false,"defaultExpression":"\"in code\""},{"name":"image","type":"string | undefined","required":false,"defaultExpression":"DEFAULT_IMAGE"},{"name":"chipImage","type":"string | undefined","required":false},{"name":"title","type":"string | undefined","required":false,"defaultExpression":"\"Introducing\""},{"name":"brand","type":"string | undefined","required":false,"defaultExpression":"\"snapcn\""},{"name":"logo","type":"ReactNode","required":false},{"name":"logoSrc","type":"string | undefined","required":false},{"name":"overlay","type":"string | undefined","required":false,"defaultExpression":"\"#ffffff\""},{"name":"fontFamily","type":"string | undefined","required":false},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false,"defaultExpression":"\"light\""},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"className","type":"string | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":108,"controls":{"lead":{"type":"text","label":"Before the chip","default":"your launch video"},"trail":{"type":"text","label":"After the chip","default":"in code"},"title":{"type":"text","label":"Title","default":"Introducing"},"brand":{"type":"text","label":"Name","default":"snapcn"},"mode":{"type":"select","label":"Theme","default":"light","options":["light","dark"]},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"c3d2a8cc8f32","installHash":"277e6ab3289f8394"},
42
+ {"slug":"prompt-send","title":"Prompt Send","description":"AI prompt typing animation: a chat input types a prompt and a cursor clicks send. A composer that unrolls from a hairline, writes a brief into itself while the camera cuts in and rides the caret, then cuts back out to the send button as a pointer arrives and clicks it. The typing is eased, not constant — 17 chars/sec on the first word, 33 in the middle, a settle on the last three. Long copy scrolls the field under its own caret and extra suggestions wrap, so the panel fits whatever you put in it.","category":"ai-input","tier":"free","aliases":[],"docsPath":"/docs/ai-input/prompt-send","notes":"pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette and a bare Remotion render is black.","exportName":"PromptSend","target":"components/imgcli/prompt-send.tsx","importPath":"@/components/imgcli/prompt-send","files":["components/imgcli/prompt-send.tsx"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json","https://imgcli.com/r/input.json"],"props":[{"name":"text","type":"string | undefined","required":false,"defaultExpression":"\"Add a text reveal, a soft blur transition, and a gradient background\""},{"name":"placeholder","type":"string | undefined","required":false,"defaultExpression":"\"Describe the scene you want…\""},{"name":"chips","type":"string | string[] | undefined","required":false,"defaultExpression":"[\n \"Add a text reveal\",\n \"Try a blur transition\",\n \"Pick a background\",\n \"Assemble a scene\",\n ]"},{"name":"sendIcon","type":"ReactNode","required":false},{"name":"width","type":"number | undefined","required":false,"defaultExpression":"636.2"},{"name":"fieldHeight","type":"number | undefined","required":false,"defaultExpression":"121.2"},{"name":"fontSize","type":"number | undefined","required":false,"defaultExpression":"14"},{"name":"chipFontSize","type":"number | undefined","required":false,"defaultExpression":"12.3"},{"name":"radius","type":"number | undefined","required":false,"defaultExpression":"22"},{"name":"sendSize","type":"number | undefined","required":false,"defaultExpression":"27.4"},{"name":"fontFamily","type":"string | undefined","required":false},{"name":"revealAt","type":"number | undefined","required":false,"defaultExpression":"0.025"},{"name":"revealDuration","type":"number | undefined","required":false,"defaultExpression":"PANEL_GROW"},{"name":"fieldAt","type":"number | undefined","required":false,"defaultExpression":"0.417"},{"name":"caretAt","type":"number | undefined","required":false,"defaultExpression":"0.742"},{"name":"chipsAt","type":"number | undefined","required":false,"defaultExpression":"0.545"},{"name":"chipStagger","type":"number | undefined","required":false,"defaultExpression":"0.1"},{"name":"typeStart","type":"number | undefined","required":false,"defaultExpression":"0.915"},{"name":"typeDuration","type":"number | undefined","required":false,"defaultExpression":"3.025"},{"name":"cutInAt","type":"number | undefined","required":false,"defaultExpression":"1.975"},{"name":"cutOutAt","type":"number | undefined","required":false,"defaultExpression":"4.008"},{"name":"zoomIn","type":"number | undefined","required":false,"defaultExpression":"2.327"},{"name":"zoomOut","type":"number | undefined","required":false,"defaultExpression":"1.44"},{"name":"focusX","type":"number | undefined","required":false,"defaultExpression":"0.573"},{"name":"focusY","type":"number | undefined","required":false,"defaultExpression":"0.4881"},{"name":"outX","type":"number | undefined","required":false,"defaultExpression":"0.5305"},{"name":"outY","type":"number | undefined","required":false,"defaultExpression":"0.5261"},{"name":"cursorAt","type":"number | undefined","required":false,"defaultExpression":"4.042"},{"name":"cursorDuration","type":"number | undefined","required":false,"defaultExpression":"0.42"},{"name":"clickAt","type":"number | undefined","required":false,"defaultExpression":"4.658"},{"name":"cursor","type":"boolean | undefined","required":false,"defaultExpression":"true"},{"name":"accentColor","type":"string | undefined","required":false},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":165,"controls":{"text":{"type":"text","label":"Prompt","default":"Add a text reveal, a soft blur transition, and a gradient background"},"placeholder":{"type":"text","label":"Placeholder","default":"Describe the scene you want…"},"chips":{"type":"text","label":"Suggestions","default":"Add a text reveal, Try a blur transition, Pick a background, Assemble a scene"},"width":{"type":"number","label":"Panel width","default":636.2,"min":240,"max":890,"step":1},"fieldHeight":{"type":"number","label":"Field height","default":121.2,"min":40,"max":260,"step":1},"fontSize":{"type":"number","label":"Prompt size","default":14,"min":8,"max":32,"step":0.5},"chipFontSize":{"type":"number","label":"Chip size","default":12.3,"min":7,"max":24,"step":0.1},"radius":{"type":"number","label":"Radius","default":22,"min":0,"max":48,"step":1},"typeStart":{"type":"number","label":"Type at (s)","default":0.915,"min":0,"max":4,"step":0.01},"typeDuration":{"type":"number","label":"Type over (s)","default":3.025,"min":0.5,"max":8,"step":0.01},"chipsAt":{"type":"number","label":"Chips at (s)","default":0.545,"min":0,"max":4,"step":0.01},"chipStagger":{"type":"number","label":"Chip stagger (s)","default":0.1,"min":0,"max":0.6,"step":0.01},"cutInAt":{"type":"number","label":"Cut in at (s)","default":1.975,"min":0.1,"max":6,"step":0.01},"cutOutAt":{"type":"number","label":"Cut out at (s)","default":4.008,"min":0.2,"max":8,"step":0.01},"zoomIn":{"type":"number","label":"Zoom in","default":2.327,"min":1,"max":5,"step":0.001},"zoomOut":{"type":"number","label":"Zoom out","default":1.44,"min":1,"max":3,"step":0.001},"focusX":{"type":"number","label":"Caret X","default":0.573,"min":0,"max":1,"step":0.001},"focusY":{"type":"number","label":"Caret Y","default":0.4881,"min":0,"max":1,"step":0.001},"clickAt":{"type":"number","label":"Click at (s)","default":4.658,"min":0.5,"max":8,"step":0.01},"cursor":{"type":"boolean","label":"Pointer","default":true},"accentColor":{"type":"color","label":"Accent","default":"#3072db"},"mode":{"type":"select","label":"Mode","default":"light","options":["light","dark"]},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"a533e743a762","installHash":"0c51a6adb92862ac","measurement":{"sourceHash":"a533e743a762","width":1280,"height":720,"fps":30,"durationInFrames":165,"settle":{"base":165,"baseWords":12,"perWord":5.5},"copy":{"prop":"placeholder","pxPerChar":45.75,"maxChars":28}}},
43
+ {"slug":"prompt-zoom","title":"Prompt Zoom","description":"AI prompt zoom: an assistant home screen that cuts into the chat input as the prompt types. An assistant landing screen that offers its suggestions, then cuts — hard, in a single frame — into the caret, where the prompt types itself. The push-in is a measured 2.547× anchored on the text insertion point, not an animated zoom.","category":"ai-input","tier":"free","aliases":[],"docsPath":"/docs/ai-input/prompt-zoom","notes":"pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette and a bare Remotion render is black.","exportName":"PromptZoom","target":"components/imgcli/prompt-zoom.tsx","importPath":"@/components/imgcli/prompt-zoom","files":["components/imgcli/prompt-zoom.tsx"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json","https://imgcli.com/r/input.json"],"props":[{"name":"greeting","type":"string | undefined","required":false,"defaultExpression":"\"Up late?\""},{"name":"placeholder","type":"string | undefined","required":false,"defaultExpression":"\"How can I help you today?\""},{"name":"text","type":"string | undefined","required":false,"defaultExpression":"\"Get me a plan for tomorrow\""},{"name":"chips","type":"string[] | undefined","required":false,"defaultExpression":"[]"},{"name":"model","type":"string | undefined","required":false,"defaultExpression":"\"Auto\""},{"name":"effort","type":"string | undefined","required":false,"defaultExpression":"\"Medium\""},{"name":"typeStart","type":"number | undefined","required":false,"defaultExpression":"0.35"},{"name":"cutAt","type":"number | undefined","required":false,"defaultExpression":"1.0"},{"name":"charsPerSecond","type":"number | undefined","required":false,"defaultExpression":"18"},{"name":"zoom","type":"number | undefined","required":false,"defaultExpression":"2.547"},{"name":"focusX","type":"number | undefined","required":false,"defaultExpression":"0.27"},{"name":"focusY","type":"number | undefined","required":false,"defaultExpression":"0.516"},{"name":"accentColor","type":"string | undefined","required":false},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false},{"name":"fontFamily","type":"string | undefined","required":false},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":90,"controls":{"greeting":{"type":"text","label":"Greeting","default":"Up late?"},"text":{"type":"text","label":"Prompt","default":"Get me a plan for tomorrow"},"placeholder":{"type":"text","label":"Placeholder","default":"How can I help you today?"},"model":{"type":"text","label":"Model","default":"Auto"},"effort":{"type":"text","label":"Effort","default":"Medium"},"typeStart":{"type":"number","label":"Type at (s)","default":0.35,"min":0,"max":4,"step":0.01},"cutAt":{"type":"number","label":"Cut at (s)","default":1,"min":0.1,"max":3,"step":0.01},"zoom":{"type":"number","label":"Zoom","default":2.547,"min":1,"max":5,"step":0.01},"charsPerSecond":{"type":"number","label":"Chars / second","default":18,"min":4,"max":40,"step":1},"focusX":{"type":"number","label":"Focus X","default":0.27,"min":0,"max":1,"step":0.005},"focusY":{"type":"number","label":"Focus Y","default":0.516,"min":0,"max":1,"step":0.005},"accentColor":{"type":"color","label":"Accent","default":"#266DF0"},"mode":{"type":"select","label":"Mode","default":"light","options":["light","dark"]},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"d73e0eb4b096","installHash":"7fbb77f418b1b272","measurement":{"sourceHash":"d73e0eb4b096","width":1280,"height":720,"fps":30,"durationInFrames":90,"settle":{"base":80,"baseWords":2,"perWord":0},"copy":{"prop":"effort","pxPerChar":186.67,"maxChars":6}}},
44
+ {"slug":"pulsing-border","title":"Pulsing Border","description":"AI glow border: a pulsing thinking frame around the screen. Glowing 'AI is working' frame — a soft pulsing border overlay that breathes around the scene edges while a response streams.","category":"ai-input","tier":"free","aliases":[],"docsPath":"/docs","notes":"pulsing-border draws with WebGL, and Remotion's headless Chromium has no GL context by default — render it with `npx remotion render --gl=angle` (or set `Config.setChromiumOpenGlRenderer(\"angle\")`), or the render fails with 'WebGL is not supported in this browser'.","exportName":"PulsingBorder","target":"components/imgcli/pulsing-border.tsx","importPath":"@/components/imgcli/pulsing-border","files":["components/imgcli/pulsing-border.tsx"],"dependencies":["remotion","@paper-design/shaders-react"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"glowColorA","type":"string | undefined","required":false},{"name":"glowColorB","type":"string | undefined","required":false},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false},{"name":"minPixelRatio","type":"number | undefined","required":false},{"name":"maxPixelCount","type":"number | undefined","required":false},{"name":"webGlContextAttributes","type":"WebGLContextAttributes | undefined","required":false},{"name":"width","type":"string | number | undefined","required":false},{"name":"height","type":"string | number | undefined","required":false},{"name":"colorBack","type":"string | undefined","required":false,"defaultExpression":"\"#00000000\""},{"name":"colors","type":"string[] | undefined","required":false},{"name":"roundness","type":"number | undefined","required":false,"defaultExpression":"0.08"},{"name":"thickness","type":"number | undefined","required":false,"defaultExpression":"0.06"},{"name":"margin","type":"number | undefined","required":false},{"name":"marginLeft","type":"number | undefined","required":false},{"name":"marginRight","type":"number | undefined","required":false},{"name":"marginTop","type":"number | undefined","required":false},{"name":"marginBottom","type":"number | undefined","required":false},{"name":"aspectRatio","type":"\"square\" | \"auto\" | undefined","required":false},{"name":"softness","type":"number | undefined","required":false},{"name":"intensity","type":"number | undefined","required":false,"defaultExpression":"0.15"},{"name":"bloom","type":"number | undefined","required":false,"defaultExpression":"0.2"},{"name":"spots","type":"number | undefined","required":false},{"name":"spotSize","type":"number | undefined","required":false},{"name":"pulse","type":"number | undefined","required":false},{"name":"smoke","type":"number | undefined","required":false},{"name":"smokeSize","type":"number | undefined","required":false},{"name":"fit","type":"\"none\" | \"cover\" | \"contain\" | undefined","required":false},{"name":"scale","type":"number | undefined","required":false},{"name":"rotation","type":"number | undefined","required":false},{"name":"originX","type":"number | undefined","required":false},{"name":"originY","type":"number | undefined","required":false},{"name":"offsetX","type":"number | undefined","required":false},{"name":"offsetY","type":"number | undefined","required":false},{"name":"worldWidth","type":"number | undefined","required":false},{"name":"worldHeight","type":"number | undefined","required":false},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"0.6"}],"sourceHash":"976fb196e979","installHash":"de63b59a7d96a76a"},
45
+ {"slug":"punch-lines","title":"Punch Lines","description":"Kinetic typography title cards: bold statements that cut hard between beats. A run of full-frame title cards that cut hard between beats. A statement card is flicked in from the left line by line and settles on a critically damped curve, then rushes past the camera; a hero card punches its words up from a third of their size in a wave and pushes slowly forward until it cuts. Every curve is fitted from frame measurements — the slide to 0.42px rms over 37 frames.","category":"text","tier":"free","aliases":[],"docsPath":"/docs/text/punch-lines","notes":"pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette and a bare Remotion render is black.","exportName":"PunchLines","target":"components/imgcli/punch-lines.tsx","importPath":"@/components/imgcli/punch-lines","files":["components/imgcli/punch-lines.tsx"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"script","type":"string | undefined","required":false,"defaultExpression":"\"Ready-made scenes / for Remotion. | One command. Own it. | snapcn.\""},{"name":"styles","type":"string | undefined","required":false,"defaultExpression":"\"slide,punch\""},{"name":"sizes","type":"string | undefined","required":false,"defaultExpression":"\"1,0.945,2.7\""},{"name":"holds","type":"string | undefined","required":false,"defaultExpression":"\"48\""},{"name":"accentBeat","type":"number | undefined","required":false,"defaultExpression":"3"},{"name":"lead","type":"number | undefined","required":false,"defaultExpression":"4"},{"name":"fontSize","type":"number | undefined","required":false,"defaultExpression":"93"},{"name":"fontWeight","type":"string | number | undefined","required":false,"defaultExpression":"600"},{"name":"lineHeight","type":"number | undefined","required":false,"defaultExpression":"0.89"},{"name":"letterSpacing","type":"string | undefined","required":false,"defaultExpression":"\"-0.022em\""},{"name":"wordSpacing","type":"string | undefined","required":false,"defaultExpression":"\"-0.02em\""},{"name":"ground","type":"string | undefined","required":false},{"name":"ink","type":"string | undefined","required":false},{"name":"accentColor","type":"string | undefined","required":false,"defaultExpression":"\"#ff1c8e\""},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false},{"name":"fontFamily","type":"string | undefined","required":false},{"name":"slideFrom","type":"number | undefined","required":false,"defaultExpression":"-0.737"},{"name":"slideKick","type":"number | undefined","required":false,"defaultExpression":"7.34"},{"name":"slideSettle","type":"number | undefined","required":false,"defaultExpression":"2.846"},{"name":"lineStagger","type":"number | undefined","required":false,"defaultExpression":"3.5"},{"name":"slideDrop","type":"number | undefined","required":false,"defaultExpression":"0.313"},{"name":"motionBlur","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"punchFrom","type":"number | undefined","required":false,"defaultExpression":"0.32"},{"name":"punchFrames","type":"number | undefined","required":false,"defaultExpression":"15"},{"name":"wordStagger","type":"number | undefined","required":false,"defaultExpression":"2.8"},{"name":"pushFrom","type":"number | undefined","required":false,"defaultExpression":"0.778"},{"name":"pushRate","type":"number | undefined","required":false,"defaultExpression":"0.205"},{"name":"rushLead","type":"number | undefined","required":false,"defaultExpression":"12.2"},{"name":"rushFrames","type":"number | undefined","required":false,"defaultExpression":"18"},{"name":"rushTravel","type":"number | undefined","required":false,"defaultExpression":"0.85"},{"name":"fit","type":"number | undefined","required":false,"defaultExpression":"0.92"},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"className","type":"string | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":144,"controls":{"script":{"type":"text","label":"Script (| card, / line)","default":"Ready-made scenes / for Remotion. | One command. Own it. | snapcn."},"styles":{"type":"text","label":"Card looks","default":"slide,punch"},"sizes":{"type":"text","label":"Card sizes","default":"1,0.945,2.7"},"holds":{"type":"text","label":"Card lengths (frames)","default":"48"},"accentBeat":{"type":"number","label":"Accent card","default":3,"min":0,"max":8,"step":1},"fontSize":{"type":"number","label":"Font size","default":93,"min":24,"max":200,"step":1},"fontWeight":{"type":"select","label":"Font weight","default":"600","options":["400","500","600","700"]},"lineHeight":{"type":"number","label":"Line height (em)","default":0.89,"min":0.7,"max":1.6,"step":0.005},"letterSpacing":{"type":"text","label":"Letter spacing","default":"-0.022em"},"wordSpacing":{"type":"text","label":"Word spacing","default":"-0.02em"},"ground":{"type":"color","label":"Ground","default":"#faf9f6"},"ink":{"type":"color","label":"Type","default":"#141414"},"accentColor":{"type":"color","label":"Accent","default":"#ff1c8e"},"lead":{"type":"number","label":"Entrance lead","default":4,"min":0,"max":30,"step":1},"slideFrom":{"type":"number","label":"Slide from (em)","default":-0.737,"min":-3,"max":0,"step":0.01},"slideKick":{"type":"number","label":"Slide kick (em/s)","default":7.34,"min":0,"max":20,"step":0.1},"slideSettle":{"type":"number","label":"Slide settle","default":2.846,"min":0.5,"max":8,"step":0.05},"lineStagger":{"type":"number","label":"Line stagger","default":3.5,"min":0,"max":20,"step":0.5},"slideDrop":{"type":"number","label":"Slide drop (em)","default":0.313,"min":-1,"max":1,"step":0.01},"motionBlur":{"type":"number","label":"Motion blur","default":1,"min":0,"max":1,"step":0.05},"punchFrom":{"type":"number","label":"Punch from","default":0.32,"min":0.05,"max":1,"step":0.01},"punchFrames":{"type":"number","label":"Punch","default":15,"min":2,"max":40,"step":0.5},"wordStagger":{"type":"number","label":"Word stagger","default":2.8,"min":0,"max":12,"step":0.1},"pushFrom":{"type":"number","label":"Push from","default":0.778,"min":0.3,"max":1,"step":0.005},"pushRate":{"type":"number","label":"Push per second","default":0.205,"min":0,"max":1,"step":0.005},"rushLead":{"type":"number","label":"Rush lead","default":12.2,"min":0,"max":40,"step":0.2},"rushFrames":{"type":"number","label":"Rush","default":18,"min":4,"max":60,"step":1},"rushTravel":{"type":"number","label":"Rush travel","default":0.85,"min":0.2,"max":0.95,"step":0.01},"fit":{"type":"number","label":"Fit width","default":0.92,"min":0.4,"max":1,"step":0.01},"mode":{"type":"select","label":"Mode","default":"light","options":["light","dark"]},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"6ff4f646d14e","installHash":"3830bc3d1989c7db","measurement":{"sourceHash":"6ff4f646d14e","width":1280,"height":720,"fps":30,"durationInFrames":144,"settle":{"base":144,"baseWords":12,"perWord":0},"copy":{"prop":"script","pxPerChar":15.61,"maxChars":86}}},
46
+ {"slug":"reel-collage","title":"Reel Collage","description":"Photo reel that shuts into a collage. A picture cuts through a quick reel between two captions and slowly zooms, then shuts like an eyelid while the captions fold into one stacked line; the copy swaps, the lines split, and a scattered collage blooms in around them on a peach flush. Every curve is fitted from a reference recording, frame by frame.","category":"scenes","tier":"free","aliases":[],"docsPath":"/docs/scenes/reel-collage","notes":"the page, glow and flush are props; the captions take the theme's foreground.","exportName":"ReelCollage","target":"components/imgcli/reel-collage.tsx","importPath":"@/components/imgcli/reel-collage","files":["components/imgcli/reel-collage.tsx"],"dependencies":["remotion"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"topLine","type":"string | undefined","required":false,"defaultExpression":"\"The videos\""},{"name":"bottomLine","type":"string | undefined","required":false,"defaultExpression":"\"That you ship\""},{"name":"swapTop","type":"string | undefined","required":false,"defaultExpression":"\"Especially on\""},{"name":"swapBottom","type":"string | undefined","required":false,"defaultExpression":"\"Launch day\""},{"name":"slides","type":"string[] | undefined","required":false,"defaultExpression":"DEFAULT_SLIDES"},{"name":"collage","type":"string[] | undefined","required":false,"defaultExpression":"DEFAULT_COLLAGE"},{"name":"background","type":"string | undefined","required":false,"defaultExpression":"\"#f5f4f2\""},{"name":"glowColor","type":"string | undefined","required":false,"defaultExpression":"\"#dfe7e3\""},{"name":"flushColor","type":"string | undefined","required":false,"defaultExpression":"\"#fdc7bc\""},{"name":"textColor","type":"string | undefined","required":false},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false},{"name":"fontFamily","type":"string | undefined","required":false},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"className","type":"string | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":96,"controls":{"topLine":{"type":"text","label":"Top caption","default":"The videos"},"bottomLine":{"type":"text","label":"Bottom caption","default":"That you ship"},"swapTop":{"type":"text","label":"Swap, first line","default":"Especially on"},"swapBottom":{"type":"text","label":"Swap, second line","default":"Launch day"},"background":{"type":"color","label":"Page","default":"#f5f4f2"},"glowColor":{"type":"color","label":"Glow","default":"#dfe7e3"},"flushColor":{"type":"color","label":"Flush","default":"#fdc7bc"},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":1,"max":4,"step":0.25}}},"sourceHash":"3d8382bf19cb","installHash":"6a9dc8a6d69836af","measurement":{"sourceHash":"3d8382bf19cb","width":1280,"height":720,"fps":30,"durationInFrames":96,"settle":{"base":96,"baseWords":0,"perWord":0},"copy":{"prop":"topLine","pxPerChar":128.1,"maxChars":10}}},
47
+ {"slug":"reel-wall","title":"Reel Wall","description":"Curved video wall for Remotion. A ring of vertical clips turns past in the dark: it eases in from rest on twos, then keeps turning at an even speed. The ring, lens and ease are fitted frame by frame from a reference recording.","category":"scenes","tier":"free","aliases":[],"docsPath":"/docs/scenes/reel-wall","notes":"pass your own vertical clips as videos; they repeat around the ring.","exportName":"ReelWall","target":"components/imgcli/reel-wall.tsx","importPath":"@/components/imgcli/reel-wall","files":["components/imgcli/reel-wall.tsx"],"dependencies":["remotion"],"registryDependencies":[],"props":[{"name":"videos","type":"string[] | undefined","required":false,"defaultExpression":"DEFAULT_VIDEOS"},{"name":"background","type":"string | undefined","required":false,"defaultExpression":"\"#0e0e0e\""},{"name":"cardColor","type":"string | undefined","required":false,"defaultExpression":"\"#1a1a1a\""},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"className","type":"string | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":24,"durationInFrames":216,"controls":{"background":{"type":"color","label":"Page","default":"#0e0e0e"},"cardColor":{"type":"color","label":"Card","default":"#1a1a1a"},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"2deb7388fdd6","installHash":"bb7d12d707345b9d"},
48
+ {"slug":"roster-grant","title":"Roster Grant","description":"Access granted animation: a cursor clicks a CTA and team avatars switch on. Three rows of roster cards stream past a call to action, a pointer walks in and clicks it, and the monograms start turning to the accent one every seven frames — top row, middle, bottom, top, bottom, middle, so it reads as a system granting rather than a list iterating. The camera and the middle row's clearance around the pill settle on the same measured exponential; the outer rows deliberately do not, which is what stops the two sides ever looking symmetric.","category":"scenes","tier":"free","aliases":[],"docsPath":"/docs/scenes/roster-grant","notes":"pass rows as three arrays of { name, role } and label for the button.","exportName":"RosterGrant","target":"components/imgcli/roster-grant.tsx","importPath":"@/components/imgcli/roster-grant","files":["components/imgcli/roster-grant.tsx"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"rows","type":"readonly (readonly RosterEntry[])[] | undefined","required":false,"defaultExpression":"SNAPCN_ROSTER"},{"name":"label","type":"string | undefined","required":false,"defaultExpression":"\"Install all\""},{"name":"accentColor","type":"string | undefined","required":false},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false},{"name":"fontFamily","type":"string | undefined","required":false},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":120,"controls":{"label":{"type":"text","label":"Button","default":"Install all"},"accentColor":{"type":"color","label":"Accent","default":"#3072db"},"theme":{"type":"select","label":"Theme","default":"light","options":["light","dark"]},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"1b100f8a2e1f","installHash":"e22979f9c93e5b0d","measurement":{"sourceHash":"1b100f8a2e1f","width":1280,"height":720,"fps":30,"durationInFrames":120,"settle":{"base":120,"baseWords":2,"perWord":0},"copy":{"prop":"label","pxPerChar":116.45,"maxChars":11}}},
49
+ {"slug":"screen-recording","title":"Screen Recording","description":"Screen recording zoom: crop and auto-zoom a product demo capture. The treatment that turns a raw screen capture into a shot: crop the browser and OS chrome off each edge as a fraction, fit what is left to the frame, and run a keyframed camera that pushes in on whatever matters at a given frame and holds until the next move. Takes a video or a still through the same track.","category":"screens","tier":"free","aliases":[],"docsPath":"/docs/screens/screen-recording","notes":"pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette and a bare Remotion render is black.","exportName":"ScreenRecording","target":"components/imgcli/screen-recording.tsx","importPath":"@/components/imgcli/screen-recording","files":["components/imgcli/screen-recording.tsx"],"dependencies":["remotion"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"src","type":"string","required":true},{"name":"crop","type":"ScreenCrop | undefined","required":false},{"name":"cropTop","type":"number | undefined","required":false},{"name":"cropRight","type":"number | undefined","required":false},{"name":"cropBottom","type":"number | undefined","required":false},{"name":"cropLeft","type":"number | undefined","required":false},{"name":"sourceAspect","type":"number | undefined","required":false},{"name":"fit","type":"ScreenRecordingFit | undefined","required":false,"defaultExpression":"\"cover\""},{"name":"backdropColor","type":"string | undefined","required":false},{"name":"camera","type":"CameraMove[] | undefined","required":false,"defaultExpression":"DEMO_CAMERA"},{"name":"radius","type":"number | undefined","required":false,"defaultExpression":"0"},{"name":"trimBefore","type":"number | undefined","required":false},{"name":"audio","type":"boolean | undefined","required":false,"defaultExpression":"false"},{"name":"entrance","type":"ScreenRecordingEntrance | undefined","required":false,"defaultExpression":"\"fade\""},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"className","type":"string | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":139,"controls":{"src":{"type":"image","label":"Recording","default":"https://media.snapcn.dev/demos/answer-stream.mp4"},"cropTop":{"type":"number","label":"Crop top","default":0,"min":0,"max":0.4,"step":0.005},"cropRight":{"type":"number","label":"Crop right","default":0,"min":0,"max":0.4,"step":0.005},"cropBottom":{"type":"number","label":"Crop bottom","default":0,"min":0,"max":0.4,"step":0.005},"cropLeft":{"type":"number","label":"Crop left","default":0,"min":0,"max":0.4,"step":0.005},"fit":{"type":"select","label":"Fit","default":"cover","options":["cover","contain"]},"backdropColor":{"type":"color","label":"Letterbox","default":"#faf9f6"},"entrance":{"type":"select","label":"Entrance","default":"fade","options":["fade","none"]},"radius":{"type":"number","label":"Corner radius","default":0,"min":0,"max":48,"step":1},"trimBefore":{"type":"number","label":"Trim in","default":0,"min":0,"max":300,"step":1},"audio":{"type":"boolean","label":"Audio","default":false},"speed":{"type":"number","label":"Speed","default":1,"min":1,"max":4,"step":0.25}}},"sourceHash":"0c317007da8e","installHash":"fddfce634ea7065c","measurement":{"sourceHash":"0c317007da8e","width":1280,"height":720,"fps":30,"durationInFrames":139,"settle":{"base":125,"baseWords":0,"perWord":0}}},
50
+ {"slug":"search-typing","title":"Search Typing","description":"Search bar typing animation for AI search and command palette demos. A search field wider than the shot: two thirds in frame, then it comes forward, types across its left half, pages to its right half, and goes back. Every proportion is measured, and the scale pivots on the text baseline so the type never climbs the pixel grid.","category":"ai-input","tier":"free","aliases":[],"docsPath":"/docs/ai-input/search-typing","notes":"pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette and a bare Remotion render is black.","exportName":"SearchTyping","target":"components/imgcli/search-typing.tsx","importPath":"@/components/imgcli/search-typing","files":["components/imgcli/search-typing.tsx"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json","https://imgcli.com/r/caret.json","https://imgcli.com/r/input.json"],"props":[{"name":"text","type":"string","required":true},{"name":"charsPerSecond","type":"number | undefined","required":false,"defaultExpression":"14"},{"name":"humanize","type":"number | undefined","required":false,"defaultExpression":"0.35"},{"name":"wordPause","type":"number | undefined","required":false,"defaultExpression":"1.55"},{"name":"punctuationPause","type":"number | undefined","required":false,"defaultExpression":"2.2"},{"name":"startDelay","type":"number | undefined","required":false,"defaultExpression":"0.5"},{"name":"dollyDuration","type":"number | undefined","required":false,"defaultExpression":"0.8"},{"name":"panDuration","type":"number | undefined","required":false,"defaultExpression":"0.5"},{"name":"holdAfter","type":"number | undefined","required":false,"defaultExpression":"0.9"},{"name":"recedeDuration","type":"number | undefined","required":false,"defaultExpression":"1.2"},{"name":"dolly","type":"number | undefined","required":false,"defaultExpression":"1.25"},{"name":"fieldHeight","type":"number | undefined","required":false,"defaultExpression":"0.27"},{"name":"frontVisible","type":"number | undefined","required":false,"defaultExpression":"0.56"},{"name":"edgeInset","type":"number | undefined","required":false,"defaultExpression":"40"},{"name":"caretBlinksPerSecond","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"caret","type":"boolean | undefined","required":false,"defaultExpression":"true"},{"name":"surface","type":"SearchTypingSurface | undefined","required":false,"defaultExpression":"\"shadcn\""},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false},{"name":"icon","type":"SearchTypingIcon | undefined","required":false,"defaultExpression":"\"search\""},{"name":"fontFamily","type":"string | undefined","required":false},{"name":"fontWeight","type":"number | undefined","required":false,"defaultExpression":"300"},{"name":"seed","type":"string | undefined","required":false,"defaultExpression":"\"search-typing\""},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"className","type":"string | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":60,"durationInFrames":420,"controls":{"text":{"type":"text","label":"Text","default":"How do I make my product demo actually look expensive?"},"charsPerSecond":{"type":"number","label":"Chars / second","default":14,"min":4,"max":40,"step":1},"humanize":{"type":"number","label":"Humanize","default":0.35,"min":0,"max":1,"step":0.05},"wordPause":{"type":"number","label":"Word pause","default":1.55,"min":1,"max":4,"step":0.05},"punctuationPause":{"type":"number","label":"Punctuation pause","default":2.2,"min":1,"max":6,"step":0.1},"startDelay":{"type":"number","label":"Start delay (s)","default":0.5,"min":0,"max":4,"step":0.1},"dollyDuration":{"type":"number","label":"Comes forward (s)","default":0.8,"min":0.1,"max":4,"step":0.1},"panDuration":{"type":"number","label":"Pan to right half (s)","default":0.5,"min":0.1,"max":3,"step":0.05},"holdAfter":{"type":"number","label":"Hold at front (s)","default":0.9,"min":0,"max":6,"step":0.1},"recedeDuration":{"type":"number","label":"Goes back (s)","default":1.2,"min":0,"max":4,"step":0.1},"dolly":{"type":"number","label":"Dolly (measured: 1.25)","default":1.25,"min":1,"max":2,"step":0.01},"fieldHeight":{"type":"number","label":"Field height (× frame)","default":0.27,"min":0.12,"max":0.45,"step":0.005},"frontVisible":{"type":"number","label":"In frame at the front","default":0.56,"min":0.3,"max":1,"step":0.01},"edgeInset":{"type":"number","label":"Edge inset (px)","default":40,"min":0,"max":160,"step":4},"caretBlinksPerSecond":{"type":"number","label":"Caret blinks / second","default":1,"min":0,"max":4,"step":0.1},"caret":{"type":"boolean","label":"Caret","default":true},"surface":{"type":"select","label":"Surface","default":"shadcn","options":["shadcn","glass"]},"mode":{"type":"select","label":"Mode","default":"light","options":["light","dark"]},"icon":{"type":"select","label":"Icon","default":"search","options":["search","sparkle","none"]},"fontWeight":{"type":"number","label":"Font weight","default":300,"min":100,"max":700,"step":100},"seed":{"type":"text","label":"Seed","default":"search-typing"},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":1,"max":4,"step":0.25}}},"sourceHash":"2fe9e1079d45","installHash":"fff98e0dab729397","measurement":{"sourceHash":"2fe9e1079d45","width":1280,"height":720,"fps":60,"durationInFrames":420,"settle":{"base":403,"baseWords":10,"perWord":25},"copy":{"prop":"seed","pxPerChar":98.54,"maxChars":13}}},
51
+ {"slug":"sky-lockup","title":"Sky Lockup","description":"Logo outro in under two seconds. A one-line promise takes itself apart word by word, the white page washes off to a soft sky, and the mark in the middle of the sentence slides over, turns white and picks up your wordmark. Measured frame by frame off a reference recording.","category":"scenes","tier":"free","aliases":[],"docsPath":"/docs/scenes/sky-lockup","notes":"57 frames at 30fps; paints its own background. Pass your logo as SVG paths (logo={{ width, height, shapes }}).","exportName":"SkyLockup","target":"components/imgcli/sky-lockup/index.tsx","importPath":"@/components/imgcli/sky-lockup","files":["components/imgcli/sky-lockup/index.tsx","components/imgcli/sky-lockup/data.ts"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"wordmark","type":"string | undefined","required":false},{"name":"logo","type":"{ width: number; height: number; shapes: readonly string[]; } | undefined","required":false},{"name":"before","type":"string | undefined","required":false},{"name":"after","type":"string | undefined","required":false},{"name":"sky","type":"string | undefined","required":false},{"name":"fontFamily","type":"string | undefined","required":false},{"name":"fontWeight","type":"number | undefined","required":false},{"name":"fontSize","type":"number | undefined","required":false},{"name":"wordNudge","type":"[number, number][] | undefined","required":false},{"name":"wordTracking","type":"number[] | undefined","required":false},{"name":"wordmarkFont","type":"string | undefined","required":false},{"name":"wordmarkWeight","type":"number | undefined","required":false},{"name":"wordmarkSize","type":"number | undefined","required":false},{"name":"wordmarkTracking","type":"number | undefined","required":false},{"name":"wordmarkGap","type":"number | undefined","required":false},{"name":"lockupColor","type":"string | undefined","required":false},{"name":"speed","type":"number | undefined","required":false},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":57,"controls":{"before":{"type":"text","label":"Before the mark","default":"your animations"},"after":{"type":"text","label":"After the mark","default":"as one install"},"wordmark":{"type":"text","label":"Wordmark","default":"snapcn"},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"a5ac136f308c","installHash":"cfcc8040b86a2334","measurement":{"sourceHash":"a5ac136f308c","width":1280,"height":720,"fps":30,"durationInFrames":57,"settle":{"base":57,"baseWords":2,"perWord":0},"copy":{"prop":"wordmark","pxPerChar":213.5,"maxChars":6}}},
52
+ {"slug":"spec-sweep","title":"Spec Sweep","description":"A one-line spec slides in word by word while a highlight runs along it and an icon charges up","category":"text","tier":"free","aliases":[],"docsPath":"/docs/text/spec-sweep","notes":"75 frames at 30fps.","exportName":"SpecSweep","target":"components/imgcli/spec-sweep/index.tsx","importPath":"@/components/imgcli/spec-sweep","files":["components/imgcli/spec-sweep/index.tsx","components/imgcli/spec-sweep/data.ts"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"segments","type":"SpecSegment[] | undefined","required":false,"defaultExpression":"DEFAULT_SEGMENTS"},{"name":"icon","type":"string | undefined","required":false,"defaultExpression":"BOLT"},{"name":"iconBox","type":"[number, number] | undefined","required":false,"defaultExpression":"ICON_BOX"},{"name":"iconSize","type":"number | undefined","required":false,"defaultExpression":"1.452"},{"name":"accentColor","type":"string | undefined","required":false},{"name":"iconDim","type":"number | undefined","required":false,"defaultExpression":"0.39"},{"name":"iconRim","type":"number | undefined","required":false,"defaultExpression":"1.47"},{"name":"iconRimColor","type":"string | undefined","required":false},{"name":"chargeDelay","type":"number | undefined","required":false,"defaultExpression":"11.47"},{"name":"chargeFrames","type":"number | undefined","required":false,"defaultExpression":"30"},{"name":"fontFamily","type":"string | undefined","required":false},{"name":"fontSize","type":"number | undefined","required":false,"defaultExpression":"85.15"},{"name":"fontWeight","type":"number | undefined","required":false,"defaultExpression":"500"},{"name":"travel","type":"number | undefined","required":false,"defaultExpression":"1.466"},{"name":"stagger","type":"number | undefined","required":false,"defaultExpression":"2"},{"name":"sweepFrames","type":"number | undefined","required":false,"defaultExpression":"54"},{"name":"mutedLevel","type":"number | undefined","required":false,"defaultExpression":"0.6"},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false,"defaultExpression":"\"dark\""},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":75,"controls":{"accentColor":{"type":"color","label":"Icon","default":"#3577e0"},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"fontSize":{"type":"number","label":"Type size","default":85.15,"min":40,"max":140,"step":1},"mode":{"type":"select","label":"Mode","default":"dark","options":["light","dark"]},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"ec7de095f86c","installHash":"7c8d99971b1c8b66"},
53
+ {"slug":"status-cycle","title":"Status Cycle","description":"Status badge animation: a pill whose label cycles through states. A centred line whose status pill cycles: the label rolls up behind a hard clip while the pill's width springs past its target and back, and the line re-centres around it. The field then crossfades and a column of chips steps up from below. Copy, palette and every timing are props; the curves are fitted from frame measurements, not eyeballed.","category":"scenes","tier":"free","aliases":[],"docsPath":"/docs/scenes/status-cycle","notes":"pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette and a bare Remotion render is black.","exportName":"StatusCycle","target":"components/imgcli/status-cycle.tsx","importPath":"@/components/imgcli/status-cycle","files":["components/imgcli/status-cycle.tsx"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"prefix","type":"string | undefined","required":false,"defaultExpression":"\"snapcn is\""},{"name":"statuses","type":"string | string[] | undefined","required":false,"defaultExpression":"[\"animating\", \"transitioning\", \"rendering a scene\", \"installed\"]"},{"name":"chips","type":"string | string[] | undefined","required":false,"defaultExpression":"[\n \"text-reveal\",\n \"phone-frame\",\n \"answer-stream\",\n \"word-flip\",\n \"orbit-gallery\",\n ]"},{"name":"fieldColor","type":"string | undefined","required":false},{"name":"pageColor","type":"string | undefined","required":false},{"name":"pillColor","type":"string | undefined","required":false},{"name":"pillLabelColor","type":"string | undefined","required":false},{"name":"prefixColor","type":"string | undefined","required":false},{"name":"chipFills","type":"string | string[] | undefined","required":false},{"name":"chipTextColor","type":"string | undefined","required":false},{"name":"chipBorderColor","type":"string | undefined","required":false},{"name":"fontWeight","type":"number | undefined","required":false,"defaultExpression":"400"},{"name":"chipFontWeight","type":"number | undefined","required":false,"defaultExpression":"400"},{"name":"pillRadius","type":"number | undefined","required":false},{"name":"chipRadius","type":"number | undefined","required":false},{"name":"chipBorderWidth","type":"number | undefined","required":false},{"name":"pillCenterY","type":"number | undefined","required":false,"defaultExpression":"PILL_CY"},{"name":"motion","type":"Partial<StatusCycleMotion> | undefined","required":false},{"name":"fontSize","type":"number | undefined","required":false},{"name":"chipFontSize","type":"number | undefined","required":false},{"name":"fontFamily","type":"string | undefined","required":false},{"name":"statusHold","type":"number | undefined","required":false,"defaultExpression":"30"},{"name":"introFrames","type":"number | undefined","required":false,"defaultExpression":"24"},{"name":"chipStagger","type":"number | undefined","required":false,"defaultExpression":"8"},{"name":"startAt","type":"number | undefined","required":false,"defaultExpression":"0"},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":198,"controls":{"prefix":{"type":"text","label":"Prefix","default":"snapcn is"},"statuses":{"type":"text","label":"Statuses (comma-separated)","default":"animating, transitioning, rendering a scene, installed"},"chips":{"type":"text","label":"Chips (comma-separated)","default":"text-reveal, phone-frame, answer-stream, word-flip, orbit-gallery"},"fieldColor":{"type":"color","label":"Field (act 1)","default":"#3577e0"},"pageColor":{"type":"color","label":"Page (act 2)","default":"#faf9f6"},"pillColor":{"type":"color","label":"Pill","default":"#141414"},"pillLabelColor":{"type":"color","label":"Pill label","default":"rgb(178, 205, 247)"},"prefixColor":{"type":"color","label":"Prefix ink","default":"#141414"},"chipFills":{"type":"text","label":"Chip fills (comma-separated)","default":"#ffffff, rgb(226, 236, 253), #3577e0"},"chipTextColor":{"type":"color","label":"Chip ink","default":"#141414"},"chipBorderColor":{"type":"color","label":"Chip hairline","default":"rgb(160, 160, 160)"},"fontWeight":{"type":"select","label":"Status weight","default":"400","options":["400","500","600","700"]},"chipFontWeight":{"type":"select","label":"Chip weight","default":"400","options":["400","500","600","700"]},"fontSize":{"type":"number","label":"Status size","default":63,"min":24,"max":140,"step":1},"chipFontSize":{"type":"number","label":"Chip size","default":160,"min":48,"max":260,"step":2},"introFrames":{"type":"number","label":"Intro length","default":24,"min":8,"max":60,"step":1},"statusHold":{"type":"number","label":"Status hold","default":30,"min":10,"max":60,"step":1},"chipStagger":{"type":"number","label":"Chip stagger","default":8,"min":4,"max":30,"step":1},"pillCenterY":{"type":"number","label":"Lockup height","default":0.516,"min":0.2,"max":0.8,"step":0.004},"startAt":{"type":"number","label":"Start at (frames)","default":0,"min":0,"max":60,"step":1},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":1,"max":4,"step":0.25}}},"sourceHash":"51946cb17213","installHash":"476c9fbe8b639ee1","measurement":{"sourceHash":"51946cb17213","width":1280,"height":720,"fps":30,"durationInFrames":198,"settle":{"base":198,"baseWords":2,"perWord":0},"copy":{"prop":"prefix","pxPerChar":131,"maxChars":9}}},
54
+ {"slug":"terminal-simulator","title":"Terminal Simulator","description":"Terminal animation: CLI demo that types commands and prints output. Terminal window with chunked command playback, freeze-frame pauses, step scrolling, and an optional cursor-pinned zoom camera.","category":"screens","tier":"free","aliases":[],"docsPath":"/docs/screens/terminal-simulator","notes":"pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette and a bare Remotion render is black.","exportName":"TerminalSimulator","target":"components/imgcli/terminal-simulator.tsx","importPath":"@/components/imgcli/terminal-simulator","files":["components/imgcli/terminal-simulator.tsx"],"dependencies":["remotion"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"lines","type":"TerminalLine[] | undefined","required":false,"defaultExpression":"DEFAULT_LINES"},{"name":"intro","type":"string | null | undefined","required":false,"defaultExpression":"DEFAULT_INTRO"},{"name":"command","type":"CommandSpec | null | undefined","required":false,"defaultExpression":"DEFAULT_COMMAND"},{"name":"background","type":"string | undefined","required":false},{"name":"borderColor","type":"string | undefined","required":false},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false},{"name":"fontFamily","type":"string | undefined","required":false},{"name":"fontSize","type":"number | undefined","required":false,"defaultExpression":"18"},{"name":"charsPerFrame","type":"number | undefined","required":false,"defaultExpression":"2"},{"name":"chunkSize","type":"number | undefined","required":false,"defaultExpression":"3"},{"name":"zoom","type":"boolean | TerminalZoom | undefined","required":false,"defaultExpression":"false"},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"className","type":"string | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":200,"controls":{"intro":{"type":"text","label":"Intro","default":"*work* one step at a *time.*"},"background":{"type":"color","label":"Panel surface","default":"#141417"},"borderColor":{"type":"color","label":"Panel hairline","default":"#26272B"},"fontSize":{"type":"number","label":"Font size","default":18,"min":10,"max":32,"step":1},"charsPerFrame":{"type":"number","label":"Chars / frame","default":2,"min":0.25,"max":6,"step":0.25},"chunkSize":{"type":"number","label":"Chunk size","default":3,"min":1,"max":20,"step":1},"zoom":{"type":"boolean","label":"Extra zoom","default":false},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":1,"max":4,"step":0.25}}},"sourceHash":"e539fb50bde4","installHash":"f30e1ef028e25f71","measurement":{"sourceHash":"e539fb50bde4","width":1280,"height":720,"fps":30,"durationInFrames":200,"settle":{"base":200,"baseWords":6,"perWord":0},"copy":{"prop":"intro","pxPerChar":45.75,"maxChars":28}}},
55
+ {"slug":"text-build","title":"Text Build","description":"Word-by-word text build animation that keeps the line centred. Words enter one at a time while already-placed words physically reflow to stay centered — a growing line on the x axis or a growing stack on the y axis.","category":"text","tier":"free","aliases":[],"docsPath":"/docs/text/text-build","notes":"pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette and a bare Remotion render is black.","exportName":"TextBuild","target":"components/imgcli/text-build.tsx","importPath":"@/components/imgcli/text-build","files":["components/imgcli/text-build.tsx"],"dependencies":["remotion"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"text","type":"string","required":true},{"name":"axis","type":"TextBuildAxis | undefined","required":false,"defaultExpression":"\"x\""},{"name":"entryOffset","type":"number | undefined","required":false},{"name":"gap","type":"number | undefined","required":false},{"name":"firstDuration","type":"number | undefined","required":false,"defaultExpression":"10"},{"name":"pushDuration","type":"number | undefined","required":false,"defaultExpression":"13"},{"name":"entryScale","type":"number | undefined","required":false,"defaultExpression":"0.992"},{"name":"entryBlur","type":"number | undefined","required":false},{"name":"reflowBlur","type":"number | undefined","required":false,"defaultExpression":"0.8"},{"name":"easing","type":"[number, number, number, number] | undefined","required":false,"defaultExpression":"[0.2, 0.8, 0.2, 1]"},{"name":"fontSize","type":"number | undefined","required":false,"defaultExpression":"72"},{"name":"color","type":"string | undefined","required":false},{"name":"fontWeight","type":"number | undefined","required":false,"defaultExpression":"600"},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"className","type":"string | undefined","required":false},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false},{"name":"fontFamily","type":"string | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":75,"controls":{"text":{"type":"text","label":"Text","default":"Ship. Test. Deploy. Repeat."},"axis":{"type":"select","label":"Axis","default":"x","options":["x","y"]},"entryOffset":{"type":"number","label":"Entry offset","default":88,"min":8,"max":160,"step":1},"gap":{"type":"number","label":"Gap","default":10,"min":0,"max":48,"step":1},"firstDuration":{"type":"number","label":"First duration","default":10,"min":4,"max":30,"step":1},"pushDuration":{"type":"number","label":"Push duration","default":13,"min":4,"max":30,"step":1},"entryScale":{"type":"number","label":"Entry scale","default":0.992,"min":0.9,"max":1,"step":0.001},"entryBlur":{"type":"number","label":"Entry blur","default":3.5,"min":0,"max":10,"step":0.1},"reflowBlur":{"type":"number","label":"Reflow blur","default":0.8,"min":0,"max":4,"step":0.1},"fontSize":{"type":"number","label":"Font size","default":72,"min":12,"max":160,"step":1},"color":{"type":"color","label":"Color","default":"#101828"},"fontWeight":{"type":"select","label":"Font weight","default":"600","options":["400","500","600","700"]},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":1,"max":4,"step":0.25}}},"sourceHash":"684a8066422f","installHash":"95e45d197be6ed42","measurement":{"sourceHash":"684a8066422f","width":1280,"height":720,"fps":30,"durationInFrames":75,"settle":{"base":49,"baseWords":4,"perWord":13},"copy":{"prop":"text","pxPerChar":29.85,"maxChars":39}}},
56
+ {"slug":"text-highlight","title":"Text Highlight","description":"Text highlight animation: marker highlighter, underline, strikethrough and shimmer on a word. Animated emphasis on one span inside a static sentence — marker sweep, color shift, underline, strikethrough-replace, or shimmer.","category":"text","tier":"free","aliases":[],"docsPath":"/docs/text/text-highlight","notes":"pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette and a bare Remotion render is black.","exportName":"TextHighlight","target":"components/imgcli/text-highlight.tsx","importPath":"@/components/imgcli/text-highlight","files":["components/imgcli/text-highlight.tsx"],"dependencies":["remotion"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"before","type":"string | undefined","required":false,"defaultExpression":"\"\""},{"name":"highlight","type":"string","required":true},{"name":"after","type":"string | undefined","required":false,"defaultExpression":"\"\""},{"name":"preset","type":"TextHighlightPreset | undefined","required":false,"defaultExpression":"\"logo-wipe\""},{"name":"baseColor","type":"string | undefined","required":false},{"name":"accentColor","type":"string | undefined","required":false},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false},{"name":"fontFamily","type":"string | undefined","required":false},{"name":"highlightedTextColor","type":"string | undefined","required":false},{"name":"replaceWith","type":"string | undefined","required":false},{"name":"startAt","type":"number | undefined","required":false,"defaultExpression":"6"},{"name":"drawDuration","type":"number | undefined","required":false,"defaultExpression":"14"},{"name":"springConfig","type":"TextHighlightSpringConfig | undefined","required":false},{"name":"thickness","type":"number | undefined","required":false},{"name":"shineColor","type":"string | undefined","required":false},{"name":"logo","type":"ReactNode","required":false},{"name":"logoSrc","type":"string | undefined","required":false},{"name":"logoScale","type":"number | undefined","required":false,"defaultExpression":"1.05"},{"name":"spinTurns","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"holdDuration","type":"number | undefined","required":false,"defaultExpression":"12"},{"name":"rushDuration","type":"number | undefined","required":false,"defaultExpression":"24"},{"name":"rushScale","type":"number | undefined","required":false,"defaultExpression":"42"},{"name":"rushDrift","type":"number | undefined","required":false,"defaultExpression":"0.55"},{"name":"swingOut","type":"number | undefined","required":false,"defaultExpression":"0.25"},{"name":"coverColor","type":"string | undefined","required":false},{"name":"fontSize","type":"number | undefined","required":false,"defaultExpression":"56"},{"name":"fontWeight","type":"number | undefined","required":false,"defaultExpression":"600"},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"className","type":"string | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":56,"controls":{"before":{"type":"text","label":"Before","default":"Powered by "},"highlight":{"type":"text","label":"Highlight / wordmark","default":"Northwind"},"after":{"type":"text","label":"After","default":""},"preset":{"type":"select","label":"Preset","default":"logo-wipe","options":["logo-wipe","marker","color","underline","strikethrough","shimmer"]},"baseColor":{"type":"color","label":"Base color","default":"#101828"},"accentColor":{"type":"color","label":"Accent color","default":"#266DF0"},"highlightedTextColor":{"type":"color","label":"Highlighted text color","default":"#101828"},"replaceWith":{"type":"text","label":"Replace with (strikethrough)","default":"Acme"},"startAt":{"type":"number","label":"Start at (frames)","default":6,"min":0,"max":120,"step":1},"drawDuration":{"type":"number","label":"Draw duration (frames)","default":14,"min":5,"max":120,"step":1},"thickness":{"type":"number","label":"Line thickness","default":4,"min":1,"max":20,"step":1},"shineColor":{"type":"color","label":"Shine color (shimmer)","default":"#FAFAFA"},"logoSrc":{"type":"image","label":"Logo URL","default":""},"logoScale":{"type":"number","label":"Mark size (× font)","default":1.05,"min":0.4,"max":3,"step":0.05},"spinTurns":{"type":"number","label":"Mark spin (turns)","default":1,"min":0,"max":4,"step":0.25},"holdDuration":{"type":"number","label":"Lockup hold","default":12,"min":0,"max":60,"step":1},"rushDuration":{"type":"number","label":"Rush duration","default":24,"min":6,"max":80,"step":1},"rushScale":{"type":"number","label":"Rush scale (× mark)","default":42,"min":2,"max":80,"step":1},"rushDrift":{"type":"number","label":"Swing across (× width)","default":0.55,"min":-0.8,"max":0.8,"step":0.05},"swingOut":{"type":"number","label":"Swing arc (× width)","default":0.25,"min":0,"max":0.33,"step":0.01},"coverColor":{"type":"color","label":"Ink color (end of rush)","default":"#266DF0"},"fontSize":{"type":"number","label":"Font size","default":56,"min":12,"max":160,"step":1},"fontWeight":{"type":"select","label":"Font weight","default":"600","options":["400","500","600","700"]},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"5433bb4d65ee","installHash":"c747f0e3a13f0f55","measurement":{"sourceHash":"5433bb4d65ee","width":1280,"height":720,"fps":30,"durationInFrames":56,"settle":{"base":56,"baseWords":1,"perWord":0},"copy":{"prop":"highlight","pxPerChar":82.78,"maxChars":9}}},
57
+ {"slug":"text-reveal","title":"Text Reveal","description":"Text reveal animation: word-by-word and letter-by-letter kinetic typography with blur-in, fade, slide, scale and tracking-in presets. One staggered enter/exit text animator: fade, slide, blur, scale, mask and tracking effects over character, word, line or block units, with 14 classic looks as presets.","category":"text","tier":"free","aliases":[],"docsPath":"/docs/text/text-reveal","notes":"pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette and a bare Remotion render is black.","exportName":"TextReveal","target":"components/imgcli/text-reveal.tsx","importPath":"@/components/imgcli/text-reveal","files":["components/imgcli/text-reveal.tsx"],"dependencies":["remotion"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"text","type":"string | undefined","required":false,"defaultExpression":"\"Meet Acme Billing\""},{"name":"fontSize","type":"number | undefined","required":false,"defaultExpression":"72"},{"name":"color","type":"string | undefined","required":false},{"name":"fontWeight","type":"string | number | undefined","required":false,"defaultExpression":"600"},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false},{"name":"fontFamily","type":"string | undefined","required":false},{"name":"initialScale","type":"number | undefined","required":false,"defaultExpression":"2.3"},{"name":"introDuration","type":"number | undefined","required":false,"defaultExpression":"6"},{"name":"holdDuration","type":"number | undefined","required":false,"defaultExpression":"12"},{"name":"pushScale","type":"number | undefined","required":false,"defaultExpression":"1.06"},{"name":"recedeDuration","type":"number | undefined","required":false,"defaultExpression":"14"},{"name":"assembleDuration","type":"number | undefined","required":false,"defaultExpression":"30"},{"name":"wordDelay","type":"number | undefined","required":false,"defaultExpression":"7"},{"name":"wordStagger","type":"number | undefined","required":false,"defaultExpression":"4"},{"name":"wordDuration","type":"number | undefined","required":false,"defaultExpression":"14"},{"name":"wordPush","type":"number | undefined","required":false,"defaultExpression":"0.5"},{"name":"wordFade","type":"number | undefined","required":false,"defaultExpression":"2"},{"name":"letterSpacing","type":"string | undefined","required":false,"defaultExpression":"\"-0.03em\""},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"className","type":"string | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":90,"controls":{"text":{"type":"text","label":"Text","default":"Meet Acme Billing"},"fontSize":{"type":"number","label":"Font size","default":72,"min":12,"max":160,"step":1},"color":{"type":"color","label":"Color","default":"#101828"},"fontWeight":{"type":"select","label":"Font weight","default":"600","options":["400","500","600","700"]},"initialScale":{"type":"number","label":"Lead word scale","default":2.3,"min":1,"max":4,"step":0.1},"pushScale":{"type":"number","label":"Forward push","default":1.06,"min":1,"max":1.3,"step":0.01},"introDuration":{"type":"number","label":"Intro fade","default":6,"min":0,"max":30,"step":1},"holdDuration":{"type":"number","label":"Hold (frames)","default":12,"min":0,"max":40,"step":1},"recedeDuration":{"type":"number","label":"Recede duration","default":14,"min":4,"max":60,"step":1},"assembleDuration":{"type":"number","label":"Assemble duration","default":30,"min":8,"max":120,"step":1},"wordDelay":{"type":"number","label":"Word delay","default":7,"min":0,"max":40,"step":1},"wordStagger":{"type":"number","label":"Word stagger","default":4,"min":0,"max":20,"step":1},"wordDuration":{"type":"number","label":"Word push duration","default":14,"min":4,"max":60,"step":1},"wordPush":{"type":"number","label":"Word push distance (em)","default":0.5,"min":0,"max":2,"step":0.05},"wordFade":{"type":"number","label":"Word fade","default":2,"min":0,"max":20,"step":1},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"320381cea609","installHash":"97cf2cccbca43598","measurement":{"sourceHash":"320381cea609","width":1280,"height":720,"fps":30,"durationInFrames":90,"settle":{"base":42,"baseWords":3,"perWord":2},"copy":{"prop":"text","pxPerChar":32.53,"maxChars":35}}},
58
+ {"slug":"text-rewrite","title":"Text Rewrite","description":"Text rewrite animation, a typewriter line that deletes and retypes its ending. A line that writes itself a word at a time, comes forward and gets selected — then its opening is swept away by a clip that cuts letters in half as it passes, and a new ending is written on while the line slides to its new centre. The mark rides the sweeping edge throughout.","category":"text","tier":"free","aliases":[],"docsPath":"/docs/text/text-rewrite","notes":"pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette and a bare Remotion render is black.","exportName":"TextRewrite","target":"components/imgcli/text-rewrite.tsx","importPath":"@/components/imgcli/text-rewrite","files":["components/imgcli/text-rewrite.tsx"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"headline","type":"string | undefined","required":false,"defaultExpression":"\"Or just add snapcn\""},{"name":"keep","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"append","type":"string | undefined","required":false,"defaultExpression":"\"registry\""},{"name":"markAt","type":"number | undefined","required":false,"defaultExpression":"0.117"},{"name":"wordAt","type":"number | undefined","required":false,"defaultExpression":"0.217"},{"name":"wordStagger","type":"number | undefined","required":false,"defaultExpression":"0.189"},{"name":"wordDuration","type":"number | undefined","required":false,"defaultExpression":"0.085"},{"name":"coolDelay","type":"number | undefined","required":false,"defaultExpression":"0.189"},{"name":"coolDuration","type":"number | undefined","required":false,"defaultExpression":"0.189"},{"name":"cutAt","type":"number | undefined","required":false,"defaultExpression":"1.033"},{"name":"zoomDuration","type":"number | undefined","required":false,"defaultExpression":"0"},{"name":"zoom","type":"number | undefined","required":false,"defaultExpression":"2.41"},{"name":"dragAt","type":"number | undefined","required":false,"defaultExpression":"1.033"},{"name":"dragDuration","type":"number | undefined","required":false,"defaultExpression":"0.2"},{"name":"eraseAt","type":"number | undefined","required":false,"defaultExpression":"1.45"},{"name":"eraseDuration","type":"number | undefined","required":false,"defaultExpression":"0.517"},{"name":"rewriteAt","type":"number | undefined","required":false,"defaultExpression":"2.0"},{"name":"rewriteDuration","type":"number | undefined","required":false,"defaultExpression":"0.533"},{"name":"deselectAt","type":"number | undefined","required":false,"defaultExpression":"2.85"},{"name":"deselectDuration","type":"number | undefined","required":false,"defaultExpression":"0.15"},{"name":"fontSize","type":"number | undefined","required":false,"defaultExpression":"20"},{"name":"fontWeight","type":"number | undefined","required":false,"defaultExpression":"500"},{"name":"centerY","type":"number | undefined","required":false,"defaultExpression":"0.4902"},{"name":"tracking","type":"number | undefined","required":false,"defaultExpression":"TRACKING"},{"name":"wordGap","type":"number | undefined","required":false,"defaultExpression":"WORD_GAP"},{"name":"selectionOpacity","type":"number | undefined","required":false,"defaultExpression":"0.21"},{"name":"selectionAngle","type":"number | undefined","required":false,"defaultExpression":"90"},{"name":"selectionSheen","type":"readonly (readonly [number, number])[] | undefined","required":false,"defaultExpression":"SHEEN"},{"name":"selectionPad","type":"number | undefined","required":false,"defaultExpression":"SEL_PAD"},{"name":"markPath","type":"string | undefined","required":false,"defaultExpression":"MARK_PATH"},{"name":"markColor","type":"string | undefined","required":false},{"name":"markSize","type":"number | undefined","required":false,"defaultExpression":"MARK_SIZE"},{"name":"glow","type":"boolean | undefined","required":false,"defaultExpression":"true"},{"name":"glowColor","type":"string | undefined","required":false},{"name":"glowOpacity","type":"number | undefined","required":false,"defaultExpression":"0.075"},{"name":"accentColor","type":"string | undefined","required":false},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false},{"name":"fontFamily","type":"string | undefined","required":false},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":102,"controls":{"headline":{"type":"text","label":"Headline","default":"Or just add snapcn"},"keep":{"type":"number","label":"Words kept","default":1,"min":0,"max":8,"step":1},"append":{"type":"text","label":"Written on","default":"registry"},"wordAt":{"type":"number","label":"First word at (s)","default":0.217,"min":0,"max":2,"step":0.005},"wordStagger":{"type":"number","label":"Word stagger (s)","default":0.189,"min":0.02,"max":0.8,"step":0.002},"wordDuration":{"type":"number","label":"Word opens in (s)","default":0.085,"min":0.02,"max":1,"step":0.005},"coolDelay":{"type":"number","label":"Accent holds (s)","default":0.189,"min":0,"max":1.5,"step":0.005},"coolDuration":{"type":"number","label":"Accent cools over (s)","default":0.189,"min":0.01,"max":1.5,"step":0.005},"cutAt":{"type":"number","label":"Comes forward at (s)","default":1.033,"min":0.1,"max":6,"step":0.01},"zoomDuration":{"type":"number","label":"Forward over (s)","default":0,"min":0,"max":2,"step":0.01},"zoom":{"type":"number","label":"Forward to","default":2.41,"min":1,"max":6,"step":0.01},"dragAt":{"type":"number","label":"Select at (s)","default":1.033,"min":0.1,"max":6,"step":0.005},"dragDuration":{"type":"number","label":"Drag over (s)","default":0.2,"min":0.02,"max":2,"step":0.005},"eraseAt":{"type":"number","label":"Erase at (s)","default":1.45,"min":0.1,"max":8,"step":0.005},"eraseDuration":{"type":"number","label":"Erase over (s)","default":0.517,"min":0.05,"max":3,"step":0.005},"rewriteAt":{"type":"number","label":"Rewrite at (s)","default":2,"min":0.1,"max":8,"step":0.005},"rewriteDuration":{"type":"number","label":"Rewrite over (s)","default":0.533,"min":0.05,"max":3,"step":0.005},"deselectAt":{"type":"number","label":"Deselect at (s)","default":2.85,"min":0.1,"max":10,"step":0.005},"deselectDuration":{"type":"number","label":"Deselect over (s)","default":0.15,"min":0.02,"max":2,"step":0.005},"fontSize":{"type":"number","label":"Type size","default":20,"min":8,"max":64,"step":0.5},"fontWeight":{"type":"number","label":"Weight","default":500,"min":400,"max":600,"step":100},"centerY":{"type":"number","label":"Line Y","default":0.4902,"min":0.1,"max":0.9,"step":0.002},"selectionOpacity":{"type":"number","label":"Selection strength","default":0.21,"min":0,"max":0.8,"step":0.005},"selectionAngle":{"type":"number","label":"Sheen angle","default":90,"min":0,"max":180,"step":1},"markSize":{"type":"number","label":"Mark size (em)","default":1.15,"min":0,"max":3,"step":0.01},"glow":{"type":"boolean","label":"Wash","default":true},"glowOpacity":{"type":"number","label":"Wash strength","default":0.075,"min":0,"max":0.5,"step":0.005},"accentColor":{"type":"color","label":"Accent","default":"#3072db"},"mode":{"type":"select","label":"Mode","default":"light","options":["light","dark"]},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"8a2fa8ee114a","installHash":"44e106063c5be405","measurement":{"sourceHash":"8a2fa8ee114a","width":1280,"height":720,"fps":30,"durationInFrames":102,"settle":{"base":90,"baseWords":4,"perWord":0},"copy":{"prop":"append","pxPerChar":97,"maxChars":8}}},
59
+ {"slug":"text-select","title":"Text Select","description":"Typewriter with text selection: a line types word by word, then gets highlighted. A line that writes itself a word at a time — each one arriving in the accent and cooling to the foreground a beat later, so exactly one word is ever coloured — then pushes forward to full size on a baseline-pivoted scale and gets selected, the drag sweeping across under a gradient sheen with a hard caret edge.","category":"text","tier":"free","aliases":[],"docsPath":"/docs/text/text-select","notes":"pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette and a bare Remotion render is black.","exportName":"TextSelect","target":"components/imgcli/text-select.tsx","importPath":"@/components/imgcli/text-select","files":["components/imgcli/text-select.tsx"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"headline","type":"string | undefined","required":false,"defaultExpression":"\"One command into your project.\""},{"name":"wordAt","type":"number | undefined","required":false,"defaultExpression":"0.066"},{"name":"wordStagger","type":"number | undefined","required":false,"defaultExpression":"WORD_STAGGER"},{"name":"wordDuration","type":"number | undefined","required":false,"defaultExpression":"WORD_DUR"},{"name":"shiftX","type":"number | undefined","required":false,"defaultExpression":"SHIFT_X"},{"name":"shiftY","type":"number | undefined","required":false,"defaultExpression":"SHIFT_Y"},{"name":"wordBlur","type":"number | undefined","required":false,"defaultExpression":"WORD_BLUR"},{"name":"coolDelay","type":"number | undefined","required":false,"defaultExpression":"COOL_DELAY"},{"name":"coolDuration","type":"number | undefined","required":false,"defaultExpression":"COOL_DUR"},{"name":"cutAt","type":"number | undefined","required":false,"defaultExpression":"1.13"},{"name":"zoomDuration","type":"number | undefined","required":false,"defaultExpression":"0.42"},{"name":"zoom","type":"number | undefined","required":false,"defaultExpression":"2.39"},{"name":"selectAt","type":"number | undefined","required":false,"defaultExpression":"1.4"},{"name":"selectDuration","type":"number | undefined","required":false,"defaultExpression":"0.26"},{"name":"fontSize","type":"number | undefined","required":false,"defaultExpression":"20"},{"name":"fontWeight","type":"number | undefined","required":false,"defaultExpression":"500"},{"name":"centerY","type":"number | undefined","required":false,"defaultExpression":"0.5116"},{"name":"tracking","type":"number | undefined","required":false,"defaultExpression":"TRACKING"},{"name":"wordGap","type":"number | undefined","required":false,"defaultExpression":"WORD_GAP"},{"name":"selectionOpacity","type":"number | undefined","required":false,"defaultExpression":"0.207"},{"name":"selectionAngle","type":"number | undefined","required":false,"defaultExpression":"90"},{"name":"selectionSheen","type":"readonly (readonly [number, number])[] | undefined","required":false,"defaultExpression":"SHEEN"},{"name":"selectionPad","type":"number | undefined","required":false,"defaultExpression":"SEL_PAD"},{"name":"shineColor","type":"string | undefined","required":false,"defaultExpression":"\"#ffffff\""},{"name":"shineOpacity","type":"number | undefined","required":false,"defaultExpression":"0.5"},{"name":"shineDepth","type":"number | undefined","required":false,"defaultExpression":"0.55"},{"name":"shineWidth","type":"number | undefined","required":false,"defaultExpression":"0.3"},{"name":"shineAt","type":"number | undefined","required":false},{"name":"shineDuration","type":"number | undefined","required":false,"defaultExpression":"0.62"},{"name":"shineEvery","type":"number | undefined","required":false,"defaultExpression":"1.1"},{"name":"glow","type":"boolean | undefined","required":false,"defaultExpression":"true"},{"name":"glowColor","type":"string | undefined","required":false},{"name":"glowOpacity","type":"number | undefined","required":false,"defaultExpression":"0.075"},{"name":"accentColor","type":"string | undefined","required":false},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false},{"name":"fontFamily","type":"string | undefined","required":false},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":72,"controls":{"headline":{"type":"text","label":"Headline","default":"One command into your project."},"wordAt":{"type":"number","label":"First word at (s)","default":0.066,"min":0,"max":2,"step":0.005},"wordStagger":{"type":"number","label":"Word stagger (s)","default":0.208,"min":0.02,"max":0.8,"step":0.002},"wordDuration":{"type":"number","label":"Word lands in (s)","default":0.13,"min":0.02,"max":1,"step":0.005},"shiftX":{"type":"number","label":"Line arrives from (em)","default":0.475,"min":-2,"max":2,"step":0.005},"coolDelay":{"type":"number","label":"Accent holds (s)","default":0.208,"min":0,"max":1.5,"step":0.005},"coolDuration":{"type":"number","label":"Accent cools over (s)","default":0.208,"min":0.01,"max":1.5,"step":0.005},"cutAt":{"type":"number","label":"Comes forward at (s)","default":1.13,"min":0.1,"max":6,"step":0.01},"zoomDuration":{"type":"number","label":"Forward over (s)","default":0.42,"min":0,"max":2,"step":0.01},"zoom":{"type":"number","label":"Forward to","default":2.39,"min":1,"max":6,"step":0.01},"selectAt":{"type":"number","label":"Select at (s)","default":1.4,"min":0.1,"max":6,"step":0.005},"selectDuration":{"type":"number","label":"Drag over (s)","default":0.26,"min":0.02,"max":2,"step":0.005},"fontSize":{"type":"number","label":"Type size","default":20,"min":8,"max":64,"step":0.5},"fontWeight":{"type":"number","label":"Weight","default":500,"min":400,"max":600,"step":100},"centerY":{"type":"number","label":"Line Y","default":0.5116,"min":0.1,"max":0.9,"step":0.002},"selectionOpacity":{"type":"number","label":"Selection strength","default":0.207,"min":0,"max":0.8,"step":0.005},"selectionAngle":{"type":"number","label":"Sheen angle","default":90,"min":0,"max":180,"step":1},"shineColor":{"type":"color","label":"Glint","default":"#ffffff"},"shineOpacity":{"type":"number","label":"Glint strength","default":0.5,"min":0,"max":1,"step":0.01},"shineDepth":{"type":"number","label":"Glint shoulders","default":0.55,"min":0,"max":2,"step":0.01},"shineWidth":{"type":"number","label":"Glint width","default":0.3,"min":0.05,"max":1,"step":0.01},"shineDuration":{"type":"number","label":"Glint crosses in (s)","default":0.62,"min":0.05,"max":3,"step":0.01},"shineEvery":{"type":"number","label":"Glint every (s)","default":1.1,"min":0,"max":6,"step":0.05},"selectionPad":{"type":"number","label":"Selection pad (em)","default":0.063,"min":0,"max":1,"step":0.005},"glow":{"type":"boolean","label":"Wash","default":true},"glowOpacity":{"type":"number","label":"Wash strength","default":0.075,"min":0,"max":0.5,"step":0.005},"accentColor":{"type":"color","label":"Accent","default":"#3072db"},"mode":{"type":"select","label":"Mode","default":"light","options":["light","dark"]},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"cda0f0fd51e1","installHash":"b9598f5481400532","measurement":{"sourceHash":"cda0f0fd51e1","width":1280,"height":720,"fps":30,"durationInFrames":72,"settle":{"base":72,"baseWords":5,"perWord":0},"copy":{"prop":"headline","pxPerChar":37.1,"maxChars":21}}},
60
+ {"slug":"text-swap","title":"Text Swap","description":"Text swap animation, rotating headline that replaces one line with another. Replaces one line of text with another using exit-then-enter scheduling, with five transition presets: fade-through, crossfade, shared-axis-y, shared-axis-z, and cut.","category":"text","tier":"free","aliases":[],"docsPath":"/docs/text/text-swap","notes":"pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette and a bare Remotion render is black.","exportName":"TextSwap","target":"components/imgcli/text-swap.tsx","importPath":"@/components/imgcli/text-swap","files":["components/imgcli/text-swap.tsx"],"dependencies":["remotion"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"fromText","type":"string","required":true},{"name":"toText","type":"string","required":true},{"name":"unit","type":"TextSwapUnit | undefined","required":false},{"name":"transition","type":"TextSwapTransition | undefined","required":false,"defaultExpression":"\"fly-through\""},{"name":"exitDuration","type":"number | undefined","required":false},{"name":"enterDuration","type":"number | undefined","required":false},{"name":"exitStagger","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"enterStagger","type":"number | undefined","required":false,"defaultExpression":"2"},{"name":"overlap","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"microDelay","type":"number | undefined","required":false,"defaultExpression":"2"},{"name":"fontSize","type":"number | undefined","required":false,"defaultExpression":"72"},{"name":"color","type":"string | undefined","required":false},{"name":"fontWeight","type":"number | undefined","required":false,"defaultExpression":"600"},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"className","type":"string | undefined","required":false},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false},{"name":"fontFamily","type":"string | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":90,"controls":{"fromText":{"type":"text","label":"From text","default":"Manual invoicing"},"toText":{"type":"text","label":"To text","default":"Automated with Acme"},"transition":{"type":"select","label":"Transition","default":"fly-through","options":["fly-through","fade-through","crossfade","shared-axis-y","shared-axis-z","cut"]},"unit":{"type":"select","label":"Unit","default":"block","options":["block","word"]},"exitDuration":{"type":"number","label":"Exit duration","default":20,"min":2,"max":40,"step":1},"enterDuration":{"type":"number","label":"Enter duration","default":16,"min":2,"max":40,"step":1},"exitStagger":{"type":"number","label":"Exit stagger","default":1,"min":0,"max":8,"step":1},"enterStagger":{"type":"number","label":"Enter stagger","default":2,"min":0,"max":8,"step":1},"overlap":{"type":"number","label":"Overlap","default":1,"min":0,"max":12,"step":1},"microDelay":{"type":"number","label":"Micro delay","default":2,"min":0,"max":12,"step":1},"fontSize":{"type":"number","label":"Font size","default":72,"min":12,"max":160,"step":1},"color":{"type":"color","label":"Color","default":"#101828"},"fontWeight":{"type":"select","label":"Font weight","default":"600","options":["400","500","600","700"]},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"32587c617178","installHash":"37545dcadde965f0","measurement":{"sourceHash":"32587c617178","width":1280,"height":720,"fps":30,"durationInFrames":90,"settle":{"base":37,"baseWords":2,"perWord":0},"copy":{"prop":"fromText","pxPerChar":80.06,"maxChars":16}}},
61
+ {"slug":"text-swell","title":"Text Swell","description":"Kinetic typography title with a bouncing letter wave. A title reveal where the lead word floats toward the viewer and hangs there while the sentence assembles around it — each trailing word pushes in and its letters bounce up off the baseline in a wave — before the whole line falls back to size.","category":"text","tier":"free","aliases":[],"docsPath":"/docs/text/text-swell","notes":"pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette and a bare Remotion render is black.","exportName":"TextSwell","target":"components/imgcli/text-swell.tsx","importPath":"@/components/imgcli/text-swell","files":["components/imgcli/text-swell.tsx"],"dependencies":["remotion"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"text","type":"string | undefined","required":false,"defaultExpression":"\"No extra charge\""},{"name":"fontSize","type":"number | undefined","required":false,"defaultExpression":"72"},{"name":"color","type":"string | undefined","required":false},{"name":"fontWeight","type":"string | number | undefined","required":false,"defaultExpression":"600"},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false},{"name":"fontFamily","type":"string | undefined","required":false},{"name":"introDuration","type":"number | undefined","required":false,"defaultExpression":"8"},{"name":"riseDistance","type":"number | undefined","required":false,"defaultExpression":"0.7"},{"name":"riseDuration","type":"number | undefined","required":false,"defaultExpression":"10"},{"name":"startScale","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"frontScale","type":"number | undefined","required":false,"defaultExpression":"2.1"},{"name":"approachDelay","type":"number | undefined","required":false,"defaultExpression":"14"},{"name":"approachDuration","type":"number | undefined","required":false,"defaultExpression":"20"},{"name":"wordDelay","type":"number | undefined","required":false,"defaultExpression":"27"},{"name":"wordStagger","type":"number | undefined","required":false,"defaultExpression":"14"},{"name":"wordPush","type":"number | undefined","required":false,"defaultExpression":"0.15"},{"name":"wordPushDuration","type":"number | undefined","required":false,"defaultExpression":"12"},{"name":"bounceWords","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"letterSwell","type":"number | undefined","required":false,"defaultExpression":"0.23"},{"name":"letterStagger","type":"number | undefined","required":false,"defaultExpression":"2"},{"name":"letterRise","type":"number | undefined","required":false,"defaultExpression":"3"},{"name":"letterHold","type":"number | undefined","required":false,"defaultExpression":"0"},{"name":"letterFall","type":"number | undefined","required":false,"defaultExpression":"6"},{"name":"holdDuration","type":"number | undefined","required":false,"defaultExpression":"6"},{"name":"recedeDuration","type":"number | undefined","required":false,"defaultExpression":"18"},{"name":"letterSpacing","type":"string | undefined","required":false,"defaultExpression":"\"-0.03em\""},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"className","type":"string | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":110,"controls":{"text":{"type":"text","label":"Text","default":"No extra charge"},"fontSize":{"type":"number","label":"Font size","default":72,"min":12,"max":160,"step":1},"color":{"type":"color","label":"Color","default":"#101828"},"fontWeight":{"type":"select","label":"Font weight","default":"600","options":["400","500","600","700"]},"riseDistance":{"type":"number","label":"Rise from below (em)","default":0.7,"min":0,"max":3,"step":0.05},"riseDuration":{"type":"number","label":"Rise duration","default":10,"min":1,"max":60,"step":1},"introDuration":{"type":"number","label":"Intro fade","default":8,"min":0,"max":30,"step":1},"frontScale":{"type":"number","label":"Front scale","default":2.1,"min":1,"max":4,"step":0.1},"approachDelay":{"type":"number","label":"Approach delay","default":14,"min":0,"max":60,"step":1},"approachDuration":{"type":"number","label":"Approach","default":20,"min":4,"max":80,"step":1},"wordDelay":{"type":"number","label":"Word delay","default":27,"min":0,"max":80,"step":1},"wordStagger":{"type":"number","label":"Word stagger","default":14,"min":1,"max":40,"step":1},"wordPush":{"type":"number","label":"Word push (em)","default":0.15,"min":0,"max":1,"step":0.05},"wordPushDuration":{"type":"number","label":"Word push / shove","default":12,"min":2,"max":40,"step":1},"bounceWords":{"type":"number","label":"Words that bounce","default":1,"min":0,"max":6,"step":1},"letterSwell":{"type":"number","label":"Letter swell","default":0.23,"min":0,"max":1,"step":0.01},"letterStagger":{"type":"number","label":"Letter stagger","default":2,"min":0.5,"max":12,"step":0.5},"letterRise":{"type":"number","label":"Letter rise","default":3,"min":1,"max":20,"step":1},"letterHold":{"type":"number","label":"Letter hold","default":0,"min":0,"max":30,"step":1},"letterFall":{"type":"number","label":"Letter fall","default":6,"min":1,"max":30,"step":1},"holdDuration":{"type":"number","label":"Front hold","default":6,"min":0,"max":60,"step":1},"recedeDuration":{"type":"number","label":"Recede","default":18,"min":4,"max":80,"step":1},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":1,"max":4,"step":0.25}}},"sourceHash":"bd5a2c6260ac","installHash":"53673b5cabeba01e","measurement":{"sourceHash":"bd5a2c6260ac","width":1280,"height":720,"fps":30,"durationInFrames":110,"settle":{"base":77,"baseWords":3,"perWord":14},"copy":{"prop":"text","pxPerChar":48.2,"maxChars":24}}},
62
+ {"slug":"title-sweep","title":"Title Sweep","description":"An end title lit by a gradient that travels through the letters, cuts in the dark, and a second title takes over","category":"text","tier":"free","aliases":[],"docsPath":"/docs/text/title-sweep","notes":"76 frames at 30fps.","exportName":"TitleSweep","target":"components/imgcli/title-sweep/index.tsx","importPath":"@/components/imgcli/title-sweep","files":["components/imgcli/title-sweep/index.tsx","components/imgcli/title-sweep/data.ts"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"titles","type":"string[] | undefined","required":false,"defaultExpression":"[\"snapcn Pro\", \"snapcn.dev\"]"},{"name":"fontFamily","type":"string | undefined","required":false,"defaultExpression":"\"Inter\""},{"name":"fontSize","type":"number | undefined","required":false,"defaultExpression":"110.96"},{"name":"fontWeight","type":"number | undefined","required":false,"defaultExpression":"500"},{"name":"tracking","type":"number | undefined","required":false,"defaultExpression":"-0.0165"},{"name":"wordSpacing","type":"number | undefined","required":false,"defaultExpression":"-0.0769"},{"name":"nudge","type":"number[] | undefined","required":false},{"name":"titleScale","type":"number[] | undefined","required":false},{"name":"stops","type":"SweepStop[] | undefined","required":false,"defaultExpression":"DEFAULT_STOPS"},{"name":"background","type":"string | undefined","required":false,"defaultExpression":"\"#000000\""},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":76,"controls":{"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"fontSize":{"type":"number","label":"Type size","default":110.96,"min":40,"max":200,"step":1},"fontWeight":{"type":"number","label":"Weight","default":500,"min":300,"max":800,"step":100},"background":{"type":"color","label":"Background","default":"#000000"},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"de60c47b44d9","installHash":"1a523d9be19d409e"},
63
+ {"slug":"type-morph","title":"Type Morph","description":"Typewriter effect: a headline types with a blinking caret, then morphs letter by letter. A headline that types itself under a glowing caret, sheds its lead, morphs letter by letter, and ends under a colour flood.","category":"text","tier":"free","aliases":[],"docsPath":"/docs/text/type-morph","notes":"pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette and a bare Remotion render is black.","exportName":"TypeMorph","target":"components/imgcli/type-morph.tsx","importPath":"@/components/imgcli/type-morph","files":["components/imgcli/type-morph.tsx","components/imgcli/type-morph-timeline.ts"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json","https://imgcli.com/r/text-reveal.json"],"props":[{"name":"lead","type":"string | undefined","required":false,"defaultExpression":"\"Not just \""},{"name":"emphasis","type":"string | undefined","required":false,"defaultExpression":"\"communicator.\""},{"name":"morphTo","type":"string | undefined","required":false,"defaultExpression":"\"something more.\""},{"name":"finally_","type":"string | undefined","required":false,"defaultExpression":"\"more.\""},{"name":"wordOnFlood","type":"boolean | undefined","required":false,"defaultExpression":"false"},{"name":"accent","type":"string | undefined","required":false},{"name":"flood","type":"false | [string, string] | undefined","required":false,"defaultExpression":"false"},{"name":"background","type":"string | undefined","required":false},{"name":"ink","type":"string | undefined","required":false},{"name":"reveal","type":"Omit<TextRevealProps, \"color\" | \"text\" | \"theme\" | \"mode\" | \"fontSize\"> | undefined","required":false},{"name":"size","type":"number | undefined","required":false,"defaultExpression":"0.1256"},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false},{"name":"fontFamily","type":"string | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":94,"controls":{"lead":{"type":"text","label":"Lead (cut away)","default":"Not just "},"emphasis":{"type":"text","label":"Emphasis","default":"communicator."},"morphTo":{"type":"text","label":"Morphs into","default":"something more."},"finally_":{"type":"text","label":"Final word","default":"more."},"accent":{"type":"color","label":"Caret & hot glyphs","default":"#b3a9f9"},"background":{"type":"color","label":"Page","default":"#ffffff"},"ink":{"type":"color","label":"Text","default":"#000000"},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"3c6ef85dc9b0","installHash":"55c72df4ce1d072a","measurement":{"sourceHash":"3c6ef85dc9b0","width":1280,"height":720,"fps":30,"durationInFrames":94,"settle":{"base":81,"baseWords":2,"perWord":0},"copy":{"prop":"finally_","pxPerChar":177.6,"maxChars":5}}},
64
+ {"slug":"word-captions","title":"Word Captions","description":"TikTok-style captions: animated subtitles with word pop, Hormozi and MrBeast styles for Reels and Shorts. Burned-in captions in the styles big channels actually use — heavy Montserrat, a real outside outline so they read on any footage, and the spoken word springing to an accent. Four presets: beast, hormozi, pop, clean.","category":"captions","tier":"free","aliases":[],"docsPath":"/docs/captions/word-captions","notes":"pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette and a bare Remotion render is black.","exportName":"WordCaptions","target":"components/imgcli/word-captions.tsx","importPath":"@/components/imgcli/word-captions","files":["components/imgcli/word-captions.tsx"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"captions","type":"Caption[] | undefined","required":false},{"name":"srt","type":"string | undefined","required":false},{"name":"preset","type":"CaptionPreset | undefined","required":false,"defaultExpression":"\"boxed\""},{"name":"maxWords","type":"number | undefined","required":false},{"name":"maxChars","type":"number | undefined","required":false},{"name":"pageBreakMs","type":"number | undefined","required":false,"defaultExpression":"420"},{"name":"strokeRatio","type":"number | undefined","required":false},{"name":"strokeColor","type":"string | undefined","required":false,"defaultExpression":"\"#000000\""},{"name":"uppercase","type":"boolean | undefined","required":false},{"name":"accentCycle","type":"string[] | undefined","required":false,"defaultExpression":"DEFAULT_ACCENT_CYCLE"},{"name":"words","type":"string | CaptionWord[] | undefined","required":false,"defaultExpression":"\"Stop losing hours to manual invoices\""},{"name":"groupSize","type":"number | undefined","required":false},{"name":"activeStyle","type":"CaptionActiveStyle | undefined","required":false,"defaultExpression":"\"pop\""},{"name":"aspect","type":"CaptionAspect | undefined","required":false,"defaultExpression":"\"16:9\""},{"name":"maxWidth","type":"number | undefined","required":false},{"name":"fontSize","type":"number | undefined","required":false},{"name":"textColor","type":"string | undefined","required":false},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false},{"name":"fontFamily","type":"string | undefined","required":false},{"name":"pillColor","type":"string | undefined","required":false},{"name":"accentColor","type":"string | undefined","required":false,"defaultExpression":"\"#FFE81F\""},{"name":"framesPerWord","type":"number | undefined","required":false,"defaultExpression":"14"},{"name":"fontWeight","type":"number | undefined","required":false},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"className","type":"string | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":96,"controls":{"words":{"type":"text","label":"Transcript","default":"You are losing three hours every week to manual invoices and you don’t even notice it"},"framesPerWord":{"type":"number","label":"Frames / word","default":14,"min":6,"max":40,"step":1},"preset":{"type":"select","label":"Preset","default":"boxed","options":["boxed","youtube","beast","hormozi","pop","clean"]},"groupSize":{"type":"number","label":"Words per beat","default":0,"min":0,"max":3,"step":1},"activeStyle":{"type":"select","label":"Active style","default":"pop","options":["pop","highlight","color"]},"aspect":{"type":"select","label":"Aspect preset","default":"16:9","options":["16:9","1:1","9:16"]},"maxWidth":{"type":"number","label":"Max width","default":800,"min":300,"max":1600,"step":20},"fontSize":{"type":"number","label":"Font size","default":0,"min":0,"max":120,"step":1},"textColor":{"type":"color","label":"Text color","default":"#FFFFFF"},"pillColor":{"type":"text","label":"Pill color (CSS)","default":"rgba(16,24,40,0.55)"},"accentColor":{"type":"color","label":"Accent","default":"#FFE81F"},"fontWeight":{"type":"select","label":"Font weight","default":"0","options":["400","500","600","700"]},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":1,"max":4,"step":0.25}}},"sourceHash":"c4f266705e7f","installHash":"0f7ba75c4ef61027","measurement":{"sourceHash":"c4f266705e7f","width":1280,"height":720,"fps":30,"durationInFrames":96,"settle":{"base":73,"baseWords":0,"perWord":0}}},
65
+ {"slug":"word-flip","title":"Word Flip","description":"Word flip text rotator: a typewriter headline with a 3D rotating word. A headline types itself out, then one word cycles on a 3D flip — it sinks into an anticipation dip, throws up and away about its baseline under motion blur, and the next word unfurls from below. The slot is reserved from the first keystroke, so nothing in the sentence ever reflows.","category":"text","tier":"free","aliases":[],"docsPath":"/docs/text/word-flip","notes":"pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette and a bare Remotion render is black.","exportName":"WordFlip","target":"components/imgcli/word-flip.tsx","importPath":"@/components/imgcli/word-flip","files":["components/imgcli/word-flip.tsx"],"dependencies":["remotion"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"prefix","type":"string | undefined","required":false,"defaultExpression":"\"Looking For A\""},{"name":"words","type":"string[] | undefined","required":false,"defaultExpression":"[\"Modern\", \"Stunning\", \"Minimal\"]"},{"name":"suffix","type":"string | undefined","required":false,"defaultExpression":"\"Portfolio\""},{"name":"gradient","type":"string[] | undefined","required":false},{"name":"cps","type":"number | undefined","required":false,"defaultExpression":"9"},{"name":"typeStart","type":"number | undefined","required":false,"defaultExpression":"4"},{"name":"charFade","type":"number | undefined","required":false,"defaultExpression":"6"},{"name":"jitter","type":"number | undefined","required":false,"defaultExpression":"0.18"},{"name":"pause","type":"number | undefined","required":false,"defaultExpression":"6"},{"name":"cycle","type":"number | undefined","required":false,"defaultExpression":"35"},{"name":"exitDuration","type":"number | undefined","required":false,"defaultExpression":"9"},{"name":"enterDuration","type":"number | undefined","required":false,"defaultExpression":"9"},{"name":"overlap","type":"number | undefined","required":false,"defaultExpression":"3"},{"name":"caret","type":"boolean | undefined","required":false,"defaultExpression":"true"},{"name":"loop","type":"boolean | undefined","required":false,"defaultExpression":"true"},{"name":"motion","type":"Partial<WordFlipMotion> | undefined","required":false},{"name":"perspective","type":"number | undefined","required":false,"defaultExpression":"6.5"},{"name":"fontFamily","type":"string | undefined","required":false},{"name":"fontSize","type":"number | undefined","required":false,"defaultExpression":"72"},{"name":"color","type":"string | undefined","required":false},{"name":"fontWeight","type":"number | undefined","required":false,"defaultExpression":"600"},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"className","type":"string | undefined","required":false},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":180,"controls":{"prefix":{"type":"text","label":"Prefix","default":"Looking For A"},"suffix":{"type":"text","label":"Suffix","default":"Portfolio"},"cps":{"type":"number","label":"Typing speed (cps)","default":9,"min":3,"max":24,"step":0.5},"pause":{"type":"number","label":"Pause","default":6,"min":0,"max":40,"step":1},"cycle":{"type":"number","label":"Cycle","default":35,"min":16,"max":90,"step":1},"exitDuration":{"type":"number","label":"Exit duration","default":9,"min":4,"max":24,"step":1},"enterDuration":{"type":"number","label":"Enter duration","default":9,"min":4,"max":24,"step":1},"overlap":{"type":"number","label":"Overlap","default":3,"min":0,"max":8,"step":1},"perspective":{"type":"number","label":"Perspective (em)","default":6.5,"min":2,"max":20,"step":0.5},"caret":{"type":"boolean","label":"Caret","default":true},"fontSize":{"type":"number","label":"Font size","default":72,"min":12,"max":120,"step":1},"color":{"type":"color","label":"Color","default":"#101828"},"fontWeight":{"type":"select","label":"Font weight","default":"600","options":["400","500","600","700"]},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"f2da520f46ca","installHash":"33e5e7bed979b937","measurement":{"sourceHash":"f2da520f46ca","width":1280,"height":720,"fps":30,"durationInFrames":180,"settle":{"base":171,"baseWords":3,"perWord":0},"copy":{"prop":"suffix","pxPerChar":109.22,"maxChars":9}}},
66
+ {"slug":"word-gather","title":"Word Gather","description":"Word-by-word sentence animation: words fly in out of order and settle into the line. A sentence that arrives one word at a time, out of order, and gathers. The first word holds the middle of the frame on its own; then the rest drop in around it — not in reading order and not where they belong — each landing near its slot in the accent colour and sliding the last of the way home, turning to ink as it settles. The line makes room for them as they come, and when the last one is down the whole block eases back to its real size. The layout is solved here rather than left to the browser, because a word has to be transformed from somewhere else to its slot and knowing where its slot is means having laid the line out yourself — which also means the line break cannot move while the block's scale is changing under it.","category":"text","tier":"free","aliases":[],"docsPath":"/docs/text/word-gather","notes":"text is the sentence and its first word is the one that holds the frame alone; maxWidth is where the line breaks, in card pixels; accent is the colour a word wears while it is still travelling. Pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette.","exportName":"WordGather","target":"components/imgcli/word-gather.tsx","importPath":"@/components/imgcli/word-gather","files":["components/imgcli/word-gather.tsx"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"text","type":"string | undefined","required":false,"defaultExpression":"\"Every scene is yours to own.\""},{"name":"maxWidth","type":"number | undefined","required":false,"defaultExpression":"330"},{"name":"accent","type":"string | undefined","required":false},{"name":"fontWeight","type":"number | undefined","required":false,"defaultExpression":"500"},{"name":"fontFamily","type":"string | undefined","required":false},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false,"defaultExpression":"\"light\""},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"className","type":"string | undefined","required":false}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":49,"controls":{"text":{"type":"text","label":"Sentence","default":"Every scene is yours to own."},"maxWidth":{"type":"number","label":"Line width","default":330,"min":120,"max":690,"step":5},"accent":{"type":"color","label":"Travelling colour","default":""},"mode":{"type":"select","label":"Theme","default":"light","options":["light","dark"]},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"97515d681edb","installHash":"54e7a189d0f4aff0","measurement":{"sourceHash":"97515d681edb","width":1280,"height":720,"fps":30,"durationInFrames":49,"settle":{"base":49,"baseWords":6,"perWord":0},"copy":{"prop":"text","pxPerChar":26.61,"maxChars":52}}},
67
+ {"slug":"word-wheel","title":"Word Wheel","description":"Rotating words text: a slot machine word wheel that spins and stops on one word. A column of words that spins like a reel and stops on one of them. A fixed lead-in holds the left of the line and the word that finishes the sentence lives in a slot beside it — one row of a taller column whose other words are visible above and below, smaller and grey, fading out toward the top and bottom of the frame. The reel rolls, decelerates over a second and three quarters and comes to rest with one word at full size and in ink. Every number in it was recovered frame by frame from a recording: the 34px row pitch that every baseline including the oversized one sits on, the 1.665x the selected word grows by, and the deceleration itself — which ships as a measured table rather than a curve, because the closest cubic-bezier is five pixels out at its worst and a fifth of a row is a visibly different frame.","category":"text","tier":"free","aliases":[],"docsPath":"/docs/text/word-wheel","notes":"headline is the part of the line that never changes; words is the reel, comma separated, and its FIRST entry is the one the scene comes to rest on; spin is how many rows the reel travels, and left at the list's own length it turns exactly once and comes home. Pass mode=\"dark\" if you are rendering onto a dark frame — these default to shadcn's light palette.","exportName":"WordWheel","target":"components/imgcli/word-wheel.tsx","importPath":"@/components/imgcli/word-wheel","files":["components/imgcli/word-wheel.tsx"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"headline","type":"string | undefined","required":false,"defaultExpression":"\"snapcn for\""},{"name":"words","type":"string | undefined","required":false,"defaultExpression":"\"Launches, Founders, Indie hackers, Agencies, Designers, Startups, Dev tools, Solo builders, Changelogs\""},{"name":"spin","type":"number | undefined","required":false},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false,"defaultExpression":"\"light\""},{"name":"fontFamily","type":"string | undefined","required":false,"defaultExpression":"\"Default\""}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":66,"controls":{"headline":{"type":"text","label":"Lead-in","default":"snapcn for"},"words":{"type":"text","label":"Reel (comma separated)","default":"Launches, Founders, Indie hackers, Agencies, Designers, Startups, Dev tools, Solo builders, Changelogs"},"spin":{"type":"number","label":"Rows travelled","default":9,"min":1,"max":40,"step":1},"mode":{"type":"select","label":"Theme","default":"light","options":["light","dark"]},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"6380ee57d321","installHash":"a236761ced8385d6","measurement":{"sourceHash":"6380ee57d321","width":1280,"height":720,"fps":30,"durationInFrames":66,"settle":{"base":56,"baseWords":2,"perWord":0},"copy":{"prop":"headline","pxPerChar":66.4,"maxChars":10}}},
68
+ {"slug":"wordmark-cut","title":"Wordmark Cut","description":"Wordmark reveal end card: a huge brand name with a hard cut to a close-up. A wordmark twice the width of the frame, cooling from a lit gradient to ink while it settles, and then a hard cut onto its last letters and the dot — 1.71× nearer, with a shallow depth of field the wide shot does not have, which is the only thing that says the second shot is closer rather than just bigger. It holds a beat and pushes in, still accelerating on the last frame.","category":"scenes","tier":"free","aliases":[],"docsPath":"/docs/scenes/wordmark-cut","notes":"pass word for the wordmark and dotFrom/dotTo for the gradient.","exportName":"WordmarkCut","target":"components/imgcli/wordmark-cut.tsx","importPath":"@/components/imgcli/wordmark-cut","files":["components/imgcli/wordmark-cut.tsx"],"dependencies":["remotion","@remotion/google-fonts"],"registryDependencies":["https://imgcli.com/r/snap-cn-ui.json"],"props":[{"name":"word","type":"string | undefined","required":false,"defaultExpression":"\"snapcn.\""},{"name":"dotFrom","type":"string | undefined","required":false,"defaultExpression":"\"#3072db\""},{"name":"dotTo","type":"string | undefined","required":false,"defaultExpression":"\"#4fd8f5\""},{"name":"warm","type":"number | undefined","required":false,"defaultExpression":"1"},{"name":"theme","type":"Partial<SnapCnTheme> | undefined","required":false},{"name":"mode","type":"\"light\" | \"dark\" | undefined","required":false},{"name":"fontFamily","type":"string | undefined","required":false},{"name":"speed","type":"number | undefined","required":false,"defaultExpression":"1"}],"preview":{"width":1280,"height":720,"fps":30,"durationInFrames":66,"controls":{"word":{"type":"text","label":"Wordmark","default":"snapcn."},"dotFrom":{"type":"color","label":"Gradient (deep end)","default":"#3072db"},"dotTo":{"type":"color","label":"Gradient (light end)","default":"#4fd8f5"},"warm":{"type":"number","label":"Light","default":1,"min":0,"max":1,"step":0.05},"theme":{"type":"select","label":"Theme","default":"light","options":["light","dark"]},"fontFamily":{"type":"select","label":"Font","default":"Default","options":["Default","Inter","Geist","Space Grotesk","Outfit","Montserrat","Instrument Serif"]},"speed":{"type":"number","label":"Speed","default":1,"min":0.25,"max":4,"step":0.25}}},"sourceHash":"b3fea7ab4ba2","installHash":"89bf63de5e068be9","measurement":{"sourceHash":"b3fea7ab4ba2","width":1280,"height":720,"fps":30,"durationInFrames":66,"settle":{"base":66,"baseWords":1,"perWord":0},"copy":{"prop":"word","pxPerChar":183,"maxChars":7}}}
69
+ ]
70
+ }