ui-to-brand-morph
Shot recipes · A logo reveal · Apache-2.0
- What it does
2 named moves on one card: icon-flip-bloom (The icon rocks twice, flips flat to a sliver with double ghosting, swaps identity at the thinnest frame, and unfolds into the video-shotcraft Frame Chisel mark — the amber cut slicing in on a second beat — as the wordmark lands); input-morph-assemble (Send is clicked, the text flies off, the input box spring-morphs into a capsule that becomes the frame stem of the mark; the top and bottom bars and the amber cut drop into dashed construction outlines to assemble the video-shotcraft mark).
- Get it
Copy demos/outro/ui-to-brand-morph/IconFlipBloomLogo.tsx (and its 1 sibling file(s) in the same folder) into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Fixtures.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id="IconFlipBloomLogo" component={IconFlipBloomLogo} durationInFrames={ICON_FLIP_BLOOM_LOGO_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: "use the ui-to-brand-morph shot card". Read the card first: references/shots/outro/ui-to-brand-morph.md.
- Needs (the whole pack)
Remotion 4 and React 19, and FFmpeg for its checks. No Tailwind, no CSS files, no web fonts.
- Re-skin
Edit the file (colors, logo, text)
No props (2 demo files). It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.porcelain), but about 12 more color values are written in the demo, so changing the look alone will not re-skin it. Where its fonts come from was not checked. The logo and name on screen are the pack's own,…
- License
Apache-2.0
- From