{ "version": 1, "name": "shotpack", "origin": "https://getshotpack.com", "skill": "https://getshotpack.com/skill.md", "llms": "https://getshotpack.com/llms.txt", "generatedFrom": "video-shotcraft library.json + demos", "stats": { "cardCount": 173, "styleCount": 232, "previewCount": 230, "mediaCount": 230, "newest": "2026-08-10T14:15:49.772Z", "freeCount": 164, "paidCount": 3, "corePackPrice": "9.9", "corePackCurrency": "USD" }, "categories": { "opening": { "zh": "开场与品牌", "en": "Opening & Brand", "ja": "オープニング＆ブランド" }, "typography": { "zh": "文字与字卡", "en": "Typography & Title Cards", "ja": "タイポグラフィ＆タイトルカード" }, "ui-entrance": { "zh": "界面登场与陈列", "en": "UI Entrance & Showcase", "ja": "UI登場＆ショーケース" }, "camera": { "zh": "运镜与空间", "en": "Camera & Space", "ja": "カメラ＆空間" }, "data": { "zh": "数据与指标", "en": "Data & Metrics", "ja": "データ＆メトリクス" }, "interaction": { "zh": "交互与功能演示", "en": "Interaction & Feature Demo", "ja": "インタラクション＆機能デモ" }, "transition": { "zh": "转场", "en": "Transitions", "ja": "トランジション" }, "rhythm": { "zh": "节奏与蒙太奇", "en": "Rhythm & Montage", "ja": "リズム＆モンタージュ" }, "effects": { "zh": "光效与强调", "en": "Light & Emphasis", "ja": "ライト＆エフェクト" }, "outro": { "zh": "收尾", "en": "Outro", "ja": "アウトロ" }, "mobile": { "zh": "手机 App", "en": "Mobile App", "ja": "モバイルアプリ" } }, "shots": [ { "id": "ai-stream-response", "tier": "free", "core": true, "category": "interaction", "subcategory": null, "tags": [ "interaction" ], "summary": "An AI response panel lands a readable summary line first, then evidence rows with status icons stream in one by one, and finally everything settles into a completed state", "duration": "~4–5s (120–150f, including ≥15f of completed-state stillness)", "energy": "Medium-high (information keeps accruing, but readability outranks speed showboating)", "styles": [ { "key": "ai-stream-response", "label": "ai-stream-response", "media": "./media/ai-stream-response.mp4?v=1784437314480" } ], "preview": "https://r2.getshotpack.com/media/ai-stream-response.mp4?v=1784437314480", "poster": null, "card": "https://getshotpack.com/demos/interaction/ai-stream-response/prompt.md", "tsx": "https://getshotpack.com/demos/interaction/ai-stream-response/demo.tsx", "tsxFiles": [ "./demos/interaction/ai-stream-response/StreamResponse.tsx" ], "prompt": "https://getshotpack.com/demos/interaction/ai-stream-response/prompt.md", "unlock": null }, { "id": "app-icon-launch-expand", "tier": "free", "core": true, "category": "mobile", "subcategory": "transition", "tags": [ "mobile", "transition" ], "summary": "A desktop app icon is tapped by a finger, springs to scale up from its own center to fill the screen, and becomes the app's main screen (the home screen shrinks and dims in sync, app content reveals in a stagger); once settled, the whole device breathes", "duration": "~6.4s (192f @ 30fps, including ≥30f of stillness after settling)", "energy": "Medium (the spring expansion at the tap is the only peak, then app content settles in a stagger)", "styles": [ { "key": "app-icon-launch-expand", "label": "app-icon-launch-expand", "media": "./media/app-icon-launch-expand.mp4?v=1786372605154" } ], "preview": "https://r2.getshotpack.com/media/app-icon-launch-expand.mp4?v=1786372605154", "poster": "https://r2.getshotpack.com/media/app-icon-launch-expand-1786372605154.png", "card": "https://getshotpack.com/demos/mobile/app-icon-launch-expand/prompt.md", "tsx": "https://getshotpack.com/demos/mobile/app-icon-launch-expand/demo.tsx", "tsxFiles": [ "./demos/mobile/app-icon-launch-expand/AppIconLaunchExpand.tsx" ], "prompt": "https://getshotpack.com/demos/mobile/app-icon-launch-expand/prompt.md", "unlock": null }, { "id": "app-signup-flow", "tier": "free", "core": true, "category": "mobile", "subcategory": "interaction", "tags": [ "mobile", "interaction" ], "summary": "The phone springs up from the bottom, a cursor types into the Email field character by character, password dots fill in, a success popup springs out after clicking Sign Up, then the Dashboard stat cards stagger in and the whole device breathes to settle", "duration": "~6s (180f @ 30fps, including ≥30f of stillness after settling)", "energy": "Medium (segmented progression: entrance → typing → tap → popup → list, no single impact peak)", "styles": [ { "key": "app-signup-flow", "label": "app-signup-flow", "media": "./media/app-signup-flow.mp4?v=1786347501596" } ], "preview": "https://r2.getshotpack.com/media/app-signup-flow.mp4?v=1786347501596", "poster": "https://r2.getshotpack.com/media/app-signup-flow-1786363295560.png", "card": "https://getshotpack.com/demos/mobile/app-signup-flow/prompt.md", "tsx": "https://getshotpack.com/demos/mobile/app-signup-flow/demo.tsx", "tsxFiles": [ "./demos/mobile/app-signup-flow/AppSignupFlow.tsx" ], "prompt": "https://getshotpack.com/demos/mobile/app-signup-flow/prompt.md", "unlock": null }, { "id": "app-transition-showcase", "tier": "free", "core": true, "category": "mobile", "subcategory": "transition", "tags": [ "mobile", "transition" ], "summary": "Three in-app transitions chained together in a phone app: push slides in (list→detail), zoom pulls closer (detail→form), morph transforms shape (form→done card); each transition starts and stops on its own, then the whole device breathes to settle", "duration": "~7.4s (222f @ 30fps, including ≥30f of stillness after settling)", "energy": "Medium (each of the three transitions has its own start and stop)", "styles": [ { "key": "app-transition-showcase", "label": "app-transition-showcase", "media": "./media/app-transition-showcase-1786364790339.mp4" } ], "preview": "https://r2.getshotpack.com/media/app-transition-showcase-1786364790339.mp4", "poster": "https://r2.getshotpack.com/media/app-transition-showcase-1786364790339.png", "card": "https://getshotpack.com/demos/mobile/app-transition-showcase/prompt.md", "tsx": "https://getshotpack.com/demos/mobile/app-transition-showcase/demo.tsx", "tsxFiles": [ "./demos/mobile/app-transition-showcase/AppTransitionShowcase.tsx" ], "prompt": "https://getshotpack.com/demos/mobile/app-transition-showcase/prompt.md", "unlock": null }, { "id": "assemble-then-type-flyin", "tier": "free", "core": true, "category": "effects", "subcategory": null, "tags": [ "effects" ], "summary": "On an empty dark grid, the text-free component skeleton first flies in from all sides to lock into place; then each letter of the copy spins in through 3D space to land, big title first, small labels last; once everything lands, the page takes shape", "duration": "~5.2s (156f@30fps)", "energy": "Medium-high (sparse skeleton stage, dense text stage; energy ramps monotonically to the finish)", "styles": [ { "key": "assemble-then-type-flyin", "label": "assemble-then-type-flyin", "media": "./media/assemble-then-type-flyin.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/assemble-then-type-flyin.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/effects/assemble-then-type-flyin/prompt.md", "tsx": "https://getshotpack.com/demos/effects/assemble-then-type-flyin/demo.tsx", "tsxFiles": [ "./demos/effects/assemble-then-type-flyin/AssembleThenTypeFlyin.tsx" ], "prompt": "https://getshotpack.com/demos/effects/assemble-then-type-flyin/prompt.md", "unlock": null }, { "id": "aurora-bloom-bg-flip", "tier": "free", "core": true, "category": "effects", "subcategory": null, "tags": [ "effects" ], "summary": "Soft-focus purple-orange blobs rise from the bottom of a light gray background, then the whole base color darkens to near-black in ~0.36s and the blobs compress into afterglow; the copy syncs a blur-out sentence switch with a blur-in, leaving a gap between sentences rather than cross-fading", "duration": "~5.2s (156f@30fps)", "energy": "Low to high (first 2/3 is build-up; the darkening instant is the film's accent)", "styles": [ { "key": "aurora-bloom-bg-flip", "label": "aurora-bloom-bg-flip", "media": "./media/aurora-bloom-bg-flip.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/aurora-bloom-bg-flip.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/effects/aurora-bloom-bg-flip/prompt.md", "tsx": "https://getshotpack.com/demos/effects/aurora-bloom-bg-flip/demo.tsx", "tsxFiles": [ "./demos/effects/aurora-bloom-bg-flip/AuroraBloomBgFlip.tsx" ], "prompt": "https://getshotpack.com/demos/effects/aurora-bloom-bg-flip/prompt.md", "unlock": null }, { "id": "autolayout-gap-dial", "tier": "free", "core": true, "category": "interaction", "subcategory": null, "tags": [ "interaction" ], "summary": "A gap dial drives the layout — a row of link blocks with a marquee selection outline and gap annotations, badge numbers ticking up step by step while blocks get pushed apart in real time by the parameter and spring back into place; visualizing \"parameter-driven layout\"", "duration": "~4s (120f: marquee entry + widening 38f + hold + spring bounce-back)", "energy": "Medium (tool-rational style; the payoff is the locked sync between number and displacement)", "styles": [ { "key": "autolayout-gap-dial", "label": "autolayout-gap-dial", "media": "./media/autolayout-gap-dial.mp4?v=1784437314483" } ], "preview": "https://r2.getshotpack.com/media/autolayout-gap-dial.mp4?v=1784437314483", "poster": null, "card": "https://getshotpack.com/demos/interaction/autolayout-gap-dial/prompt.md", "tsx": "https://getshotpack.com/demos/interaction/autolayout-gap-dial/demo.tsx", "tsxFiles": [ "./demos/interaction/autolayout-gap-dial/AutolayoutGapDial.tsx" ], "prompt": "https://getshotpack.com/demos/interaction/autolayout-gap-dial/prompt.md", "unlock": null }, { "id": "avatar-bracket-carousel", "tier": "free", "core": true, "category": "ui-entrance", "subcategory": null, "tags": [ "ui-entrance" ], "summary": "\"Your ___ teammates\" placeholder layout — the four-corner focus brackets stay pinned mid-sentence while the avatar queue inside them spring-cycles three times vertically; avatars magnify and sharpen on the way in and shrink, fade and blur by distance on the way out, with the role label swapping in sync; the brackets breathe 7% at each switch", "duration": "~5.2s (156f@30fps)", "energy": "Medium (three evenly spaced switches form a steady metronome; the bracket pulse is the only decorative move)", "styles": [ { "key": "avatar-bracket-carousel", "label": "avatar-bracket-carousel", "media": "./media/avatar-bracket-carousel.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/avatar-bracket-carousel.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/ui-entrance/avatar-bracket-carousel/prompt.md", "tsx": "https://getshotpack.com/demos/ui-entrance/avatar-bracket-carousel/demo.tsx", "tsxFiles": [ "./demos/ui-entrance/avatar-bracket-carousel/AvatarBracketCarousel.tsx" ], "prompt": "https://getshotpack.com/demos/ui-entrance/avatar-bracket-carousel/prompt.md", "unlock": null }, { "id": "avatar-grid-radial-build-colorize", "tier": "free", "core": true, "category": "data", "subcategory": null, "tags": [ "data" ], "summary": "An 8×7 grid of small cards grows ring by ring from the center to fill the screen (content mixes initials / icon / image placeholders), then ~15% of the cards turn red at random moments to flag anomalies, with the title and legend staying put in the center", "duration": "~5.6s (168f @ 30fps; fill 0.5–1.7s · coloring emerges 1.7–3.4s)", "energy": "Medium (the growth phase has rhythm; the coloring phase is a quiet \"discovery\" moment)", "styles": [ { "key": "avatar-grid-radial-build-colorize", "label": "avatar-grid-radial-build-colorize", "media": "./media/avatar-grid-radial-build-colorize.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/avatar-grid-radial-build-colorize.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/data/avatar-grid-radial-build-colorize/prompt.md", "tsx": "https://getshotpack.com/demos/data/avatar-grid-radial-build-colorize/demo.tsx", "tsxFiles": [ "./demos/data/avatar-grid-radial-build-colorize/AvatarGridRadialBuildColorize.tsx" ], "prompt": "https://getshotpack.com/demos/data/avatar-grid-radial-build-colorize/prompt.md", "unlock": null }, { "id": "basic-3d-scene", "tier": "free", "core": true, "category": "camera", "subcategory": null, "tags": [ "camera" ], "summary": "impress.js-style spatial presentation: cards scattered through 3D space at different positions/rotations/scales, camera flies between stops taking the inverse of each step's pose, final step pulls back to OVERVIEW", "duration": "~6.0s (180f @ 30fps; four stops, three flights of 0.96s each)", "energy": "Medium (each transition offers a spatial surprise; hold segments read cards quietly)", "styles": [ { "key": "basic-3d-scene", "label": "basic-3d-scene", "media": "./media/basic-3d-scene.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/basic-3d-scene.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/camera/basic-3d-scene/prompt.md", "tsx": "https://getshotpack.com/demos/camera/basic-3d-scene/demo.tsx", "tsxFiles": [ "./demos/camera/basic-3d-scene/Basic3DScene.tsx" ], "prompt": "https://getshotpack.com/demos/camera/basic-3d-scene/prompt.md", "unlock": null }, { "id": "beat-cut-moves", "tier": "free", "core": true, "category": "rhythm", "subcategory": null, "tags": [ "rhythm", "transition" ], "summary": "Two variants of hard cuts as a rhythmic instrument — an accelerating hard-cut chain (halving intervals closing in on the beat) and a flash-freeze sequence (three white flashes, each cutting to a different crop)", "duration": "A total ~4.3s (setup 49f + five-cut chain + freeze hold 35f); B total ~4.3s (live footage 30f + three flashes + hold 60f)", "energy": "High", "styles": [ { "key": "beat-cut-accelerando", "label": "beat-cut-accelerando 递进硬切串", "media": "./media/beat-cut-accelerando.mp4?v=1784437314486" }, { "key": "paparazzi-flash", "label": "paparazzi-flash 连闪定格", "media": "./media/paparazzi-flash.mp4?v=1784437314488" } ], "preview": "https://r2.getshotpack.com/media/beat-cut-accelerando.mp4?v=1784437314486", "poster": null, "card": "https://getshotpack.com/demos/rhythm/beat-cut-moves/prompt.md", "tsx": "https://getshotpack.com/demos/rhythm/beat-cut-moves/demo.tsx", "tsxFiles": [ "./demos/rhythm/beat-cut-moves/BeatCutAccelerando.tsx", "./demos/rhythm/beat-cut-moves/PaparazziFlash.tsx" ], "prompt": "https://getshotpack.com/demos/rhythm/beat-cut-moves/prompt.md", "unlock": null }, { "id": "beat-step-list-theme-cycle", "tier": "free", "core": true, "category": "rhythm", "subcategory": null, "tags": [ "rhythm", "typography" ], "summary": "A three-channel metronome — an adjective list on a dark field steps up one row per beat, a pill fixed at the viewport center \"catches\" the next word and changes color, the whole field's background swaps on the same beat; row, color, and field channels lock to the same beat point", "duration": "Setup 30f + 18f per beat × beat count + closing hold; 3 beats ≈ 3.5s (demo 110f)", "energy": "High (one beat every 0.6s, all three channels jumping together; density-driven high energy)", "styles": [ { "key": "beat-step-list-theme-cycle", "label": "beat-step-list-theme-cycle", "media": "./media/beat-step-list-theme-cycle.mp4?v=1784437314492" } ], "preview": "https://r2.getshotpack.com/media/beat-step-list-theme-cycle.mp4?v=1784437314492", "poster": null, "card": "https://getshotpack.com/demos/rhythm/beat-step-list-theme-cycle/prompt.md", "tsx": "https://getshotpack.com/demos/rhythm/beat-step-list-theme-cycle/demo.tsx", "tsxFiles": [ "./demos/rhythm/beat-step-list-theme-cycle/BeatStepListThemeCycle.tsx" ], "prompt": "https://getshotpack.com/demos/rhythm/beat-step-list-theme-cycle/prompt.md", "unlock": null }, { "id": "before-after-slider-scrub", "tier": "free", "core": true, "category": "data", "subcategory": null, "tags": [ "data", "interaction" ], "summary": "Before/after comparison slider — the \"before/after\" versions stack on top of each other; the divider handle first whips across, then slowly sweeps back, revealing the new version like a photo developing under the bar", "duration": "4–5s", "energy": "Medium (the fast whip is the impact beat; the slow sweep is the reading period)", "styles": [ { "key": "before-after-slider-scrub", "label": "before-after-slider-scrub", "media": "./media/before-after-slider-scrub.mp4?v=1784437314494" } ], "preview": "https://r2.getshotpack.com/media/before-after-slider-scrub.mp4?v=1784437314494", "poster": null, "card": "https://getshotpack.com/demos/data/before-after-slider-scrub/prompt.md", "tsx": "https://getshotpack.com/demos/data/before-after-slider-scrub/demo.tsx", "tsxFiles": [ "./demos/data/before-after-slider-scrub/BeforeAfterSliderScrub.tsx" ], "prompt": "https://getshotpack.com/demos/data/before-after-slider-scrub/prompt.md", "unlock": null }, { "id": "bezier-source-converge-merge", "tier": "free", "core": true, "category": "ui-entrance", "subcategory": null, "tags": [ "ui-entrance" ], "summary": "Four source nodes on the left each have a thin Bézier curve connecting to the same converge point on the right; the curves first draw on from left to right in staggered order, the nodes slide along their own curve toward the converge point with a three-stage accelerating shrink to zero, accent-colored data packets glide along the paths the whole time, and after the merge completes the curves are erased from the left end, leaving only the circular badge", "duration": "~5.6s (168f@30fps)", "energy": "Medium (long slow steady shot, kept alive by the gliding packets; the merge moment is the only small peak)", "styles": [ { "key": "bezier-source-converge-merge", "label": "bezier-source-converge-merge", "media": "./media/bezier-source-converge-merge.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/bezier-source-converge-merge.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/ui-entrance/bezier-source-converge-merge/prompt.md", "tsx": "https://getshotpack.com/demos/ui-entrance/bezier-source-converge-merge/demo.tsx", "tsxFiles": [ "./demos/ui-entrance/bezier-source-converge-merge/BezierSourceConvergeMerge.tsx" ], "prompt": "https://getshotpack.com/demos/ui-entrance/bezier-source-converge-merge/prompt.md", "unlock": null }, { "id": "blur-slide", "tier": "free", "core": true, "category": "typography", "subcategory": null, "tags": [ "typography" ], "summary": "Title words enter one by one — y 40→0 + blur 10→0 + opacity 0→1, all three channels converging on the same outCubic easing with word gaps of ~3.5f; the subtitle follows with a stagger before the title finishes settling", "duration": "~3.8s (114f@30fps)", "energy": "Low (one-shot settle, no peaks, no loops)", "styles": [ { "key": "blur-slide", "label": "blur-slide", "media": "./media/blur-slide.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/blur-slide.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/typography/blur-slide/prompt.md", "tsx": "https://getshotpack.com/demos/typography/blur-slide/demo.tsx", "tsxFiles": [ "./demos/typography/blur-slide/BlurSlide.tsx" ], "prompt": "https://getshotpack.com/demos/typography/blur-slide/prompt.md", "unlock": null }, { "id": "bottom-push-stack-wipe", "tier": "free", "core": true, "category": "transition", "subcategory": null, "tags": [ "transition" ], "summary": "Bottom-edge push chapter switch — the new scene, background color included, is pushed in as a full-screen block from the bottom edge, physically shoving the old scene off-screen. Consecutive chapters each carry a saturated background color, with content pinned to each chapter's own color coordinate system and moving with it", "duration": "Single push 30f + in-chapter hold ~1s; demo triple push 140f (~4.7s)", "energy": "Medium", "styles": [ { "key": "bottom-push-stack-wipe", "label": "bottom-push-stack-wipe", "media": "./media/bottom-push-stack-wipe.mp4?v=1784437314497" } ], "preview": "https://r2.getshotpack.com/media/bottom-push-stack-wipe.mp4?v=1784437314497", "poster": null, "card": "https://getshotpack.com/demos/transition/bottom-push-stack-wipe/prompt.md", "tsx": "https://getshotpack.com/demos/transition/bottom-push-stack-wipe/demo.tsx", "tsxFiles": [ "./demos/transition/bottom-push-stack-wipe/BottomPushStackWipe.tsx" ], "prompt": "https://getshotpack.com/demos/transition/bottom-push-stack-wipe/prompt.md", "unlock": null }, { "id": "brace-expand", "tier": "free", "core": true, "category": "typography", "subcategory": null, "tags": [ "typography" ], "summary": "A pair of curly braces first appears small in the center, then shoots outward to ±148px while scaling up to title size; the text's clip width is strictly bound to the brace spacing, revealing it like a curtain being drawn; after settling, letter-spacing relaxes slightly", "duration": "~3.8s (114f@30fps: 7f appear → spring open → letter-spacing relax after settling → hold)", "energy": "Medium (the single overshoot is the only peak, the rest is still)", "styles": [ { "key": "brace-expand", "label": "brace-expand", "media": "./media/brace-expand.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/brace-expand.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/typography/brace-expand/prompt.md", "tsx": "https://getshotpack.com/demos/typography/brace-expand/demo.tsx", "tsxFiles": [ "./demos/typography/brace-expand/BraceExpand.tsx" ], "prompt": "https://getshotpack.com/demos/typography/brace-expand/prompt.md", "unlock": null }, { "id": "brand-frame-snap", "tier": "free", "core": true, "category": "effects", "subcategory": null, "tags": [ "effects", "transition" ], "summary": "Brand-color picture-frame grammar — a thick solid-color frame grows around the full screen before the content, and a recording window drops inside; on mode switch the whole frame hard-flips color on the same frame and the in-window layout swaps on the same frame — one borderColor handles chapter navigation, status cue, and brand exposure", "duration": "Single flip ~4.3s (130f); the frame itself can persist for the whole film", "energy": "Medium (high at the flip instant; otherwise a quiet packaging layer)", "styles": [ { "key": "brand-frame-snap", "label": "brand-frame-snap", "media": "./media/brand-frame-snap.mp4?v=1784437314500" } ], "preview": "https://r2.getshotpack.com/media/brand-frame-snap.mp4?v=1784437314500", "poster": null, "card": "https://getshotpack.com/demos/effects/brand-frame-snap/prompt.md", "tsx": "https://getshotpack.com/demos/effects/brand-frame-snap/demo.tsx", "tsxFiles": [ "./demos/effects/brand-frame-snap/BrandFrameSnap.tsx" ], "prompt": "https://getshotpack.com/demos/effects/brand-frame-snap/prompt.md", "unlock": null }, { "id": "brand-ink-open", "tier": "paid", "core": true, "category": "opening", "subcategory": null, "tags": [ "opening", "typography" ], "summary": "Ink crosshair draws in → wordmark stamps in letter by letter → typewriter kicker → a full second of stillness, then float up and dissolve", "duration": "~2.8s (83f)", "energy": "Low (opening slot, leaves climbing room for later shots)", "styles": [ { "key": "brand-ink-open", "label": "brand-ink-open", "media": "./media/brand-ink-open.mp4?v=1784437314501" } ], "preview": "https://r2.getshotpack.com/media/brand-ink-open.mp4?v=1784437314501", "poster": null, "card": "https://getshotpack.com/demos/opening/brand-ink-open/prompt.md", "tsx": null, "tsxFiles": [], "prompt": "https://getshotpack.com/demos/opening/brand-ink-open/prompt.md", "unlock": "https://getshotpack.com/pricing" }, { "id": "bubble-swarm-takeover", "tier": "free", "core": true, "category": "transition", "subcategory": null, "tags": [ "transition" ], "summary": "Pearl-gloss bubble swarm curtain transition — bubbles of varied sizes drift in from off-screen, growing until they fill the whole screen, while the page simultaneously \"washes white\". The cut is hidden at the occlusion peak, and once the bubbles scatter outward the new scene is already there; an i18n text-capsule variant can be mixed in", "duration": "~4.3s (130f: drift-in ~67f + peak-hide cut + scatter ~43f)", "energy": "Medium-High (sustained swarm movement, no instantaneous impact)", "styles": [ { "key": "bubble-swarm-takeover", "label": "bubble-swarm-takeover", "media": "./media/bubble-swarm-takeover.mp4?v=1784437314504" } ], "preview": "https://r2.getshotpack.com/media/bubble-swarm-takeover.mp4?v=1784437314504", "poster": null, "card": "https://getshotpack.com/demos/transition/bubble-swarm-takeover/prompt.md", "tsx": "https://getshotpack.com/demos/transition/bubble-swarm-takeover/demo.tsx", "tsxFiles": [ "./demos/transition/bubble-swarm-takeover/BubbleSwarmTakeover.tsx" ], "prompt": "https://getshotpack.com/demos/transition/bubble-swarm-takeover/prompt.md", "unlock": null }, { "id": "canvas-materialize-moves", "tier": "free", "core": true, "category": "interaction", "subcategory": null, "tags": [ "interaction", "ui-entrance" ], "summary": "Content \"materializes onto the canvas\" in two variants — panel-to-canvas row-flip cards (panel table rows fly out along an arc, morphing across containers into canvas cards) and diagram-cascade cascading tree generation (after the prompt types out, nodes pop in layer by layer, connections growing before their nodes)", "duration": "A ~4.3s (130f) / B ~5.3s (160f)", "energy": "Medium", "styles": [ { "key": "panel-to-canvas", "label": "panel-to-canvas 行倒卡", "media": "./media/panel-to-canvas.mp4?v=1784437314506" }, { "key": "diagram-cascade", "label": "diagram-cascade 级联生成树", "media": "./media/diagram-cascade.mp4?v=1784437314508" } ], "preview": "https://r2.getshotpack.com/media/panel-to-canvas.mp4?v=1784437314506", "poster": null, "card": "https://getshotpack.com/demos/interaction/canvas-materialize-moves/prompt.md", "tsx": "https://getshotpack.com/demos/interaction/canvas-materialize-moves/demo.tsx", "tsxFiles": [ "./demos/interaction/canvas-materialize-moves/DiagramCascadeBuild.tsx", "./demos/interaction/canvas-materialize-moves/PanelToCanvasMaterialize.tsx" ], "prompt": "https://getshotpack.com/demos/interaction/canvas-materialize-moves/prompt.md", "unlock": null }, { "id": "card-flip-reveal", "tier": "free", "core": true, "category": "transition", "subcategory": null, "tags": [ "transition", "data" ], "summary": "Feature card 3D flip reveal — a card flips 180° around the Y axis, and at its thinnest side-edge moment a highlight band that moves with the angle sweeps across; the back face reveals a large conclusion number, cards scanning across the whole row one by one with staggered timing", "duration": "Single flip 26f, three-card stagger 10f, ~4.9s total (incl. hold)", "energy": "Medium-High", "styles": [ { "key": "card-flip-reveal", "label": "card-flip-reveal", "media": "./media/card-flip-reveal.mp4?v=1784437314510" } ], "preview": "https://r2.getshotpack.com/media/card-flip-reveal.mp4?v=1784437314510", "poster": null, "card": "https://getshotpack.com/demos/transition/card-flip-reveal/prompt.md", "tsx": "https://getshotpack.com/demos/transition/card-flip-reveal/demo.tsx", "tsxFiles": [ "./demos/transition/card-flip-reveal/CardFlipReveal.tsx" ], "prompt": "https://getshotpack.com/demos/transition/card-flip-reveal/prompt.md", "unlock": null }, { "id": "card-flock-tumble", "tier": "free", "core": true, "category": "transition", "subcategory": null, "tags": [ "transition" ], "summary": "Three UI page cards tumble through 3D from their thin side edges and land as a stepped stack (fully crisp throughout, smoothly continuous splines), keep slowly rotating after landing, snap-suck toward the center, burst into a single turbulent smoke ring that expands outward, and a giant wordmark sweeps across to close", "duration": "Tumble ~1.5s + slow-rotate showcase ~0.3s + suction 0.3s + smoke ring + giant wordmark ~2s; whole section 4.5s", "energy": "Extremely High (use at the film's energy peak)", "styles": [ { "key": "card-flock-tumble", "label": "card-flock-tumble", "media": "./media/card-flock-tumble.mp4?v=1784437314514" } ], "preview": "https://r2.getshotpack.com/media/card-flock-tumble.mp4?v=1784437314514", "poster": null, "card": "https://getshotpack.com/demos/transition/card-flock-tumble/prompt.md", "tsx": "https://getshotpack.com/demos/transition/card-flock-tumble/demo.tsx", "tsxFiles": [ "./demos/transition/card-flock-tumble/CardFlockTumble.tsx" ], "prompt": "https://getshotpack.com/demos/transition/card-flock-tumble/prompt.md", "unlock": null }, { "id": "card-stack", "tier": "free", "core": true, "category": "ui-entrance", "subcategory": null, "tags": [ "ui-entrance" ], "summary": "8 cards spring in one by one from below the screen, stacking into a pile; once all settle, the whole pile fans out into a 3D spread in one move — each card rotates 8° by index, shifts 34px laterally, and steps one z-layer back", "duration": "~4.2s (126f@30fps)", "energy": "Medium-high (the entrance is a chain of small bursts; the spread closes as one smooth whole-body move)", "styles": [ { "key": "card-stack", "label": "card-stack", "media": "./media/card-stack.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/card-stack.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/ui-entrance/card-stack/prompt.md", "tsx": "https://getshotpack.com/demos/ui-entrance/card-stack/demo.tsx", "tsxFiles": [ "./demos/ui-entrance/card-stack/CardStack.tsx" ], "prompt": "https://getshotpack.com/demos/ui-entrance/card-stack/prompt.md", "unlock": null }, { "id": "carousel-3d", "tier": "free", "core": true, "category": "ui-entrance", "subcategory": null, "tags": [ "ui-entrance" ], "summary": "8 cards arranged via sin/cos into a ring of radius 190px rotating through one full turn at constant speed; each card only orbits around Y and billboards outward on its own; the front and back use the same directional texture with backface-visibility:hidden, guaranteeing every moment stays upright and never flipped; the camera stays pinned at a slight low-angle close-up the entire time", "duration": "~5.6s (168f@30fps)", "energy": "Medium (uniform speed with no variation — a steady-state motion that can loop forever)", "styles": [ { "key": "carousel-3d", "label": "carousel-3d", "media": "./media/carousel-3d.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/carousel-3d.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/ui-entrance/carousel-3d/prompt.md", "tsx": "https://getshotpack.com/demos/ui-entrance/carousel-3d/demo.tsx", "tsxFiles": [ "./demos/ui-entrance/carousel-3d/Carousel3D.tsx" ], "prompt": "https://getshotpack.com/demos/ui-entrance/carousel-3d/prompt.md", "unlock": null }, { "id": "cel-flash-stomp", "tier": "free", "core": true, "category": "typography", "subcategory": null, "tags": [ "typography", "rhythm" ], "summary": "Background-flash word stomp — large words slam full-screen slightly tilted like stamps, and at each word's landing frame the background layer strobes between two solid colors for a few frames while the text stays rock-still; a UI translation of anime finisher-attack title cards", "duration": "~30f per word × word count + ≥45f ending; three words ≈ 4.8s", "energy": "High", "styles": [ { "key": "cel-flash-stomp", "label": "cel-flash-stomp", "media": "./media/cel-flash-stomp.mp4?v=1784437314517" } ], "preview": "https://r2.getshotpack.com/media/cel-flash-stomp.mp4?v=1784437314517", "poster": null, "card": "https://getshotpack.com/demos/typography/cel-flash-stomp/prompt.md", "tsx": "https://getshotpack.com/demos/typography/cel-flash-stomp/demo.tsx", "tsxFiles": [ "./demos/typography/cel-flash-stomp/CelFlashStomp.tsx" ], "prompt": "https://getshotpack.com/demos/typography/cel-flash-stomp/prompt.md", "unlock": null }, { "id": "chart-live-moves", "tier": "free", "core": true, "category": "data", "subcategory": null, "tags": [ "data" ], "summary": "Three live-chart variants — oscilloscope-stream (the waveform writes in live at the right edge + a sudden spike), unit-dot-swarm-regroup (dots migrate in three acts to form digits), axis-rescale-shock (a new value bursts out of the frame, forcing the y-axis to rescale)", "duration": "4–6s each", "energy": "Medium-high (data is the story)", "styles": [ { "key": "oscilloscope-stream", "label": "oscilloscope-stream", "media": "./media/oscilloscope-stream.mp4?v=1784437314519" }, { "key": "unit-dot-swarm-regroup", "label": "unit-dot-swarm-regroup", "media": "./media/unit-dot-swarm-regroup.mp4?v=1785050513841" }, { "key": "axis-rescale-shock", "label": "axis-rescale-shock", "media": "./media/axis-rescale-shock.mp4?v=1784437314524" } ], "preview": "https://r2.getshotpack.com/media/oscilloscope-stream.mp4?v=1784437314519", "poster": null, "card": "https://getshotpack.com/demos/data/chart-live-moves/prompt.md", "tsx": "https://getshotpack.com/demos/data/chart-live-moves/demo.tsx", "tsxFiles": [ "./demos/data/chart-live-moves/AxisRescaleShockV2.tsx", "./demos/data/chart-live-moves/OscilloscopeStreamV2.tsx", "./demos/data/chart-live-moves/UnitDotSwarmRegroupV2.tsx" ], "prompt": "https://getshotpack.com/demos/data/chart-live-moves/prompt.md", "unlock": null }, { "id": "chat-bubble-reveal", "tier": "free", "core": true, "category": "mobile", "subcategory": "interaction", "tags": [ "mobile", "interaction" ], "summary": "Messages in an iMessage-style chat UI reveal one by one: the user side types character by character then sends (blue bubble pops in), the other side reveals a gray bubble character by character after a typing indicator, a reaction pops in with a delay, and finally the whole device breathes to settle", "duration": "~7s (210f @ 30fps, including ≥30f of stillness after settling)", "energy": "Medium (messages advance one by one; the typing indicator drives the rhythm)", "styles": [ { "key": "chat-bubble-reveal", "label": "chat-bubble-reveal", "media": "./media/chat-bubble-reveal-1786356754258.mp4" } ], "preview": "https://r2.getshotpack.com/media/chat-bubble-reveal-1786356754258.mp4", "poster": "https://r2.getshotpack.com/media/chat-bubble-reveal-1786363295560.png", "card": "https://getshotpack.com/demos/mobile/chat-bubble-reveal/prompt.md", "tsx": "https://getshotpack.com/demos/mobile/chat-bubble-reveal/demo.tsx", "tsxFiles": [ "./demos/mobile/chat-bubble-reveal/ChatBubbleReveal.tsx" ], "prompt": "https://getshotpack.com/demos/mobile/chat-bubble-reveal/prompt.md", "unlock": null }, { "id": "chat-to-preview-morph", "tier": "free", "core": true, "category": "mobile", "subcategory": "transition", "tags": [ "mobile", "transition" ], "summary": "Split screen inside a phone: the chat panel compresses from 55% to 25% height (content fades out in sync), the result preview grows from 45% to 75% (content fades in + moves up), an Apple-grade ease completes the shape transformation, and finally the whole device breathes to settle", "duration": "~6s (180f @ 30fps, including ≥30f of stillness after settling)", "energy": "Medium (a single shape transformation, slow settling with Apple ease)", "styles": [ { "key": "chat-to-preview-morph", "label": "chat-to-preview-morph", "media": "./media/chat-to-preview-morph-1786356754258.mp4" } ], "preview": "https://r2.getshotpack.com/media/chat-to-preview-morph-1786356754258.mp4", "poster": "https://r2.getshotpack.com/media/chat-to-preview-morph-1786363295560.png", "card": "https://getshotpack.com/demos/mobile/chat-to-preview-morph/prompt.md", "tsx": "https://getshotpack.com/demos/mobile/chat-to-preview-morph/demo.tsx", "tsxFiles": [ "./demos/mobile/chat-to-preview-morph/ChatToPreviewMorph.tsx" ], "prompt": "https://getshotpack.com/demos/mobile/chat-to-preview-morph/prompt.md", "unlock": null }, { "id": "chat-typing-reply", "tier": "free", "core": true, "category": "mobile", "subcategory": "interaction", "tags": [ "mobile", "interaction" ], "summary": "In a phone chat UI, the user types character by character in the input field (caret blinking), a bubble pops in after sending, the AI thinks with three looping dots, the reply reveals character by character (with its own cursor), and finally the whole device breathes to settle", "duration": "~7s (210f @ 30fps, including ≥30f of stillness after settling)", "energy": "Medium (segmented progression: typing → sending → thinking → reply, no single impact peak)", "styles": [ { "key": "chat-typing-reply", "label": "chat-typing-reply", "media": "./media/chat-typing-reply-1786356754258.mp4" } ], "preview": "https://r2.getshotpack.com/media/chat-typing-reply-1786356754258.mp4", "poster": "https://r2.getshotpack.com/media/chat-typing-reply-1786363295560.png", "card": "https://getshotpack.com/demos/mobile/chat-typing-reply/prompt.md", "tsx": "https://getshotpack.com/demos/mobile/chat-typing-reply/demo.tsx", "tsxFiles": [ "./demos/mobile/chat-typing-reply/ChatTypingReply.tsx" ], "prompt": "https://getshotpack.com/demos/mobile/chat-typing-reply/prompt.md", "unlock": null }, { "id": "checkout-flow", "tier": "free", "core": true, "category": "mobile", "subcategory": "interaction", "tags": [ "mobile", "interaction" ], "summary": "A phone checkout flow: the amount card + form fields stagger in, the confirmation card springs up after tapping Pay (overlay + order summary), and after confirming, a full-screen success state with a checkmark + receipt copy", "duration": "~7s (210f @ 30fps, including ≥30f of stillness after settling)", "energy": "Medium (form progression → confirmation popup → success)", "styles": [ { "key": "checkout-flow", "label": "checkout-flow", "media": "./media/checkout-flow-1786363141622.mp4" } ], "preview": "https://r2.getshotpack.com/media/checkout-flow-1786363141622.mp4", "poster": "https://r2.getshotpack.com/media/checkout-flow-1786363295560.png", "card": "https://getshotpack.com/demos/mobile/checkout-flow/prompt.md", "tsx": "https://getshotpack.com/demos/mobile/checkout-flow/demo.tsx", "tsxFiles": [ "./demos/mobile/checkout-flow/CheckoutFlow.tsx" ], "prompt": "https://getshotpack.com/demos/mobile/checkout-flow/prompt.md", "unlock": null }, { "id": "chip-grid-single-select-blackout", "tier": "free", "core": true, "category": "interaction", "subcategory": null, "tags": [ "interaction" ], "summary": "Five option chips, arranged 3+2 and centered, fade in one by one; at the selected frame a single gray press frame is inserted, then over a few frames the background flips pure black, the text flips white, and there's a very light 1→1.04→1 bounce-back, while the other chips dim to 18% with their positions locked; the remaining items then go to zero, the black chip lifts and narrows, and a calculation row fades in below", "duration": "~5.0s (150f@30fps)", "energy": "Medium-low (the only pop is that single gray flash; everything else is pulling back)", "styles": [ { "key": "chip-grid-single-select-blackout", "label": "chip-grid-single-select-blackout", "media": "./media/chip-grid-single-select-blackout.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/chip-grid-single-select-blackout.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/interaction/chip-grid-single-select-blackout/prompt.md", "tsx": "https://getshotpack.com/demos/interaction/chip-grid-single-select-blackout/demo.tsx", "tsxFiles": [ "./demos/interaction/chip-grid-single-select-blackout/ChipGridSingleSelectBlackout.tsx" ], "prompt": "https://getshotpack.com/demos/interaction/chip-grid-single-select-blackout/prompt.md", "unlock": null }, { "id": "chip-lift-to-user-pill", "tier": "free", "core": true, "category": "interaction", "subcategory": null, "tags": [ "interaction" ], "summary": "The target chip in the grid hard-cuts to inverted black-on-white over 3 frames, the other chips fade out and shrink staggered by their Manhattan distance from it; the black chip grows rightward anchored at its left edge into a pill, typing out a name character by character and lighting a green dot, then a 1px connector line pulls over to a circular badge", "duration": "~5.0s (150f@30fps)", "energy": "Medium (the selection moment is the hard hit; everything after is unhurried growth and typing)", "styles": [ { "key": "chip-lift-to-user-pill", "label": "chip-lift-to-user-pill", "media": "./media/chip-lift-to-user-pill.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/chip-lift-to-user-pill.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/interaction/chip-lift-to-user-pill/prompt.md", "tsx": "https://getshotpack.com/demos/interaction/chip-lift-to-user-pill/demo.tsx", "tsxFiles": [ "./demos/interaction/chip-lift-to-user-pill/ChipLiftToUserPill.tsx" ], "prompt": "https://getshotpack.com/demos/interaction/chip-lift-to-user-pill/prompt.md", "unlock": null }, { "id": "circle-match-iris", "tier": "free", "core": true, "category": "transition", "subcategory": null, "tags": [ "transition" ], "summary": "Circle-matched iris transition — the iris bursts from the center of a circular element on the foreground page, and the new page's circular chart inside the iris picks up on the same circle; the match cut gives the iris a semantic anchor", "duration": "4.7s (anchor pulse 30f + iris expansion 45f + chart growth 55f + stillness 40f)", "energy": "Medium-High", "styles": [ { "key": "circle-match-iris", "label": "circle-match-iris", "media": "./media/circle-match-iris.mp4?v=1784437314526" } ], "preview": "https://r2.getshotpack.com/media/circle-match-iris.mp4?v=1784437314526", "poster": null, "card": "https://getshotpack.com/demos/transition/circle-match-iris/prompt.md", "tsx": "https://getshotpack.com/demos/transition/circle-match-iris/demo.tsx", "tsxFiles": [ "./demos/transition/circle-match-iris/CircleMatchIris.tsx" ], "prompt": "https://getshotpack.com/demos/transition/circle-match-iris/prompt.md", "unlock": null }, { "id": "cloner-depth-echo", "tier": "free", "core": true, "category": "ui-entrance", "subcategory": null, "tags": [ "ui-entrance" ], "summary": "Clone column — the main card instantly \"copies\" out 7 semi-transparent doppelgangers arranged into a column receding diagonally in depth; after a beat pause, all of them accelerate back, merging into the original with a bounce", "duration": "4–5s", "energy": "Medium (display-then-gather type)", "styles": [ { "key": "cloner-depth-echo", "label": "cloner-depth-echo", "media": "./media/cloner-depth-echo.mp4?v=1784437314528" } ], "preview": "https://r2.getshotpack.com/media/cloner-depth-echo.mp4?v=1784437314528", "poster": null, "card": "https://getshotpack.com/demos/ui-entrance/cloner-depth-echo/prompt.md", "tsx": "https://getshotpack.com/demos/ui-entrance/cloner-depth-echo/demo.tsx", "tsxFiles": [ "./demos/ui-entrance/cloner-depth-echo/ClonerDepthEcho.tsx" ], "prompt": "https://getshotpack.com/demos/ui-entrance/cloner-depth-echo/prompt.md", "unlock": null }, { "id": "collab-cursor-moves", "tier": "free", "core": true, "category": "interaction", "subcategory": null, "tags": [ "interaction" ], "summary": "Collab cursors as actors in two variants — dialogue-duet, a two-cursor dialogue duet on a dark stage (approach/orbit/light handoff/magnified into a transition), and cast-ensemble, a five-cursor ensemble atmosphere layer (staggered fly-in + sine drift + typing cameo + converging onlookers)", "duration": "A ~4.7s (140f) / B ~4.7s (140f)", "energy": "A Medium (high narrative density) / B Low-medium (atmosphere layer, can pad any duration)", "styles": [ { "key": "dialogue-duet", "label": "dialogue-duet", "media": "./media/dialogue-duet.mp4?v=1784437314531" }, { "key": "cast-ensemble", "label": "cast-ensemble", "media": "./media/cast-ensemble.mp4?v=1784437314534" } ], "preview": "https://r2.getshotpack.com/media/dialogue-duet.mp4?v=1784437314531", "poster": null, "card": "https://getshotpack.com/demos/interaction/collab-cursor-moves/prompt.md", "tsx": "https://getshotpack.com/demos/interaction/collab-cursor-moves/demo.tsx", "tsxFiles": [ "./demos/interaction/collab-cursor-moves/CursorCastEnsemble.tsx", "./demos/interaction/collab-cursor-moves/CursorDialogueDuet.tsx" ], "prompt": "https://getshotpack.com/demos/interaction/collab-cursor-moves/prompt.md", "unlock": null }, { "id": "color-block-step-wipe", "tier": "free", "core": true, "category": "transition", "subcategory": null, "tags": [ "transition" ], "summary": "Discrete stepped color-block screen swallow, two variants — A: a small central bar hard-steps 3–5 times to fill the full screen (after takeover a badge pops out in two jumps); B: a color block eats the screen diagonally from a corner in 3 steps while carrying a page card forward one jump per step", "duration": "A ~2.5s (growth 44f + badge + hold) / B ~1.5–2s (3 jumps 30f + hold); demo total 150f", "energy": "Medium-High (energy comes from the \"jump\" hitches, not speed)", "styles": [ { "key": "color-block-step-wipe", "label": "color-block-step-wipe", "media": "./media/color-block-step-wipe.mp4?v=1784437314536" } ], "preview": "https://r2.getshotpack.com/media/color-block-step-wipe.mp4?v=1784437314536", "poster": null, "card": "https://getshotpack.com/demos/transition/color-block-step-wipe/prompt.md", "tsx": "https://getshotpack.com/demos/transition/color-block-step-wipe/demo.tsx", "tsxFiles": [ "./demos/transition/color-block-step-wipe/ColorBlockStepWipe.tsx" ], "prompt": "https://getshotpack.com/demos/transition/color-block-step-wipe/prompt.md", "unlock": null }, { "id": "command-palette-summon", "tier": "free", "core": true, "category": "interaction", "subcategory": null, "tags": [ "interaction", "ui-entrance" ], "summary": "The command palette descends — the whole screen dims with blur, the ⌘K palette drops in with overshoot, candidate rows surface staggered, and typing narrows the list in real time", "duration": "4–5s", "energy": "Medium (ritual style; the drop-in frame and the narrowing are the two small beats)", "styles": [ { "key": "command-palette-summon", "label": "command-palette-summon", "media": "./media/command-palette-summon.mp4?v=1784437314539" } ], "preview": "https://r2.getshotpack.com/media/command-palette-summon.mp4?v=1784437314539", "poster": null, "card": "https://getshotpack.com/demos/interaction/command-palette-summon/prompt.md", "tsx": "https://getshotpack.com/demos/interaction/command-palette-summon/demo.tsx", "tsxFiles": [ "./demos/interaction/command-palette-summon/CommandPaletteSummon.tsx" ], "prompt": "https://getshotpack.com/demos/interaction/command-palette-summon/prompt.md", "unlock": null }, { "id": "countdown-arc-scatter", "tier": "free", "core": true, "category": "typography", "subcategory": null, "tags": [ "typography" ], "summary": "A white-background dial with 9 equal-size numbers arranged tangentially along a large arc; the whole dial sweeps 96° then decelerates to a hard stop, \"5\" halts at the arc's apex and pans into place as the title's first character, the other numbers blur-scatter in place, and the title words blur-fade in one by one with the last word tinted accent", "duration": "~1.1s (33f@30fps, an extremely short single beat)", "energy": "High (96° sweep compressed into 17 frames, pure impact)", "styles": [ { "key": "countdown-arc-scatter", "label": "countdown-arc-scatter", "media": "./media/countdown-arc-scatter.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/countdown-arc-scatter.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/typography/countdown-arc-scatter/prompt.md", "tsx": "https://getshotpack.com/demos/typography/countdown-arc-scatter/demo.tsx", "tsxFiles": [ "./demos/typography/countdown-arc-scatter/CountdownArcScatter.tsx" ], "prompt": "https://getshotpack.com/demos/typography/countdown-arc-scatter/prompt.md", "unlock": null }, { "id": "counter-confetti", "tier": "free", "core": true, "category": "data", "subcategory": null, "tags": [ "data" ], "summary": "A big number sprints up the count with easeOutQuart plus a scale overshoot; one beat before landing, 52 confetti pieces blast in on parabolas from both sides; an impact ring expands and the label's letter-spacing tightens to close", "duration": "~4.6s (138f @ 30fps; counting 0.3–2.6s · confetti from 2.4s · settled 3.3s)", "energy": "High (the count-up builds tension + the burst releases it; the standard emotional-peak shot)", "styles": [ { "key": "counter-confetti", "label": "counter-confetti", "media": "./media/counter-confetti.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/counter-confetti.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/data/counter-confetti/prompt.md", "tsx": "https://getshotpack.com/demos/data/counter-confetti/demo.tsx", "tsxFiles": [ "./demos/data/counter-confetti/CounterConfetti.tsx" ], "prompt": "https://getshotpack.com/demos/data/counter-confetti/prompt.md", "unlock": null }, { "id": "crane-rise-reveal", "tier": "free", "core": true, "category": "opening", "subcategory": null, "tags": [ "opening", "camera", "data" ], "summary": "Crane-rise reveal — opens tight on a single row of data, the camera decelerates as it rises and pulls back, rows flood in until the full dashboard fills the frame", "duration": "5s (close-up hold 20f + rise 100f + full-frame stillness 30f)", "energy": "Medium-high (sustained one-directional motion, no impact beat)", "styles": [ { "key": "crane-rise-reveal", "label": "crane-rise-reveal", "media": "./media/crane-rise-reveal.mp4?v=1784437314541" } ], "preview": "https://r2.getshotpack.com/media/crane-rise-reveal.mp4?v=1784437314541", "poster": null, "card": "https://getshotpack.com/demos/opening/crane-rise-reveal/prompt.md", "tsx": "https://getshotpack.com/demos/opening/crane-rise-reveal/demo.tsx", "tsxFiles": [ "./demos/opening/crane-rise-reveal/CraneRiseReveal.tsx" ], "prompt": "https://getshotpack.com/demos/opening/crane-rise-reveal/prompt.md", "unlock": null }, { "id": "crash-zoom-punch", "tier": "free", "core": true, "category": "camera", "subcategory": null, "tags": [ "camera", "effects" ], "summary": "One-beat crash zoom from a wide shot to a target close-up (6f), with two landing options — overshoot bounce-back (springy) or hard-stop screen shake (weighty)", "duration": "~0.5s of motion + holds before/after (motion 6–11f, pre-hold ≥30f to establish the wide shot, post-hold ≥45f to read the close-up)", "energy": "High (instant impact, not sustained high energy)", "styles": [ { "key": "crash-zoom-punch", "label": "crash-zoom-punch", "media": "./media/crash-zoom-punch.mp4?v=1784437314543" } ], "preview": "https://r2.getshotpack.com/media/crash-zoom-punch.mp4?v=1784437314543", "poster": null, "card": "https://getshotpack.com/demos/camera/crash-zoom-punch/prompt.md", "tsx": "https://getshotpack.com/demos/camera/crash-zoom-punch/demo.tsx", "tsxFiles": [ "./demos/camera/crash-zoom-punch/CrashImpactReal.tsx", "./demos/camera/crash-zoom-punch/CrashZoomReal.tsx" ], "prompt": "https://getshotpack.com/demos/camera/crash-zoom-punch/prompt.md", "unlock": null }, { "id": "cube-navigation", "tier": "free", "core": true, "category": "transition", "subcategory": null, "tags": [ "transition" ], "summary": "Content pasted onto all six faces of a 3D cube, the camera alternating between front close-up → pulled back to an isometric view of the edges → rotating to a face and pushing in, stepping through each; every face computes lighting in real time from its normal direction", "duration": "~6.0s (180f@30fps; five camera steps, ~0.7s each + hold)", "energy": "Medium (steady spatial cruising, with beats coming from the perspective shift at each face rotation)", "styles": [ { "key": "cube-navigation", "label": "cube-navigation", "media": "./media/cube-navigation.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/cube-navigation.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/transition/cube-navigation/prompt.md", "tsx": "https://getshotpack.com/demos/transition/cube-navigation/demo.tsx", "tsxFiles": [ "./demos/transition/cube-navigation/CubeNavigation.tsx" ], "prompt": "https://getshotpack.com/demos/transition/cube-navigation/prompt.md", "unlock": null }, { "id": "cursor-flyover", "tier": "free", "core": true, "category": "camera", "subcategory": null, "tags": [ "camera" ], "summary": "After the full-page overhead view fades in, the camera flies to each of the four corners for zoom-in close-ups, while an SVG cursor syncs in to point and leaves click ripples", "duration": "~6.0s (180f @ 30fps; overhead 0–1.2s · four steps of 0.7s transition + 0.5s hold each)", "energy": "Medium (steady cruise; rhythm comes from the click ripples)", "styles": [ { "key": "cursor-flyover", "label": "cursor-flyover", "media": "./media/cursor-flyover.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/cursor-flyover.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/camera/cursor-flyover/prompt.md", "tsx": "https://getshotpack.com/demos/camera/cursor-flyover/demo.tsx", "tsxFiles": [ "./demos/camera/cursor-flyover/CursorFlyover.tsx" ], "prompt": "https://getshotpack.com/demos/camera/cursor-flyover/prompt.md", "unlock": null }, { "id": "dashboard-glow-highlight-pill", "tier": "free", "core": true, "category": "effects", "subcategory": null, "tags": [ "effects" ], "summary": "Gold lettering hovers over a black field as a data dashboard rises from the bottom with perspective and keeps drifting in 3D; a gold light spot tours from the right side down to the bottom, stretches into a capsule, then draws out the popup's glowing outline starting from it", "duration": "~2.0s (60f@30fps)", "energy": "High (2s packs rise + tour + draw-on + popup in four segments; handoffs must be airtight)", "styles": [ { "key": "dashboard-glow-highlight-pill", "label": "dashboard-glow-highlight-pill", "media": "./media/dashboard-glow-highlight-pill.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/dashboard-glow-highlight-pill.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/effects/dashboard-glow-highlight-pill/prompt.md", "tsx": "https://getshotpack.com/demos/effects/dashboard-glow-highlight-pill/demo.tsx", "tsxFiles": [ "./demos/effects/dashboard-glow-highlight-pill/DashboardGlowHighlightPill.tsx" ], "prompt": "https://getshotpack.com/demos/effects/dashboard-glow-highlight-pill/prompt.md", "unlock": null }, { "id": "dataviz-landscape-open", "tier": "free", "core": true, "category": "opening", "subcategory": null, "tags": [ "opening", "data", "camera" ], "summary": "Dark-field river-of-lines landscape opening — multiple streams merge into a main trunk, fictional ID labels float on the lines, the camera flies over at low speed with deep depth of field", "duration": "5–8s (opening atmosphere segment, ≤1 time per film)", "energy": "Low start, slow climb (opening slot, leaves room for the later ramp)", "styles": [ { "key": "dataviz-landscape-open", "label": "dataviz-landscape-open", "media": "./media/dataviz-landscape-open.mp4?v=1784437314547" } ], "preview": "https://r2.getshotpack.com/media/dataviz-landscape-open.mp4?v=1784437314547", "poster": null, "card": "https://getshotpack.com/demos/opening/dataviz-landscape-open/prompt.md", "tsx": "https://getshotpack.com/demos/opening/dataviz-landscape-open/demo.tsx", "tsxFiles": [ "./demos/opening/dataviz-landscape-open/DatavizLandscapeOpen.tsx" ], "prompt": "https://getshotpack.com/demos/opening/dataviz-landscape-open/prompt.md", "unlock": null }, { "id": "deck-deal-flyin", "tier": "paid", "core": true, "category": "ui-entrance", "subcategory": null, "tags": [ "ui-entrance" ], "summary": "In a dark metallic background, a close-up of a physical deck of cards opens with an orbit, then pulls back to the page as a pile of cards slams into the grid like dealing — hard accelerating — with the camera chasing the scroll and resting half a second on the full board", "duration": "dealing segment ~2.6s (36–113f), preceded by an optional ~2s (62f) deck close-up", "energy": "High (workhorse of the rhythm-climbing segment; don't use as the opening first shot)", "styles": [ { "key": "deck-deal-flyin", "label": "deck-deal-flyin", "media": "./media/deck-deal-flyin.mp4?v=1784437314552" } ], "preview": "https://r2.getshotpack.com/media/deck-deal-flyin.mp4?v=1784437314552", "poster": null, "card": "https://getshotpack.com/demos/ui-entrance/deck-deal-flyin/prompt.md", "tsx": null, "tsxFiles": [], "prompt": "https://getshotpack.com/demos/ui-entrance/deck-deal-flyin/prompt.md", "unlock": "https://getshotpack.com/pricing" }, { "id": "depth-layer-moves", "tier": "free", "core": true, "category": "camera", "subcategory": null, "tags": [ "camera" ], "summary": "Two layered-depth camera moves — a multi-layer parallax glide (three speed tiers translating sideways to create depth) and a fake dolly-zoom (subject pinned, background swelling in)", "duration": "parallax glide 4–5s continuous; dolly-zoom 3–4s one-way travel", "energy": "parallax = Medium (texture-forward); dolly-zoom = Medium-high (pressure builds)", "styles": [ { "key": "multiplane", "label": "multiplane", "media": "./media/multiplane.mp4?v=1784437314556" }, { "key": "dolly-zoom", "label": "dolly-zoom", "media": "./media/dolly-zoom.mp4?v=1784437314559" } ], "preview": "https://r2.getshotpack.com/media/multiplane.mp4?v=1784437314556", "poster": null, "card": "https://getshotpack.com/demos/camera/depth-layer-moves/prompt.md", "tsx": "https://getshotpack.com/demos/camera/depth-layer-moves/demo.tsx", "tsxFiles": [ "./demos/camera/depth-layer-moves/DollyZoomReal.tsx", "./demos/camera/depth-layer-moves/MultiplaneReal.tsx" ], "prompt": "https://getshotpack.com/demos/camera/depth-layer-moves/prompt.md", "unlock": null }, { "id": "device-flip-reveal", "tier": "free", "core": true, "category": "mobile", "subcategory": "hardware", "tags": [ "mobile", "hardware" ], "summary": "The phone body flips from its back side in 2.5D toward the camera; at the moment the front settles, the screen lights up and the app's main UI layers reveal in a stagger, then the whole device breathes to settle", "duration": "~4s (120f, including ≥30f of stillness after settling)", "energy": "Low → the flip accelerates into medium-high → lighting-up peak → low breathing after settling", "styles": [ { "key": "device-flip-reveal", "label": "device-flip-reveal", "media": "./media/device-flip-reveal.mp4" } ], "preview": "https://r2.getshotpack.com/media/device-flip-reveal.mp4", "poster": "https://r2.getshotpack.com/media/device-flip-reveal-1786363295560.png", "card": "https://getshotpack.com/demos/mobile/device-flip-reveal/prompt.md", "tsx": "https://getshotpack.com/demos/mobile/device-flip-reveal/demo.tsx", "tsxFiles": [ "./demos/mobile/device-flip-reveal/DeviceFlipReveal.tsx" ], "prompt": "https://getshotpack.com/demos/mobile/device-flip-reveal/prompt.md", "unlock": null }, { "id": "doc-park-left-pill-deal", "tier": "free", "core": true, "category": "ui-entrance", "subcategory": null, "tags": [ "ui-entrance" ], "summary": "The document doesn't fade out but slides out to the left leaving only ~35% width, slightly shrinking to 0.92; on the right, three white outlined pills deal in slowly to the narration rhythm (outBack pop-in); after each lands, its subtitle darkens word by word, then the whole sentence fades out before the next arrives; the document auto-scrolls very slowly the whole time, keeping \"being read\" alive", "duration": "~5.8s (174f@30fps)", "energy": "Low (slow dealing rhythm, no peaks; kept alive by the auto-scroll)", "styles": [ { "key": "doc-park-left-pill-deal", "label": "doc-park-left-pill-deal", "media": "./media/doc-park-left-pill-deal.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/doc-park-left-pill-deal.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/ui-entrance/doc-park-left-pill-deal/prompt.md", "tsx": "https://getshotpack.com/demos/ui-entrance/doc-park-left-pill-deal/demo.tsx", "tsxFiles": [ "./demos/ui-entrance/doc-park-left-pill-deal/DocParkLeftPillDeal.tsx" ], "prompt": "https://getshotpack.com/demos/ui-entrance/doc-park-left-pill-deal/prompt.md", "unlock": null }, { "id": "document-typewriter-reveal", "tier": "free", "core": true, "category": "typography", "subcategory": null, "tags": [ "typography", "ui-entrance" ], "summary": "A fully typeset real document \"writes\" itself in after the cursor, the sidebar follows, and history entries drop into the track one by one", "duration": "~3.7s (110f, including the history-list-stack tail)", "energy": "Low-mid (highest information density, steady rhythm so the viewer can read)", "styles": [ { "key": "document-typewriter-reveal", "label": "document-typewriter-reveal", "media": "./media/document-typewriter-reveal.mp4?v=1784437314877" } ], "preview": "https://r2.getshotpack.com/media/document-typewriter-reveal.mp4?v=1784437314877", "poster": null, "card": "https://getshotpack.com/demos/typography/document-typewriter-reveal/prompt.md", "tsx": null, "tsxFiles": [], "prompt": "https://getshotpack.com/demos/typography/document-typewriter-reveal/prompt.md", "unlock": null }, { "id": "draw-svg-trace", "tier": "free", "core": true, "category": "ui-entrance", "subcategory": null, "tags": [ "ui-entrance", "typography" ], "summary": "Stroke-grow circle annotation — an inked stroke with a pen tip traces around the element's outline, \"drawing\" it; at the moment it closes, a black flash hands off and content fades in; the same trick can draw an underline under titles", "duration": "stroke 40f + black flash hand-off 16f + hold ≥35f, about 3–4s", "energy": "Medium", "styles": [ { "key": "draw-svg-trace", "label": "draw-svg-trace", "media": "./media/draw-svg-trace.mp4?v=1784437314561" } ], "preview": "https://r2.getshotpack.com/media/draw-svg-trace.mp4?v=1784437314561", "poster": null, "card": "https://getshotpack.com/demos/ui-entrance/draw-svg-trace/prompt.md", "tsx": "https://getshotpack.com/demos/ui-entrance/draw-svg-trace/demo.tsx", "tsxFiles": [ "./demos/ui-entrance/draw-svg-trace/DrawSvgTrace.tsx" ], "prompt": "https://getshotpack.com/demos/ui-entrance/draw-svg-trace/prompt.md", "unlock": null }, { "id": "edit-hook-moves", "tier": "free", "core": true, "category": "outro", "subcategory": null, "tags": [ "outro" ], "summary": "logo-sting-button end-of-film hook — after the end logo settles, a 12f easter-egg hard-cut inserts before closing, a trailer-style button ending", "duration": "~5s", "energy": "Low → momentary medium → low", "styles": [ { "key": "logo-sting-button", "label": "logo-sting-button", "media": "./media/logo-sting-button.mp4?v=1784437314562" } ], "preview": "https://r2.getshotpack.com/media/logo-sting-button.mp4?v=1784437314562", "poster": null, "card": "https://getshotpack.com/demos/outro/edit-hook-moves/prompt.md", "tsx": "https://getshotpack.com/demos/outro/edit-hook-moves/demo.tsx", "tsxFiles": [ "./demos/outro/edit-hook-moves/LogoStingButton.tsx" ], "prompt": "https://getshotpack.com/demos/outro/edit-hook-moves/prompt.md", "unlock": null }, { "id": "element-body-moves", "tier": "free", "core": true, "category": "ui-entrance", "subcategory": null, "tags": [ "ui-entrance" ], "summary": "Two variants of element body-feel — axial-stretch stretches along the motion axis like taffy, contact-shadow-lift lifts off the plane with a contact shadow", "duration": "A ~4.7s / B ~5.3s", "energy": "A medium-high / B low-medium", "styles": [ { "key": "axial-stretch", "label": "axial-stretch", "media": "./media/axial-stretch.mp4?v=1784437314564" }, { "key": "contact-shadow-lift", "label": "contact-shadow-lift", "media": "./media/contact-shadow-lift.mp4?v=1784437314566" } ], "preview": "https://r2.getshotpack.com/media/axial-stretch.mp4?v=1784437314564", "poster": null, "card": "https://getshotpack.com/demos/ui-entrance/element-body-moves/prompt.md", "tsx": "https://getshotpack.com/demos/ui-entrance/element-body-moves/demo.tsx", "tsxFiles": [ "./demos/ui-entrance/element-body-moves/AxialStretch.tsx", "./demos/ui-entrance/element-body-moves/ContactShadowLift.tsx" ], "prompt": "https://getshotpack.com/demos/ui-entrance/element-body-moves/prompt.md", "unlock": null }, { "id": "error-shake-field", "tier": "free", "core": true, "category": "mobile", "subcategory": "interaction", "tags": [ "mobile", "interaction" ], "summary": "After tapping submit on a login form, validation fails: the whole device shakes horizontally (~8 cycles, amplitude decaying to 0), the email input turns red with a red glow, an inline error message slides up, and after the error state lingers the whole device breathes", "duration": "~5.6s (168f @ 30fps, including ≥30f of stillness after settling)", "energy": "Medium-high (the shake is the only impact peak, then it quickly decays and settles)", "styles": [ { "key": "error-shake-field", "label": "error-shake-field", "media": "./media/error-shake-field.mp4?v=1786372193224" } ], "preview": "https://r2.getshotpack.com/media/error-shake-field.mp4?v=1786372193224", "poster": "https://r2.getshotpack.com/media/error-shake-field-1786372193224.png", "card": "https://getshotpack.com/demos/mobile/error-shake-field/prompt.md", "tsx": "https://getshotpack.com/demos/mobile/error-shake-field/demo.tsx", "tsxFiles": [ "./demos/mobile/error-shake-field/ErrorShakeField.tsx" ], "prompt": "https://getshotpack.com/demos/mobile/error-shake-field/prompt.md", "unlock": null }, { "id": "faceid-unlock-scan", "tier": "free", "core": true, "category": "mobile", "subcategory": "screen", "tags": [ "mobile", "screen" ], "summary": "A scan beam sweeps up and down across the face wireframe in the center of the lock screen (3 times) while the scanning ring arc fills in sync; when done, a checkmark springs out, the lock screen scales and fades out, and desktop icons reveal in a stagger", "duration": "~6.7s (200f @ 30fps, including ≥30f of stillness after settling)", "energy": "Medium (the scan segment has an even rhythm, the checkmark is a small peak, settling after unlock)", "styles": [ { "key": "faceid-unlock-scan", "label": "faceid-unlock-scan", "media": "./media/faceid-unlock-scan.mp4?v=1786372658734" } ], "preview": "https://r2.getshotpack.com/media/faceid-unlock-scan.mp4?v=1786372658734", "poster": "https://r2.getshotpack.com/media/faceid-unlock-scan-1786372658734.png", "card": "https://getshotpack.com/demos/mobile/faceid-unlock-scan/prompt.md", "tsx": "https://getshotpack.com/demos/mobile/faceid-unlock-scan/demo.tsx", "tsxFiles": [ "./demos/mobile/faceid-unlock-scan/FaceIdUnlockScan.tsx" ], "prompt": "https://getshotpack.com/demos/mobile/faceid-unlock-scan/prompt.md", "unlock": null }, { "id": "floating-glossy-label-pills", "tier": "free", "core": true, "category": "ui-entrance", "subcategory": null, "tags": [ "ui-entrance" ], "summary": "Four light-gray dashboard wireframe panels each topped with a glossy highlight capsule label in a row; the track shifts position over three beats to the right (ease-in → mid push → ease-out, first beat slower with a long tail); the centered one magnifies and sharpens, the two sides shrink to 0.62, sink, fade and slightly blur, forming a corridor feel; at the end a black cursor with a white outline slides diagonally from top right to rest at the right end of the last capsule", "duration": "~4.0s (120f@30fps)", "energy": "Medium (three position shifts form the beat, no explosion; the cursor is the attention hand-off at the end)", "styles": [ { "key": "floating-glossy-label-pills", "label": "floating-glossy-label-pills", "media": "./media/floating-glossy-label-pills.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/floating-glossy-label-pills.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/ui-entrance/floating-glossy-label-pills/prompt.md", "tsx": "https://getshotpack.com/demos/ui-entrance/floating-glossy-label-pills/demo.tsx", "tsxFiles": [ "./demos/ui-entrance/floating-glossy-label-pills/FloatingGlossyLabelPills.tsx" ], "prompt": "https://getshotpack.com/demos/ui-entrance/floating-glossy-label-pills/prompt.md", "unlock": null }, { "id": "flying-words", "tier": "free", "core": true, "category": "typography", "subcategory": null, "tags": [ "typography" ], "summary": "22 keywords laid out by golden angle on a flattened ellipse cross-section, flying along the z-axis from -1750px past the camera at 800px; opacity follows the [0,1,0.5,0.2,0] life curve, running 2 full loops end-seamlessly", "duration": "~6.0s (180f@30fps, 2 full loops, seamlessly loopable)", "energy": "High (continuous full-screen 3D translation, not a single still frame)", "styles": [ { "key": "flying-words", "label": "flying-words", "media": "./media/flying-words.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/flying-words.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/typography/flying-words/prompt.md", "tsx": "https://getshotpack.com/demos/typography/flying-words/demo.tsx", "tsxFiles": [ "./demos/typography/flying-words/FlyingWords.tsx" ], "prompt": "https://getshotpack.com/demos/typography/flying-words/prompt.md", "unlock": null }, { "id": "fracture", "tier": "free", "core": true, "category": "opening", "subcategory": null, "tags": [ "opening" ], "summary": "A 5×5 tile grid assembles from a 3D fragmented state into a full poster via concentric ripples from the center; a one-beat pause to read the word, then all fragments accelerate spinning outward and leave the frame", "duration": "~5.2s (156f@30fps; assemble 0–2.6s · hold 1s · scatter 1.5s)", "energy": "High (high energy at both ends, stillness in the middle — fits bracketing a BGM accent)", "styles": [ { "key": "fracture", "label": "fracture", "media": "./media/fracture.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/fracture.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/opening/fracture/prompt.md", "tsx": "https://getshotpack.com/demos/opening/fracture/demo.tsx", "tsxFiles": [ "./demos/opening/fracture/Fracture.tsx" ], "prompt": "https://getshotpack.com/demos/opening/fracture/prompt.md", "unlock": null }, { "id": "fui-hud-moves", "tier": "free", "core": true, "category": "effects", "subcategory": null, "tags": [ "effects", "ui-entrance" ], "summary": "FUI/HUD two variants — line-unfold-panel, a line unfolds into a panel (line→plane CRT grammar), and reticle-lock-on, a reticle locks on (viewfinder flies in and locks the target)", "duration": "A 3–4s (incl. exit) / B 2–3s", "energy": "A medium / B medium-high (the lock frame is the hit point)", "styles": [ { "key": "line-unfold-panel", "label": "line-unfold-panel", "media": "./media/line-unfold-panel.mp4?v=1784437314568" }, { "key": "reticle-lock-on", "label": "reticle-lock-on", "media": "./media/reticle-lock-on.mp4?v=1784437314570" } ], "preview": "https://r2.getshotpack.com/media/line-unfold-panel.mp4?v=1784437314568", "poster": null, "card": "https://getshotpack.com/demos/effects/fui-hud-moves/prompt.md", "tsx": "https://getshotpack.com/demos/effects/fui-hud-moves/demo.tsx", "tsxFiles": [ "./demos/effects/fui-hud-moves/LineUnfoldPanel.tsx", "./demos/effects/fui-hud-moves/ReticleLockOn.tsx" ], "prompt": "https://getshotpack.com/demos/effects/fui-hud-moves/prompt.md", "unlock": null }, { "id": "gauge-readout-moves", "tier": "free", "core": true, "category": "data", "subcategory": null, "tags": [ "data" ], "summary": "Two gauge-reading variants — needle-sweep-selftest (ignition self-check: the needle whips across the full arc, then settles back to the true value) and tape-scroll-fixed-pointer (the needle stays put while the tick-marked tape scrolls past, with a sprint-and-brake)", "duration": "A 4–5s / B 4–5s", "energy": "Medium-high (mechanical ritual type)", "styles": [ { "key": "needle-sweep-selftest", "label": "needle-sweep-selftest", "media": "./media/needle-sweep-selftest.mp4?v=1784437314573" }, { "key": "tape-scroll-fixed-pointer", "label": "tape-scroll-fixed-pointer", "media": "./media/tape-scroll-fixed-pointer.mp4?v=1784437314575" } ], "preview": "https://r2.getshotpack.com/media/needle-sweep-selftest.mp4?v=1784437314573", "poster": null, "card": "https://getshotpack.com/demos/data/gauge-readout-moves/prompt.md", "tsx": "https://getshotpack.com/demos/data/gauge-readout-moves/demo.tsx", "tsxFiles": [ "./demos/data/gauge-readout-moves/NeedleSweepSelftest.tsx", "./demos/data/gauge-readout-moves/TapeScrollFixedPointer.tsx" ], "prompt": "https://getshotpack.com/demos/data/gauge-readout-moves/prompt.md", "unlock": null }, { "id": "glass-pill-dictation-typing", "tier": "free", "core": true, "category": "interaction", "subcategory": null, "tags": [ "interaction" ], "summary": "On pure black, a fixed-width glass pill pops in at about 1.25× then settles down softly; inside, an accent light sweeps in from dark-on-the-left to bright-on-the-right; the caret leads, then a placeholder sentence types out, the light gradually dies as typing progresses, ending as a neutral dark glass bar", "duration": "~1.7s (50f@30fps)", "energy": "Low (the quietest beat in the film; only the light recedes)", "styles": [ { "key": "glass-pill-dictation-typing", "label": "glass-pill-dictation-typing", "media": "./media/glass-pill-dictation-typing.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/glass-pill-dictation-typing.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/interaction/glass-pill-dictation-typing/prompt.md", "tsx": "https://getshotpack.com/demos/interaction/glass-pill-dictation-typing/demo.tsx", "tsxFiles": [ "./demos/interaction/glass-pill-dictation-typing/GlassPillDictationTyping.tsx" ], "prompt": "https://getshotpack.com/demos/interaction/glass-pill-dictation-typing/prompt.md", "unlock": null }, { "id": "glitch-cycle", "tier": "free", "core": true, "category": "typography", "subcategory": null, "tags": [ "typography" ], "summary": "A single monospace slot row cycles 4 status phrases; each phrase's head and tail go full-glitch via the probabilistic keyframes [1,0,0,0.1,0,0,1], the middle occasionally twitches a single character, and on every switch the whole line layers RGB split with a horizontal jitter; the last phrase's probability drops to 0 so the ending is clean", "duration": "~5.6s (168f@30fps, 4 phrases at 42f each)", "energy": "Medium-high (continuous high-frequency noise pulses, switching points are peaks)", "styles": [ { "key": "glitch-cycle", "label": "glitch-cycle", "media": "./media/glitch-cycle.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/glitch-cycle.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/typography/glitch-cycle/prompt.md", "tsx": "https://getshotpack.com/demos/typography/glitch-cycle/demo.tsx", "tsxFiles": [ "./demos/typography/glitch-cycle/GlitchCycle.tsx" ], "prompt": "https://getshotpack.com/demos/typography/glitch-cycle/prompt.md", "unlock": null }, { "id": "glow-flyline-moves", "tier": "free", "core": true, "category": "effects", "subcategory": null, "tags": [ "effects", "data" ], "summary": "Dark-field glow orbs and flylines, three variants — glow-orb-ambient ambient orb noise, flyline-arc arc connection, orb-flyline-relay same-frame resonance combo", "duration": "A ~5s / B ~4.7s / C ~5.2s", "energy": "A low (noise-level) / B medium / C medium-high", "styles": [ { "key": "glow-orb-ambient", "label": "glow-orb-ambient", "media": "./media/glow-orb-ambient.mp4?v=1784437314579" }, { "key": "flyline-arc", "label": "flyline-arc", "media": "./media/flyline-arc.mp4?v=1784437314581" }, { "key": "orb-flyline-relay", "label": "orb-flyline-relay", "media": "./media/orb-flyline-relay.mp4?v=1784437314584" } ], "preview": "https://r2.getshotpack.com/media/glow-orb-ambient.mp4?v=1784437314579", "poster": null, "card": "https://getshotpack.com/demos/effects/glow-flyline-moves/prompt.md", "tsx": "https://getshotpack.com/demos/effects/glow-flyline-moves/demo.tsx", "tsxFiles": [ "./demos/effects/glow-flyline-moves/FlylineArc.tsx", "./demos/effects/glow-flyline-moves/GlowOrbAmbient.tsx", "./demos/effects/glow-flyline-moves/OrbFlylineRelay.tsx" ], "prompt": "https://getshotpack.com/demos/effects/glow-flyline-moves/prompt.md", "unlock": null }, { "id": "gradient-transition", "tier": "free", "core": true, "category": "transition", "subcategory": null, "tags": [ "transition" ], "summary": "Background smoothly transitions among the three CSS gradient types linear, radial, and conic — angle, color stops, center, and radius each interpolate parameter-by-parameter, with short cross-fades between segments when switching types", "duration": "~6.0s (180f@30fps; linear 0–2.4s · radial 2–4.2s · conic 4–6s)", "energy": "Low (pure background motion, yielding to the foreground content)", "styles": [ { "key": "gradient-transition", "label": "gradient-transition", "media": "./media/gradient-transition.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/gradient-transition.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/transition/gradient-transition/prompt.md", "tsx": "https://getshotpack.com/demos/transition/gradient-transition/demo.tsx", "tsxFiles": [ "./demos/transition/gradient-transition/GradientTransition.tsx" ], "prompt": "https://getshotpack.com/demos/transition/gradient-transition/prompt.md", "unlock": null }, { "id": "gradient-word-sweep", "tier": "free", "core": true, "category": "typography", "subcategory": null, "tags": [ "typography", "effects" ], "summary": "On a black background, a keyword in a slogan gets \"charged\" by a gradient color sweep fast left-to-right — the wavefront characters glow brightest then decay backward, and once filled, thin purple-red lightning links between characters while the whole word holds a steady breathing glow", "duration": "sweep-charge ~15–20f (must be fast) + steady lightning-breathing 1–2s; total 2.5–3.5s", "energy": "High (one word bursts; everything around it should yield)", "styles": [ { "key": "gradient-word-sweep", "label": "gradient-word-sweep", "media": "./media/gradient-word-sweep.mp4?v=1784437314587" } ], "preview": "https://r2.getshotpack.com/media/gradient-word-sweep.mp4?v=1784437314587", "poster": null, "card": "https://getshotpack.com/demos/typography/gradient-word-sweep/prompt.md", "tsx": "https://getshotpack.com/demos/typography/gradient-word-sweep/demo.tsx", "tsxFiles": [ "./demos/typography/gradient-word-sweep/GradientWordSweep.tsx" ], "prompt": "https://getshotpack.com/demos/typography/gradient-word-sweep/prompt.md", "unlock": null }, { "id": "grain-dissolve", "tier": "free", "core": true, "category": "outro", "subcategory": null, "tags": [ "outro" ], "summary": "A full line of text bursts into boiling grain noise with a diagonal selection box appearing; the noise cloud rapidly condenses into a larger glowing short wordmark, then translation decays to zero and freezes", "duration": "~2.0s (60f@30fps; sand-ification 0.26–0.56s · condensing 1.2–1.42s · solidify-settle ending)", "energy": "Medium-high (a short, one-shot energy pulse; a natural outro beat-sync)", "styles": [ { "key": "grain-dissolve", "label": "grain-dissolve", "media": "./media/grain-dissolve.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/grain-dissolve.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/outro/grain-dissolve/prompt.md", "tsx": "https://getshotpack.com/demos/outro/grain-dissolve/demo.tsx", "tsxFiles": [ "./demos/outro/grain-dissolve/GrainDissolve.tsx" ], "prompt": "https://getshotpack.com/demos/outro/grain-dissolve/prompt.md", "unlock": null }, { "id": "graze-face-tour", "tier": "free", "core": true, "category": "camera", "subcategory": null, "tags": [ "camera", "ui-entrance" ], "summary": "High-angle face-grazing close-up tour — the camera skims low across the UI surface (sidebar tree/header/list as terrain), while page text initially floats above the interface with matching soft shadows, then accelerates down to stick back onto the interface one after another as the camera advances", "duration": "4–5s per segment; can chain multiple segments to extend", "energy": "Medium-high (continuous camera drive + elements landing in sequence, high information density)", "styles": [ { "key": "graze-face-tour", "label": "graze-face-tour", "media": "./media/graze-face-tour.mp4?v=1785050508191" } ], "preview": "https://r2.getshotpack.com/media/graze-face-tour.mp4?v=1785050508191", "poster": null, "card": "https://getshotpack.com/demos/camera/graze-face-tour/prompt.md", "tsx": "https://getshotpack.com/demos/camera/graze-face-tour/demo.tsx", "tsxFiles": [ "./demos/camera/graze-face-tour/GrazeFaceTour.tsx" ], "prompt": "https://getshotpack.com/demos/camera/graze-face-tour/prompt.md", "unlock": null }, { "id": "hashtag-to-pill-materialize", "tier": "free", "core": true, "category": "interaction", "subcategory": null, "tags": [ "interaction", "typography" ], "summary": "A topic word types itself into being — \"#word\" types out centered (red solid caret steady-on), hard-cuts in 1 frame into a wide pill tag, holds, then shrinks and shifts left to land in the page's tag slot, then hard-cuts in 1 frame to reveal the finished page; a \"two hard cuts sandwiching one slide\" rhythm skeleton", "duration": "typing ~40f + hard-cut pill hold ~18f + shrink-shift ~14f + stillness after hard-cut reveal; whole segment ~3.5s (original film 18–21.5s)", "energy": "Medium (crisp; powered by hard cuts, not bounces)", "styles": [ { "key": "hashtag-to-pill-materialize", "label": "hashtag-to-pill-materialize", "media": "./media/hashtag-to-pill-materialize.mp4?v=1784437314594" } ], "preview": "https://r2.getshotpack.com/media/hashtag-to-pill-materialize.mp4?v=1784437314594", "poster": null, "card": "https://getshotpack.com/demos/interaction/hashtag-to-pill-materialize/prompt.md", "tsx": "https://getshotpack.com/demos/interaction/hashtag-to-pill-materialize/demo.tsx", "tsxFiles": [ "./demos/interaction/hashtag-to-pill-materialize/HashtagToPillMaterialize.tsx" ], "prompt": "https://getshotpack.com/demos/interaction/hashtag-to-pill-materialize/prompt.md", "unlock": null }, { "id": "hatch-depth", "tier": "free", "core": true, "category": "data", "subcategory": null, "tags": [ "data" ], "summary": "Hatch-pattern placeholder bars wipe-stretch into place one by one; then the hatching fades out, an accent-colored solid layer fades in, values pop up, and the placeholder graphic transforms into a real data bar chart", "duration": "~4.4s (132f @ 30fps; growth 0–1.7s · transformation 2.2–3.4s · micro-tremor ending)", "energy": "Medium (information builds progressively, no explosion; the texture swap creates the \"it's live\" moment)", "styles": [ { "key": "hatch-depth", "label": "hatch-depth", "media": "./media/hatch-depth.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/hatch-depth.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/data/hatch-depth/prompt.md", "tsx": "https://getshotpack.com/demos/data/hatch-depth/demo.tsx", "tsxFiles": [ "./demos/data/hatch-depth/HatchDepth.tsx" ], "prompt": "https://getshotpack.com/demos/data/hatch-depth/prompt.md", "unlock": null }, { "id": "icon-field-colorize", "tier": "free", "core": true, "category": "opening", "subcategory": null, "tags": [ "opening", "ui-entrance", "outro" ], "summary": "A grayscale dot-matrix of small icons emerges staggered to fill the screen; a one-beat pause, then several brand-color horizontal bands sweep down across the whole field at extreme speed — an opening/closing card that \"lays out the full feature set, then lights it up in brand color in one instant\"", "duration": "Emergence ~45f staggered + settle ~10f + color flip 12–45f + final settle; 3–4s total", "energy": "Medium (emergence is setup; the color-flip instant is the only burst)", "styles": [ { "key": "icon-field-colorize", "label": "icon-field-colorize", "media": "./media/icon-field-colorize.mp4?v=1784437314599" } ], "preview": "https://r2.getshotpack.com/media/icon-field-colorize.mp4?v=1784437314599", "poster": null, "card": "https://getshotpack.com/demos/opening/icon-field-colorize/prompt.md", "tsx": "https://getshotpack.com/demos/opening/icon-field-colorize/demo.tsx", "tsxFiles": [ "./demos/opening/icon-field-colorize/IconFieldColorize.tsx" ], "prompt": "https://getshotpack.com/demos/opening/icon-field-colorize/prompt.md", "unlock": null }, { "id": "icon-performance-moves", "tier": "free", "core": true, "category": "effects", "subcategory": null, "tags": [ "effects", "interaction" ], "summary": "Icon performance, two variants — pop-burst-confirm confirmation burst (checkmark builds, pops big, explodes particles + spreading ring) and attention-bounce attention-seeking bounce (icon bounces higher in sequence + landing squash + camera drawn in)", "duration": "A 3–4s / B 4–5s", "energy": "A climactic accent / B charging intro", "styles": [ { "key": "pop-burst-confirm", "label": "pop-burst-confirm", "media": "./media/pop-burst-confirm.mp4?v=1784437314602" }, { "key": "attention-bounce", "label": "attention-bounce", "media": "./media/attention-bounce.mp4?v=1784437314603" } ], "preview": "https://r2.getshotpack.com/media/pop-burst-confirm.mp4?v=1784437314602", "poster": null, "card": "https://getshotpack.com/demos/effects/icon-performance-moves/prompt.md", "tsx": "https://getshotpack.com/demos/effects/icon-performance-moves/demo.tsx", "tsxFiles": [ "./demos/effects/icon-performance-moves/AttentionBounce.tsx", "./demos/effects/icon-performance-moves/PopBurstConfirm.tsx" ], "prompt": "https://getshotpack.com/demos/effects/icon-performance-moves/prompt.md", "unlock": null }, { "id": "impact-feedback", "tier": "free", "core": true, "category": "effects", "subcategory": null, "tags": [ "effects" ], "summary": "Hit feedback, two variants — hit-counter combo counting (hit-stop + damage numbers + combo jump text) and anime-impact impact frame (negative + focus lines + chromatic aberration)", "duration": "n/a (element-level technique, parasitic on landing moves; frame usage per variant in the parameter table)", "energy": "high (instantaneous impact)", "styles": [ { "key": "hit-counter", "label": "hit-counter 连招计数", "media": "./media/hit-counter.mp4?v=1784437314606" }, { "key": "anime-impact", "label": "anime-impact 打击帧", "media": "./media/anime-impact.mp4?v=1784437314607" } ], "preview": "https://r2.getshotpack.com/media/hit-counter.mp4?v=1784437314606", "poster": null, "card": "https://getshotpack.com/demos/effects/impact-feedback/prompt.md", "tsx": "https://getshotpack.com/demos/effects/impact-feedback/demo.tsx", "tsxFiles": [ "./demos/effects/impact-feedback/AnimeImpact.tsx", "./demos/effects/impact-feedback/HitCounter.tsx" ], "prompt": "https://getshotpack.com/demos/effects/impact-feedback/prompt.md", "unlock": null }, { "id": "input-trigger-moves", "tier": "free", "core": true, "category": "interaction", "subcategory": null, "tags": [ "interaction", "opening" ], "summary": "Input triggers in two variants — cursor-performance, a cursor performing a click push-in, and keycap-smash-cut, a keycap fuse detonating into a smash cut", "duration": "A ~5s / C ~5s", "energy": "A Medium / C High", "styles": [ { "key": "cursor-performance", "label": "cursor-performance", "media": "./media/cursor-performance.mp4?v=1784437314610" }, { "key": "keycap-smash-cut", "label": "keycap-smash-cut", "media": "./media/keycap-smash-cut.mp4?v=1784437314612" } ], "preview": "https://r2.getshotpack.com/media/cursor-performance.mp4?v=1784437314610", "poster": null, "card": "https://getshotpack.com/demos/interaction/input-trigger-moves/prompt.md", "tsx": "https://getshotpack.com/demos/interaction/input-trigger-moves/demo.tsx", "tsxFiles": [ "./demos/interaction/input-trigger-moves/CursorPerformancePunchIn.tsx", "./demos/interaction/input-trigger-moves/KeycapSmashCut.tsx" ], "prompt": "https://getshotpack.com/demos/interaction/input-trigger-moves/prompt.md", "unlock": null }, { "id": "integration-hub-map", "tier": "free", "core": true, "category": "ui-entrance", "subcategory": null, "tags": [ "ui-entrance", "effects" ], "summary": "The old page flips 180° in one fast turn (its side edge flashes briefly) landing on a new hub page; five integration app icons pop in on the same frame, then five rainbow light-pipes connect all at once on the same frame, with delivery pulses flowing through the pipes continuously — \"turn a new page, the whole ecosystem hooks in at once\"", "duration": "windup ~0.5s + fast flip ~1.2s + icons all at once → pipes connect, two beats ~0.7s + delivery breathing ≥1.5s; whole piece 4.5–5s", "energy": "Medium-high (the flip is the explosion, the delivery segment is the afterglow)", "styles": [ { "key": "integration-hub-map", "label": "integration-hub-map", "media": "./media/integration-hub-map.mp4?v=1784437314616" } ], "preview": "https://r2.getshotpack.com/media/integration-hub-map.mp4?v=1784437314616", "poster": null, "card": "https://getshotpack.com/demos/ui-entrance/integration-hub-map/prompt.md", "tsx": "https://getshotpack.com/demos/ui-entrance/integration-hub-map/demo.tsx", "tsxFiles": [ "./demos/ui-entrance/integration-hub-map/IntegrationHubMap.tsx" ], "prompt": "https://getshotpack.com/demos/ui-entrance/integration-hub-map/prompt.md", "unlock": null }, { "id": "letterspace-materialize", "tier": "free", "core": true, "category": "opening", "subcategory": null, "tags": [ "opening", "typography", "outro" ], "summary": "A wide-letter-spaced wordmark crystallizes as every character draws its stroke in continuous parallel — all letters start on the same frame, strokes grow like handwriting, and all finish into the word on the same frame; a brand wordmark develops on an atmospheric backdrop", "duration": "Settle ~15f + draw ~50f + final settle ≥30f; 3–4s total", "energy": "Low (a serene ritual, done in one breath)", "styles": [ { "key": "letterspace-materialize", "label": "letterspace-materialize", "media": "./media/letterspace-materialize.mp4?v=1784437314618" } ], "preview": "https://r2.getshotpack.com/media/letterspace-materialize.mp4?v=1784437314618", "poster": null, "card": "https://getshotpack.com/demos/opening/letterspace-materialize/prompt.md", "tsx": "https://getshotpack.com/demos/opening/letterspace-materialize/demo.tsx", "tsxFiles": [ "./demos/opening/letterspace-materialize/LetterspaceMaterialize.tsx" ], "prompt": "https://getshotpack.com/demos/opening/letterspace-materialize/prompt.md", "unlock": null }, { "id": "light-play-moves", "tier": "free", "core": true, "category": "effects", "subcategory": null, "tags": [ "effects", "typography" ], "summary": "Light effects, three variants — spotlight-sweep sweeping light over text, sheen single-pass sheen sweep, halation-bloom impact-stop halation bloom", "duration": "A ~5.3s / B ~4.7s / D ~4.8s", "energy": "A medium / B low / D high", "styles": [ { "key": "spotlight-sweep", "label": "spotlight-sweep", "media": "./media/spotlight-sweep.mp4?v=1784437314621" }, { "key": "sheen-sweep", "label": "sheen-sweep", "media": "./media/sheen-sweep.mp4?v=1784437314622" }, { "key": "halation-bloom", "label": "halation-bloom", "media": "./media/halation-bloom.mp4?v=1784437314624" } ], "preview": "https://r2.getshotpack.com/media/spotlight-sweep.mp4?v=1784437314621", "poster": null, "card": "https://getshotpack.com/demos/effects/light-play-moves/prompt.md", "tsx": "https://getshotpack.com/demos/effects/light-play-moves/demo.tsx", "tsxFiles": [ "./demos/effects/light-play-moves/HalationBloom.tsx", "./demos/effects/light-play-moves/SheenSweepRetry.tsx", "./demos/effects/light-play-moves/SpotlightSweepReveal.tsx" ], "prompt": "https://getshotpack.com/demos/effects/light-play-moves/prompt.md", "unlock": null }, { "id": "line-boil", "tier": "free", "core": true, "category": "effects", "subcategory": null, "tags": [ "effects", "typography" ], "summary": "Line boil — during a hold, text/outline contours jitter slightly every 3 frames, like hand-drawn frame-by-frame redrawing, keeping still frames \"alive\" with breathing", "duration": "parasitic — boil segment follows the host's hold length, no duration of its own", "energy": "low (noise-level)", "styles": [ { "key": "line-boil", "label": "line-boil", "media": "./media/line-boil.mp4?v=1784437314626" } ], "preview": "https://r2.getshotpack.com/media/line-boil.mp4?v=1784437314626", "poster": null, "card": "https://getshotpack.com/demos/effects/line-boil/prompt.md", "tsx": "https://getshotpack.com/demos/effects/line-boil/demo.tsx", "tsxFiles": [ "./demos/effects/line-boil/LineBoil.tsx" ], "prompt": "https://getshotpack.com/demos/effects/line-boil/prompt.md", "unlock": null }, { "id": "line-carry-transition", "tier": "free", "core": true, "category": "transition", "subcategory": null, "tags": [ "transition", "camera" ], "summary": "Line-relay lateral transition — scene A's progress bar extends off-frame, the camera follows the line sideways, the line rounds a corner mid-move to frame scene B's card box, with no cut anywhere", "duration": "~5.3s (progress bar fills + lateral move 60f + framing + content fade-in + stillness 36f)", "energy": "Medium", "styles": [ { "key": "line-carry-transition", "label": "line-carry-transition", "media": "./media/line-carry-transition.mp4?v=1784437314628" } ], "preview": "https://r2.getshotpack.com/media/line-carry-transition.mp4?v=1784437314628", "poster": null, "card": "https://getshotpack.com/demos/transition/line-carry-transition/prompt.md", "tsx": "https://getshotpack.com/demos/transition/line-carry-transition/demo.tsx", "tsxFiles": [ "./demos/transition/line-carry-transition/LineCarryTransition.tsx" ], "prompt": "https://getshotpack.com/demos/transition/line-carry-transition/prompt.md", "unlock": null }, { "id": "list-reveal", "tier": "free", "core": true, "category": "ui-entrance", "subcategory": null, "tags": [ "ui-entrance" ], "summary": "Six items of a vertical menu find their place one by one at 0.09 intervals via scale, settling with a slight outBack overshoot, while the whole list container drifts linearly upward 32px the entire time — per-item entrance and whole-list drift are two unrelated layers of motion", "duration": "~3.6s (108f@30fps)", "energy": "Low (steady beat, no peaks; drift keeps the frame alive)", "styles": [ { "key": "list-reveal", "label": "list-reveal", "media": "./media/list-reveal.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/list-reveal.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/ui-entrance/list-reveal/prompt.md", "tsx": "https://getshotpack.com/demos/ui-entrance/list-reveal/demo.tsx", "tsxFiles": [ "./demos/ui-entrance/list-reveal/ListReveal.tsx" ], "prompt": "https://getshotpack.com/demos/ui-entrance/list-reveal/prompt.md", "unlock": null }, { "id": "list-stack-press", "tier": "free", "core": true, "category": "ui-entrance", "subcategory": null, "tags": [ "ui-entrance" ], "summary": "List cards fly up one by one from the bottom of the frame stacking into a pile; each landing presses the whole pile down and bounces it back, while the counter ticks up one in sync", "duration": "~3s (18–88f)", "energy": "Medium", "styles": [ { "key": "list-stack-press", "label": "list-stack-press", "media": "./media/list-stack-press.mp4?v=1784437314631" } ], "preview": "https://r2.getshotpack.com/media/list-stack-press.mp4?v=1784437314631", "poster": null, "card": "https://getshotpack.com/demos/ui-entrance/list-stack-press/prompt.md", "tsx": null, "tsxFiles": [], "prompt": "https://getshotpack.com/demos/ui-entrance/list-stack-press/prompt.md", "unlock": null }, { "id": "logo-shrink-wordmark-lockup", "tier": "free", "core": true, "category": "outro", "subcategory": null, "tags": [ "outro" ], "summary": "A neon-gap giant ring rapidly contracts into a small solid white O in the center with an overshoot brake; the icon shifts left to make room, letters slide in one by one to complete the lockup, an accent-color tagline closes it out", "duration": "~4.4s (132f@30fps; contract 0.1–1.2s · yield 1.5–2.1s · letters 2–2.7s · tagline 3.2–3.7s)", "energy": "Medium (impactful contraction segment, overall a steady settling rhythm)", "styles": [ { "key": "logo-shrink-wordmark-lockup", "label": "logo-shrink-wordmark-lockup", "media": "./media/logo-shrink-wordmark-lockup.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/logo-shrink-wordmark-lockup.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/outro/logo-shrink-wordmark-lockup/prompt.md", "tsx": "https://getshotpack.com/demos/outro/logo-shrink-wordmark-lockup/demo.tsx", "tsxFiles": [ "./demos/outro/logo-shrink-wordmark-lockup/LogoShrinkWordmarkLockup.tsx" ], "prompt": "https://getshotpack.com/demos/outro/logo-shrink-wordmark-lockup/prompt.md", "unlock": null }, { "id": "magician-card-flourish", "tier": "free", "core": true, "category": "opening", "subcategory": null, "tags": [ "opening", "ui-entrance", "effects" ], "summary": "On a pure black field a blue star-burst flashes for 0.3s (an X-shaped needle beam rotating 90° + a central glow radiating short spikes), then the card shoots out of the flash point — spinning extremely fast along an arc toward the camera, spin decaying with proximity, a hard freeze near full-frame, then a sheen sweep after the freeze", "duration": "Flash 0.3s + flight ~1.7s + freeze showcase + sheen ~2s; 4.2s total", "energy": "High (a one-shot burst; still after the freeze)", "styles": [ { "key": "magician-card-flourish", "label": "magician-card-flourish", "media": "./media/magician-card-flourish.mp4?v=1784437314633" } ], "preview": "https://r2.getshotpack.com/media/magician-card-flourish.mp4?v=1784437314633", "poster": null, "card": "https://getshotpack.com/demos/opening/magician-card-flourish/prompt.md", "tsx": "https://getshotpack.com/demos/opening/magician-card-flourish/demo.tsx", "tsxFiles": [ "./demos/opening/magician-card-flourish/MagicianCardFlourish.tsx" ], "prompt": "https://getshotpack.com/demos/opening/magician-card-flourish/prompt.md", "unlock": null }, { "id": "marker-underline-title", "tier": "free", "core": true, "category": "typography", "subcategory": null, "tags": [ "typography" ], "summary": "After the big title settles, a marker underline quickly draws left-to-right beneath the keyword — tapered stroke, rough edges, slight upward tilt following the italic letterform, hugging the text baseline", "duration": "title settles + stroke starts 4~8f later, draw 8–12f, total 1–1.5s", "energy": "Low (one stroke of punctuation, doesn't steal the title's show)", "styles": [ { "key": "marker-underline-title", "label": "marker-underline-title", "media": "./media/marker-underline-title.mp4?v=1784437314635" } ], "preview": "https://r2.getshotpack.com/media/marker-underline-title.mp4?v=1784437314635", "poster": null, "card": "https://getshotpack.com/demos/typography/marker-underline-title/prompt.md", "tsx": "https://getshotpack.com/demos/typography/marker-underline-title/demo.tsx", "tsxFiles": [ "./demos/typography/marker-underline-title/MarkerUnderlineTitle.tsx" ], "prompt": "https://getshotpack.com/demos/typography/marker-underline-title/prompt.md", "unlock": null }, { "id": "mobile-chart-live", "tier": "free", "core": true, "category": "mobile", "subcategory": "data", "tags": [ "mobile", "data" ], "summary": "A real-time line chart on a phone data page (\"Active sessions\") grows point by point from the left edge to the right, the current-value counter rolls with the progress, two stat cards on top stagger in, on a light grid backdrop, and finally the whole device breathes to settle", "duration": "~6s (180f @ 30fps, including ≥30f of stillness after settling)", "energy": "Medium (line growth + counter)", "styles": [ { "key": "mobile-chart-live", "label": "mobile-chart-live", "media": "./media/mobile-chart-live-1786363881104.mp4" } ], "preview": "https://r2.getshotpack.com/media/mobile-chart-live-1786363881104.mp4", "poster": "https://r2.getshotpack.com/media/mobile-chart-live-1786363881104.png", "card": "https://getshotpack.com/demos/mobile/mobile-chart-live/prompt.md", "tsx": "https://getshotpack.com/demos/mobile/mobile-chart-live/demo.tsx", "tsxFiles": [ "./demos/mobile/mobile-chart-live/MobileChartLive.tsx" ], "prompt": "https://getshotpack.com/demos/mobile/mobile-chart-live/prompt.md", "unlock": null }, { "id": "montage-rhythm-moves", "tier": "free", "core": true, "category": "rhythm", "subcategory": null, "tags": [ "rhythm" ], "summary": "Three montage rhythm variants — drop-blackout-slam blackout buildup to burst, wright-triple-cut triple click close-ups, domino-cascade domino chain entrance", "duration": "A 4.3s / B 4.3s / C 5s", "energy": "High", "styles": [ { "key": "drop-blackout-slam", "label": "drop-blackout-slam 黑场蓄爆", "media": "./media/drop-blackout-slam.mp4?v=1784437314637" }, { "key": "wright-triple-cut", "label": "wright-triple-cut 三连特写", "media": "./media/wright-triple-cut.mp4?v=1784437314638" }, { "key": "domino-cascade", "label": "domino-cascade 连锁入场", "media": "./media/domino-cascade.mp4?v=1784437314640" } ], "preview": "https://r2.getshotpack.com/media/drop-blackout-slam.mp4?v=1784437314637", "poster": null, "card": "https://getshotpack.com/demos/rhythm/montage-rhythm-moves/prompt.md", "tsx": "https://getshotpack.com/demos/rhythm/montage-rhythm-moves/demo.tsx", "tsxFiles": [ "./demos/rhythm/montage-rhythm-moves/DominoCascade.tsx", "./demos/rhythm/montage-rhythm-moves/DropBlackoutSlam.tsx", "./demos/rhythm/montage-rhythm-moves/WrightTripleCut.tsx" ], "prompt": "https://getshotpack.com/demos/rhythm/montage-rhythm-moves/prompt.md", "unlock": null }, { "id": "morph-from-primitive", "tier": "free", "core": true, "category": "ui-entrance", "subcategory": null, "tags": [ "ui-entrance", "opening" ], "summary": "Primitive morph — a circle takes one breathing beat (anticipation), then an SVG path interpolates over 24f into a rounded-card outline, with content fading in", "duration": "~4.7s (breath 20f + morph 24f + content fade-in 12f)", "energy": "Medium-low", "styles": [ { "key": "morph-from-primitive", "label": "morph-from-primitive", "media": "./media/morph-from-primitive.mp4?v=1784437314642" } ], "preview": "https://r2.getshotpack.com/media/morph-from-primitive.mp4?v=1784437314642", "poster": null, "card": "https://getshotpack.com/demos/ui-entrance/morph-from-primitive/prompt.md", "tsx": "https://getshotpack.com/demos/ui-entrance/morph-from-primitive/demo.tsx", "tsxFiles": [ "./demos/ui-entrance/morph-from-primitive/MorphFromPrimitive.tsx" ], "prompt": "https://getshotpack.com/demos/ui-entrance/morph-from-primitive/prompt.md", "unlock": null }, { "id": "mosaic-reframe", "tier": "free", "core": true, "category": "transition", "subcategory": null, "tags": [ "transition" ], "summary": "Twelve tiles continuously morph among a regular grid, a feature mosaic, and a diagonal waterfall — position, width, and height each interpolate independently, with a slight per-tile stagger and holds between segments", "duration": "~6.0s (180f@30fps; emergence 0–0.6s · A→B 1.6–2.5s · hold · B→C 3.7–4.8s)", "energy": "Medium (continuous flowing re-arrangement, no burst point, composed temperament)", "styles": [ { "key": "mosaic-reframe", "label": "mosaic-reframe", "media": "./media/mosaic-reframe.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/mosaic-reframe.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/transition/mosaic-reframe/prompt.md", "tsx": "https://getshotpack.com/demos/transition/mosaic-reframe/demo.tsx", "tsxFiles": [ "./demos/transition/mosaic-reframe/MosaicReframe.tsx" ], "prompt": "https://getshotpack.com/demos/transition/mosaic-reframe/prompt.md", "unlock": null }, { "id": "neon-frame-forerun", "tier": "free", "core": true, "category": "ui-entrance", "subcategory": null, "tags": [ "ui-entrance", "effects" ], "summary": "A strongly-perspective neon rectangular frame races in from the left edge from both ends to take shape first; the page inside the frame brightens from dark, while components/text inside the frame settle down from 3D space in staggered order with soft same-shape shadows, completing the fit in sync with the page lighting; background neon tube clusters dim at the end to yield the spotlight", "duration": "frame race-in ~0.6s + lighting & settling ~2s + background dimming ~0.8s; whole piece 4–4.5s", "energy": "Medium-high (three layers of action stacked, but all serving one same entrance)", "styles": [ { "key": "neon-frame-forerun", "label": "neon-frame-forerun", "media": "./media/neon-frame-forerun.mp4?v=1784437314646" } ], "preview": "https://r2.getshotpack.com/media/neon-frame-forerun.mp4?v=1784437314646", "poster": null, "card": "https://getshotpack.com/demos/ui-entrance/neon-frame-forerun/prompt.md", "tsx": "https://getshotpack.com/demos/ui-entrance/neon-frame-forerun/demo.tsx", "tsxFiles": [ "./demos/ui-entrance/neon-frame-forerun/NeonFrameForerun.tsx" ], "prompt": "https://getshotpack.com/demos/ui-entrance/neon-frame-forerun/prompt.md", "unlock": null }, { "id": "neon-frame-orbit-drop", "tier": "free", "core": true, "category": "ui-entrance", "subcategory": null, "tags": [ "ui-entrance", "effects", "camera" ], "summary": "After the neon frame sketches its outline first, the camera arcs from the page's left to right, and all page components/text settle down from the air **on the same frame** (same-shape soft shadows converging in sync) — a whole-body-entrance in-frame installation", "duration": "frame sketch ~0.5s + rotation & simultaneous settling ~2.5s + settled ~1s; whole piece 4–4.5s", "energy": "Medium-high (one big one-shot move; still once settled)", "styles": [ { "key": "neon-frame-orbit-drop", "label": "neon-frame-orbit-drop", "media": "./media/neon-frame-orbit-drop.mp4?v=1785050511487" } ], "preview": "https://r2.getshotpack.com/media/neon-frame-orbit-drop.mp4?v=1785050511487", "poster": null, "card": "https://getshotpack.com/demos/ui-entrance/neon-frame-orbit-drop/prompt.md", "tsx": "https://getshotpack.com/demos/ui-entrance/neon-frame-orbit-drop/demo.tsx", "tsxFiles": [ "./demos/ui-entrance/neon-frame-orbit-drop/NeonFrameForerunOrbit.tsx" ], "prompt": "https://getshotpack.com/demos/ui-entrance/neon-frame-orbit-drop/prompt.md", "unlock": null }, { "id": "neon-triple-marquee", "tier": "free", "core": true, "category": "outro", "subcategory": null, "tags": [ "outro", "typography" ], "summary": "Three rows of opposite-direction neon marquees recap — BETTER/FASTER/STRONGER in giant hollow-stroke letters stacked top/middle/bottom filling the screen; odd/even rows roll horizontally at constant speed in opposite directions; the three rows light up in turn on a 1/3 phase; the whole group fades out at the end", "duration": "4–5s (demo 150f: 10f fade-in + loop body + 20f fade-out)", "energy": "Medium-high (continuous flow + per-row pulses, no instantaneous impact)", "styles": [ { "key": "neon-triple-marquee", "label": "neon-triple-marquee", "media": "./media/neon-triple-marquee.mp4?v=1784437314656" } ], "preview": "https://r2.getshotpack.com/media/neon-triple-marquee.mp4?v=1784437314656", "poster": null, "card": "https://getshotpack.com/demos/outro/neon-triple-marquee/prompt.md", "tsx": "https://getshotpack.com/demos/outro/neon-triple-marquee/demo.tsx", "tsxFiles": [ "./demos/outro/neon-triple-marquee/NeonTripleMarquee.tsx" ], "prompt": "https://getshotpack.com/demos/outro/neon-triple-marquee/prompt.md", "unlock": null }, { "id": "notification-banner-drop", "tier": "free", "core": true, "category": "mobile", "subcategory": "interaction", "tags": [ "mobile", "interaction" ], "summary": "A white notification banner springs in from the top of the phone (with overshoot), content rows then reveal, a finger taps the banner, the banner scales up and fades out, a conversation page slides in from the top, and message bubbles float up in a stagger", "duration": "~7s (210f @ 30fps, including ≥30f of stillness after settling)", "energy": "Medium-low (the banner drop is one small peak; the rest is sliding in and staggered reveals)", "styles": [ { "key": "notification-banner-drop", "label": "notification-banner-drop", "media": "./media/notification-banner-drop.mp4?v=1786372186393" } ], "preview": "https://r2.getshotpack.com/media/notification-banner-drop.mp4?v=1786372186393", "poster": "https://r2.getshotpack.com/media/notification-banner-drop-1786372186393.png", "card": "https://getshotpack.com/demos/mobile/notification-banner-drop/prompt.md", "tsx": "https://getshotpack.com/demos/mobile/notification-banner-drop/demo.tsx", "tsxFiles": [ "./demos/mobile/notification-banner-drop/NotificationBannerDrop.tsx" ], "prompt": "https://getshotpack.com/demos/mobile/notification-banner-drop/prompt.md", "unlock": null }, { "id": "odometer-digit-roll", "tier": "free", "core": true, "category": "data", "subcategory": null, "tags": [ "data", "typography" ], "summary": "Odometer-style rolling number in giant type — each digit of a full-screen hero metric spins vertically like a slot-machine reel with motion trails, locking in place one by one left to right with an overshoot; the instant all digits lock, the whole number deepens in a pulse", "duration": "rolling + digit-by-digit lock ~63f + pulse 8f + hold ≥45f, ~5s", "energy": "Medium-high", "styles": [ { "key": "odometer-digit-roll", "label": "odometer-digit-roll", "media": "./media/odometer-digit-roll.mp4?v=1784437314659" } ], "preview": "https://r2.getshotpack.com/media/odometer-digit-roll.mp4?v=1784437314659", "poster": null, "card": "https://getshotpack.com/demos/data/odometer-digit-roll/prompt.md", "tsx": "https://getshotpack.com/demos/data/odometer-digit-roll/demo.tsx", "tsxFiles": [ "./demos/data/odometer-digit-roll/OdometerDigitRoll.tsx" ], "prompt": "https://getshotpack.com/demos/data/odometer-digit-roll/prompt.md", "unlock": null }, { "id": "onboarding-stepper", "tier": "free", "core": true, "category": "mobile", "subcategory": "screen", "tags": [ "mobile", "screen" ], "summary": "A step-by-step phone onboarding flow: the top stepper dots/connectors light up and advance with each step, each step's content enters with blur-in + slide-up, the bottom Next/Finish button presses through transitions, and a checkmark pops out when done", "duration": "~7s (210f @ 30fps, including ≥30f of stillness after settling)", "energy": "Medium (step-by-step progression, one small peak per step)", "styles": [ { "key": "onboarding-stepper", "label": "onboarding-stepper", "media": "./media/onboarding-stepper-1786356754258.mp4" } ], "preview": "https://r2.getshotpack.com/media/onboarding-stepper-1786356754258.mp4", "poster": "https://r2.getshotpack.com/media/onboarding-stepper-1786363295560.png", "card": "https://getshotpack.com/demos/mobile/onboarding-stepper/prompt.md", "tsx": "https://getshotpack.com/demos/mobile/onboarding-stepper/demo.tsx", "tsxFiles": [ "./demos/mobile/onboarding-stepper/OnboardingStepper.tsx" ], "prompt": "https://getshotpack.com/demos/mobile/onboarding-stepper/prompt.md", "unlock": null }, { "id": "outline-word-fill", "tier": "free", "core": true, "category": "typography", "subcategory": null, "tags": [ "typography" ], "summary": "An outlined word (1px gray stroke, 500 weight) slams in from 3.2x scale with rapid deceleration; a dashed large circle then shrinks from 2.8x around the word and slowly self-rotates; horizontal dashed lines extend inward from the frame edges; the stroke brightens slightly first, then the solid white ignites within 0.6 frames, a one-frame flash and freezes", "duration": "~2.5s (75f@30fps, a short single beat)", "energy": "High (3.2x contraction + instant ignition, short high impact)", "styles": [ { "key": "outline-word-fill", "label": "outline-word-fill", "media": "./media/outline-word-fill.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/outline-word-fill.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/typography/outline-word-fill/prompt.md", "tsx": "https://getshotpack.com/demos/typography/outline-word-fill/demo.tsx", "tsxFiles": [ "./demos/typography/outline-word-fill/OutlineWordFill.tsx" ], "prompt": "https://getshotpack.com/demos/typography/outline-word-fill/prompt.md", "unlock": null }, { "id": "outro-group-photo-launch", "tier": "free", "core": true, "category": "outro", "subcategory": null, "tags": [ "outro" ], "summary": "Representative elements of the whole film fly in from all directions to form a group photo around the wordmark; crane camera settle + stage light + golden dust make a launch-show close", "duration": "~4.8s (145f)", "energy": "Peak (the film's highest point)", "styles": [ { "key": "outro-group-photo-launch", "label": "outro-group-photo-launch", "media": "./media/outro-group-photo-launch.mp4?v=1784437314661" } ], "preview": "https://r2.getshotpack.com/media/outro-group-photo-launch.mp4?v=1784437314661", "poster": null, "card": "https://getshotpack.com/demos/outro/outro-group-photo-launch/prompt.md", "tsx": null, "tsxFiles": [], "prompt": "https://getshotpack.com/demos/outro/outro-group-photo-launch/prompt.md", "unlock": null }, { "id": "overhead-camera-moves", "tier": "free", "core": true, "category": "camera", "subcategory": null, "tags": [ "camera", "opening", "transition" ], "summary": "Two overhead reveal moves — tilt-reveal rights the frame to reveal, and overhead-tabletop-drop slides across a tabletop card array then plunges in", "duration": "A ~4.8s / B ~4.7s", "energy": "A Medium / B Medium-high", "styles": [ { "key": "tilt-reveal", "label": "tilt-reveal", "media": "./media/tilt-reveal.mp4?v=1784437314664" }, { "key": "overhead-tabletop-drop", "label": "overhead-tabletop-drop", "media": "./media/overhead-tabletop-drop.mp4?v=1784437314666" } ], "preview": "https://r2.getshotpack.com/media/tilt-reveal.mp4?v=1784437314664", "poster": null, "card": "https://getshotpack.com/demos/camera/overhead-camera-moves/prompt.md", "tsx": "https://getshotpack.com/demos/camera/overhead-camera-moves/demo.tsx", "tsxFiles": [ "./demos/camera/overhead-camera-moves/OverheadTabletopDrop.tsx", "./demos/camera/overhead-camera-moves/TiltReveal.tsx" ], "prompt": "https://getshotpack.com/demos/camera/overhead-camera-moves/prompt.md", "unlock": null }, { "id": "page-turn-transitions", "tier": "free", "core": true, "category": "transition", "subcategory": null, "tags": [ "transition" ], "summary": "Full-page solid-block transitions, two variants — cube-rotate (two pages glued to adjacent cube faces, rotating 90°) and barn-door-split (the old page splits in two and slides apart, the new page meeting it head-on)", "duration": "Per variant, previous-state setup 30f + transition 20–38f + ending ≥40f, ~4.4–4.7s", "energy": "Medium-High", "styles": [ { "key": "cube-rotate", "label": "cube-rotate", "media": "./media/cube-rotate.mp4?v=1784437314669" }, { "key": "barn-door-split", "label": "barn-door-split", "media": "./media/barn-door-split.mp4?v=1784437314671" } ], "preview": "https://r2.getshotpack.com/media/cube-rotate.mp4?v=1784437314669", "poster": null, "card": "https://getshotpack.com/demos/transition/page-turn-transitions/prompt.md", "tsx": "https://getshotpack.com/demos/transition/page-turn-transitions/demo.tsx", "tsxFiles": [ "./demos/transition/page-turn-transitions/BarnDoorSplit.tsx", "./demos/transition/page-turn-transitions/CubeRotate.tsx" ], "prompt": "https://getshotpack.com/demos/transition/page-turn-transitions/prompt.md", "unlock": null }, { "id": "page-waterfall-wall", "tier": "free", "core": true, "category": "ui-entrance", "subcategory": null, "tags": [ "ui-entrance" ], "summary": "Page waterfall wall — real page screenshots cut into 3–4 columns scrolling infinitely on a 3D reclined wall at differential speeds in opposite directions, with parallax + a slow lens push-in making a \"so much content it never runs out\" overview", "duration": "4–6s (infinite loop; length cut to the paragraph's needs)", "energy": "Medium (flowing display type)", "styles": [ { "key": "page-waterfall-wall", "label": "page-waterfall-wall", "media": "./media/page-waterfall-wall.mp4?v=1784437314678" } ], "preview": "https://r2.getshotpack.com/media/page-waterfall-wall.mp4?v=1784437314678", "poster": null, "card": "https://getshotpack.com/demos/ui-entrance/page-waterfall-wall/prompt.md", "tsx": "https://getshotpack.com/demos/ui-entrance/page-waterfall-wall/demo.tsx", "tsxFiles": [ "./demos/ui-entrance/page-waterfall-wall/PageWaterfallWall.tsx", "./demos/ui-entrance/page-waterfall-wall/VerticalTicker.tsx" ], "prompt": "https://getshotpack.com/demos/ui-entrance/page-waterfall-wall/prompt.md", "unlock": null }, { "id": "panel-grid-moves", "tier": "free", "core": true, "category": "rhythm", "subcategory": null, "tags": [ "rhythm", "ui-entrance" ], "summary": "Three panel-grid rhythm variants — grid-flash-mosaic 3×3 grid flash-cut filling the wall and swallowing the screen, flip-grid-reflow collective grid rearrangement, comic-panel-split comic-style diagonal panels with three camera positions in parallel", "duration": "A ~4.7s / B ~4.8s / C ~5s", "energy": "A High / B Medium / C Medium-high", "styles": [ { "key": "grid-flash-mosaic", "label": "grid-flash-mosaic", "media": "./media/grid-flash-mosaic.mp4?v=1784437314682" }, { "key": "flip-grid-reflow", "label": "flip-grid-reflow", "media": "./media/flip-grid-reflow.mp4?v=1784437314684" }, { "key": "comic-panel-split", "label": "comic-panel-split", "media": "./media/comic-panel-split.mp4?v=1784437314685" } ], "preview": "https://r2.getshotpack.com/media/grid-flash-mosaic.mp4?v=1784437314682", "poster": null, "card": "https://getshotpack.com/demos/rhythm/panel-grid-moves/prompt.md", "tsx": "https://getshotpack.com/demos/rhythm/panel-grid-moves/demo.tsx", "tsxFiles": [ "./demos/rhythm/panel-grid-moves/ComicPanelSplit.tsx", "./demos/rhythm/panel-grid-moves/FlipGridReflow.tsx", "./demos/rhythm/panel-grid-moves/GridFlashMosaic.tsx" ], "prompt": "https://getshotpack.com/demos/rhythm/panel-grid-moves/prompt.md", "unlock": null }, { "id": "paper-craft-moves", "tier": "free", "core": true, "category": "ui-entrance", "subcategory": null, "tags": [ "ui-entrance" ], "summary": "Two paper-craft variants — masking-tape-slap presses a card down with masking tape (a floating micro-wobble gets \"slap-slap\" pressed dead) and popup-book-rise stands cards up like a pop-up book (cards rising along their bottom edges into a wall, staggered)", "duration": "A 3–4s / B 4–5.5s", "energy": "A medium (two hitting beats) / B medium-high (the rising wall has depth impact)", "styles": [ { "key": "masking-tape-slap", "label": "masking-tape-slap", "media": "./media/masking-tape-slap.mp4?v=1784437314688" }, { "key": "popup-book-rise", "label": "popup-book-rise", "media": "./media/popup-book-rise.mp4?v=1784437314689" } ], "preview": "https://r2.getshotpack.com/media/masking-tape-slap.mp4?v=1784437314688", "poster": null, "card": "https://getshotpack.com/demos/ui-entrance/paper-craft-moves/prompt.md", "tsx": "https://getshotpack.com/demos/ui-entrance/paper-craft-moves/demo.tsx", "tsxFiles": [ "./demos/ui-entrance/paper-craft-moves/MaskingTapeSlap.tsx", "./demos/ui-entrance/paper-craft-moves/PopupBookRise.tsx" ], "prompt": "https://getshotpack.com/demos/ui-entrance/paper-craft-moves/prompt.md", "unlock": null }, { "id": "paper-plane-messenger", "tier": "free", "core": true, "category": "transition", "subcategory": null, "tags": [ "transition", "camera" ], "summary": "Paper-plane messenger transition — after clicking \"send\", the camera pulls back out of window A, the origami plane flies out along a Bézier arc (pitch following the tangent), the camera escorts it through multi-layer parallax props, arrives and settles at window B's door, and B zooms in to take over the full screen", "duration": "~5s (150f: click 12f → pull-back 16–42f → flight 34–104f → B takeover 112–146f)", "energy": "Medium", "styles": [ { "key": "paper-plane-messenger", "label": "paper-plane-messenger", "media": "./media/paper-plane-messenger.mp4?v=1784437314692" } ], "preview": "https://r2.getshotpack.com/media/paper-plane-messenger.mp4?v=1784437314692", "poster": null, "card": "https://getshotpack.com/demos/transition/paper-plane-messenger/prompt.md", "tsx": "https://getshotpack.com/demos/transition/paper-plane-messenger/demo.tsx", "tsxFiles": [ "./demos/transition/paper-plane-messenger/PaperPlaneMessenger.tsx" ], "prompt": "https://getshotpack.com/demos/transition/paper-plane-messenger/prompt.md", "unlock": null }, { "id": "paper-title-card", "tier": "paid", "core": true, "category": "typography", "subcategory": null, "tags": [ "typography", "transition", "rhythm" ], "summary": "A one-sentence line presses word by word onto the paper, one word marked with accent italic, a short dash closes in", "duration": "1.7–1.8s (50–55f)", "energy": "Low (breathing spot, separates two high-energy shots)", "styles": [ { "key": "paper-title-card", "label": "paper-title-card", "media": "./media/paper-title-card.mp4?v=1784437314694" } ], "preview": "https://r2.getshotpack.com/media/paper-title-card.mp4?v=1784437314694", "poster": null, "card": "https://getshotpack.com/demos/typography/paper-title-card/prompt.md", "tsx": null, "tsxFiles": [], "prompt": "https://getshotpack.com/demos/typography/paper-title-card/prompt.md", "unlock": "https://getshotpack.com/pricing" }, { "id": "particle-celebrate-hits", "tier": "free", "core": true, "category": "data", "subcategory": null, "tags": [ "data", "effects" ], "summary": "Two celebration-particle variants — confetti-crossfire (twin cannons fire crossing confetti barrages on the milestone-reveal frame) and counter-tick-sparks (the counter bursts sparks at its top each time it crosses a full thousand)", "duration": "A 3–4s / B 4–5s", "energy": "Climax-embellishment type (the burst must settle back into clean stillness)", "styles": [ { "key": "confetti-crossfire", "label": "confetti-crossfire", "media": "./media/confetti-crossfire.mp4?v=1784437314696" }, { "key": "counter-tick-sparks", "label": "counter-tick-sparks", "media": "./media/counter-tick-sparks.mp4?v=1784437314697" } ], "preview": "https://r2.getshotpack.com/media/confetti-crossfire.mp4?v=1784437314696", "poster": null, "card": "https://getshotpack.com/demos/data/particle-celebrate-hits/prompt.md", "tsx": "https://getshotpack.com/demos/data/particle-celebrate-hits/demo.tsx", "tsxFiles": [ "./demos/data/particle-celebrate-hits/ConfettiCrossfire.tsx", "./demos/data/particle-celebrate-hits/CounterTickSparks.tsx" ], "prompt": "https://getshotpack.com/demos/data/particle-celebrate-hits/prompt.md", "unlock": null }, { "id": "particle-sand-fill", "tier": "free", "core": true, "category": "data", "subcategory": null, "tags": [ "data", "effects" ], "summary": "Particles rain into a funnel to build bars — the bar chart doesn't grow, it \"gets rained into existence\": square particles fall one by one and pile into bars; when full, they solidify into a solid bar and the value pops in", "duration": "4–5s", "energy": "Medium-high (construction-feel entrance)", "styles": [ { "key": "particle-sand-fill", "label": "particle-sand-fill", "media": "./media/particle-sand-fill.mp4?v=1784437314700" } ], "preview": "https://r2.getshotpack.com/media/particle-sand-fill.mp4?v=1784437314700", "poster": null, "card": "https://getshotpack.com/demos/data/particle-sand-fill/prompt.md", "tsx": "https://getshotpack.com/demos/data/particle-sand-fill/demo.tsx", "tsxFiles": [ "./demos/data/particle-sand-fill/ParticleSandFill.tsx" ], "prompt": "https://getshotpack.com/demos/data/particle-sand-fill/prompt.md", "unlock": null }, { "id": "phone-scroll-sync", "tier": "free", "core": true, "category": "mobile", "subcategory": "interaction", "tags": [ "mobile", "interaction" ], "summary": "Feed content inside the phone screen scrolls in sync with a finger swiping up (two swipes with a pause in between); the finger is a vector shape and floats slightly during the pause; finally the finger fades out and the whole device breathes to settle", "duration": "~6s (180f @ 30fps, including ≥30f of stillness after settling)", "energy": "Medium (segmented progression: the two scrolls each have their own start/stop, no impact peak)", "styles": [ { "key": "phone-scroll-sync", "label": "phone-scroll-sync", "media": "./media/phone-scroll-sync-1786356754258.mp4" } ], "preview": "https://r2.getshotpack.com/media/phone-scroll-sync-1786356754258.mp4", "poster": "https://r2.getshotpack.com/media/phone-scroll-sync-1786363295560.png", "card": "https://getshotpack.com/demos/mobile/phone-scroll-sync/prompt.md", "tsx": "https://getshotpack.com/demos/mobile/phone-scroll-sync/demo.tsx", "tsxFiles": [ "./demos/mobile/phone-scroll-sync/PhoneScrollSync.tsx" ], "prompt": "https://getshotpack.com/demos/mobile/phone-scroll-sync/prompt.md", "unlock": null }, { "id": "picker-carousel-feature-cycle", "tier": "free", "core": true, "category": "interaction", "subcategory": null, "tags": [ "interaction" ], "summary": "A mobile-style vertical picker — the focus pill stays put while content flows through it, each item snapping to a halt with pronounced outQuint deceleration then fully resting, opacity/font size/grayscale layered by distance from center, and the pill does a very light scaleY breath on landing", "duration": "~3.6s (108f@30fps)", "energy": "Medium (every snap is a beat, 5 beats advancing at an even pace)", "styles": [ { "key": "picker-carousel-feature-cycle", "label": "picker-carousel-feature-cycle", "media": "./media/picker-carousel-feature-cycle.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/picker-carousel-feature-cycle.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/interaction/picker-carousel-feature-cycle/prompt.md", "tsx": "https://getshotpack.com/demos/interaction/picker-carousel-feature-cycle/demo.tsx", "tsxFiles": [ "./demos/interaction/picker-carousel-feature-cycle/PickerCarouselFeatureCycle.tsx" ], "prompt": "https://getshotpack.com/demos/interaction/picker-carousel-feature-cycle/prompt.md", "unlock": null }, { "id": "pill-chip-slot-cycle-handled", "tier": "free", "core": true, "category": "typography", "subcategory": null, "tags": [ "typography" ], "summary": "In the white-background sentence \"Your `chip` Handled\", the word inside the dark capsule cycles on a vertical wheel; capsule width smoothly stretches by interpolating pre-measured text widths, the words on either side are naturally pushed apart and pulled back together, and 13%-opacity gray ghost items peek above and below the capsule", "duration": "~5.0s (150f@30fps: stillness → 3 switches (0.25/0.47/0.69) → tail stillness)", "energy": "Medium (three steady beats; the width stretch is the only continuous motion)", "styles": [ { "key": "pill-chip-slot-cycle-handled", "label": "pill-chip-slot-cycle-handled", "media": "./media/pill-chip-slot-cycle-handled.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/pill-chip-slot-cycle-handled.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/typography/pill-chip-slot-cycle-handled/prompt.md", "tsx": "https://getshotpack.com/demos/typography/pill-chip-slot-cycle-handled/demo.tsx", "tsxFiles": [ "./demos/typography/pill-chip-slot-cycle-handled/PillChipSlotCycleHandled.tsx" ], "prompt": "https://getshotpack.com/demos/typography/pill-chip-slot-cycle-handled/prompt.md", "unlock": null }, { "id": "pill-slot-cycle", "tier": "free", "core": true, "category": "typography", "subcategory": null, "tags": [ "typography" ], "summary": "In-sentence slot cycling — the fixed sentence stem stays pinned rock-still, the trailing pill badge rolls one slot-machine tick every ~0.7s (the old one flies up with accelerating fade-out, the new one slides in from below with blur), and after cycling through N feature words the complete sentence settles as the closer", "duration": "entrance 12f + 21f per tick × word count + closer 14f + hold; 6 words ≈ 5.8s (demo 175f)", "energy": "Medium (steady metronome, no peaks)", "styles": [ { "key": "pill-slot-cycle", "label": "pill-slot-cycle", "media": "./media/pill-slot-cycle.mp4?v=1784437314703" } ], "preview": "https://r2.getshotpack.com/media/pill-slot-cycle.mp4?v=1784437314703", "poster": null, "card": "https://getshotpack.com/demos/typography/pill-slot-cycle/prompt.md", "tsx": "https://getshotpack.com/demos/typography/pill-slot-cycle/demo.tsx", "tsxFiles": [ "./demos/typography/pill-slot-cycle/PillSlotCycle.tsx" ], "prompt": "https://getshotpack.com/demos/typography/pill-slot-cycle/prompt.md", "unlock": null }, { "id": "print-texture-transitions", "tier": "free", "core": true, "category": "transition", "subcategory": null, "tags": [ "transition" ], "summary": "Print-texture transitions — ink-bleed-reveal (ink bleeding through a wispy edge to eat away the old scene)", "duration": "4–4.5s (bleed segment 55–80f + stillness ending ≥30f)", "energy": "Medium (progressive manifestation, no impact beat)", "styles": [ { "key": "ink-bleed-reveal", "label": "ink-bleed-reveal 墨渗揭示", "media": "./media/ink-bleed-reveal.mp4?v=1784437314705" } ], "preview": "https://r2.getshotpack.com/media/ink-bleed-reveal.mp4?v=1784437314705", "poster": null, "card": "https://getshotpack.com/demos/transition/print-texture-transitions/prompt.md", "tsx": "https://getshotpack.com/demos/transition/print-texture-transitions/demo.tsx", "tsxFiles": [ "./demos/transition/print-texture-transitions/InkBleedReveal.tsx" ], "prompt": "https://getshotpack.com/demos/transition/print-texture-transitions/prompt.md", "unlock": null }, { "id": "product-card-progressive-assemble", "tier": "free", "core": true, "category": "ui-entrance", "subcategory": null, "tags": [ "ui-entrance" ], "summary": "A detail card assembles itself like fields being grabbed one by one — image→title→breadcrumb pills pop in sequence→original price appears then gets crossed-out and demoted, accent new price springs out→body text reveals line by line with a highlight block sweeping left to right→color swatches light up; the whole card pushes forward at a very slow scale the entire time", "duration": "~5.0s (150f@30fps)", "energy": "Medium (continuous small events densely packed, no single explosion; forward push keeps the momentum)", "styles": [ { "key": "product-card-progressive-assemble", "label": "product-card-progressive-assemble", "media": "./media/product-card-progressive-assemble.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/product-card-progressive-assemble.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/ui-entrance/product-card-progressive-assemble/prompt.md", "tsx": "https://getshotpack.com/demos/ui-entrance/product-card-progressive-assemble/demo.tsx", "tsxFiles": [ "./demos/ui-entrance/product-card-progressive-assemble/ProductCardProgressiveAssemble.tsx" ], "prompt": "https://getshotpack.com/demos/ui-entrance/product-card-progressive-assemble/prompt.md", "unlock": null }, { "id": "progress-ring-counter", "tier": "free", "core": true, "category": "mobile", "subcategory": "data", "tags": [ "mobile", "data" ], "summary": "A circular progress ring grows from 0 to full (arc + ring-head dot advancing), the center percentage counter rolls in sync 0→100%, and when done a checkmark springs out with a subtle ring pulse, while stat cards at the bottom stagger in", "duration": "~5.6s (168f @ 30fps, including ≥30f of stillness after settling)", "energy": "Medium-low (the arc's steady growth is a low-energy peak; the completion checkmark gives one small pulse)", "styles": [ { "key": "progress-ring-counter", "label": "progress-ring-counter", "media": "./media/progress-ring-counter.mp4?v=1786372190643" } ], "preview": "https://r2.getshotpack.com/media/progress-ring-counter.mp4?v=1786372190643", "poster": "https://r2.getshotpack.com/media/progress-ring-counter-1786372190643.png", "card": "https://getshotpack.com/demos/mobile/progress-ring-counter/prompt.md", "tsx": "https://getshotpack.com/demos/mobile/progress-ring-counter/demo.tsx", "tsxFiles": [ "./demos/mobile/progress-ring-counter/ProgressRingCounter.tsx" ], "prompt": "https://getshotpack.com/demos/mobile/progress-ring-counter/prompt.md", "unlock": null }, { "id": "pull-to-refresh", "tier": "free", "core": true, "category": "mobile", "subcategory": "interaction", "tags": [ "mobile", "interaction" ], "summary": "A finger pulls the feed down from the top: the list shifts down as a whole, the circular indicator at the top grows and rotates 0→180°; after dragging past the threshold and releasing, the indicator spins loading (360°×3), the list springs back and swaps in new content cards", "duration": "~7s (210f @ 30fps, including ≥30f of stillness after settling)", "energy": "Medium (pull charging → release loading spin → content refresh; the rhythm goes still, to active, then settles)", "styles": [ { "key": "pull-to-refresh", "label": "pull-to-refresh", "media": "./media/pull-to-refresh.mp4?v=1786372188510" } ], "preview": "https://r2.getshotpack.com/media/pull-to-refresh.mp4?v=1786372188510", "poster": "https://r2.getshotpack.com/media/pull-to-refresh-1786372188510.png", "card": "https://getshotpack.com/demos/mobile/pull-to-refresh/prompt.md", "tsx": "https://getshotpack.com/demos/mobile/pull-to-refresh/demo.tsx", "tsxFiles": [ "./demos/mobile/pull-to-refresh/PullToRefresh.tsx" ], "prompt": "https://getshotpack.com/demos/mobile/pull-to-refresh/prompt.md", "unlock": null }, { "id": "quad-split-parallel-scenes", "tier": "free", "core": true, "category": "rhythm", "subcategory": null, "tags": [ "rhythm" ], "summary": "The picture hard-cuts into a 2×2 quad split; four quadrants each run their own micro-scene in parallel (typing, whip push-in, word-by-word, interaction chain), key beats staggered 3–6 frames apart to create an information barrage", "duration": "~2.1s (63f@30fps, no transitions the whole way)", "energy": "High (four parallel tracks + staggered-beat impact, the standard BGM chorus slot)", "styles": [ { "key": "quad-split-parallel-scenes", "label": "quad-split-parallel-scenes", "media": "./media/quad-split-parallel-scenes.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/quad-split-parallel-scenes.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/rhythm/quad-split-parallel-scenes/prompt.md", "tsx": "https://getshotpack.com/demos/rhythm/quad-split-parallel-scenes/demo.tsx", "tsxFiles": [ "./demos/rhythm/quad-split-parallel-scenes/QuadSplitParallelScenes.tsx" ], "prompt": "https://getshotpack.com/demos/rhythm/quad-split-parallel-scenes/prompt.md", "unlock": null }, { "id": "radial-ripple-phone-chips", "tier": "free", "core": true, "category": "effects", "subcategory": null, "tags": [ "effects" ], "summary": "Four concentric circles on a light gray background breathe out of phase like water ripples, a phone mockup at center auto-scrolls its in-screen feed, and white chips on both sides pop in with spring and hover", "duration": "~5.6s (168f@30fps)", "energy": "low (quiet, breathing, kept from going cold by the concentric circles' sustained undulation)", "styles": [ { "key": "radial-ripple-phone-chips", "label": "radial-ripple-phone-chips", "media": "./media/radial-ripple-phone-chips.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/radial-ripple-phone-chips.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/effects/radial-ripple-phone-chips/prompt.md", "tsx": "https://getshotpack.com/demos/effects/radial-ripple-phone-chips/demo.tsx", "tsxFiles": [ "./demos/effects/radial-ripple-phone-chips/RadialRipplePhoneChips.tsx" ], "prompt": "https://getshotpack.com/demos/effects/radial-ripple-phone-chips/prompt.md", "unlock": null }, { "id": "radial-wave", "tier": "free", "core": true, "category": "ui-entrance", "subcategory": null, "tags": [ "ui-entrance" ], "summary": "A 17×9 dot grid lights up staggered by Euclidean distance from the wave source; each dot overshoots scale to 1.5 then settles to a constant on state; after the first wave sweeps, a second bright-blue pulse gathers back inward from the outer ring to the center", "duration": "~3.8s (114f@30fps)", "energy": "Medium-high (one burst at the start; after the wavefront passes it settles into a constant low-energy base)", "styles": [ { "key": "radial-wave", "label": "radial-wave", "media": "./media/radial-wave.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/radial-wave.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/ui-entrance/radial-wave/prompt.md", "tsx": "https://getshotpack.com/demos/ui-entrance/radial-wave/demo.tsx", "tsxFiles": [ "./demos/ui-entrance/radial-wave/RadialWave.tsx" ], "prompt": "https://getshotpack.com/demos/ui-entrance/radial-wave/prompt.md", "unlock": null }, { "id": "research-card-stack-scroll", "tier": "free", "core": true, "category": "ui-entrance", "subcategory": null, "tags": [ "ui-entrance" ], "summary": "Dark paper cards fly in along a bottom-right axis into the center, one every 12 frames, stacking with a 1-frame squash on landing; only the top card renders fully clear (title + authors + abstract), cards below increasingly blur and darken with stack depth, showing only their title bar; the horizontal grid background scrolls down in sync as a speed reference", "duration": "~4.8s (144f@30fps)", "energy": "Medium-high (uniform high frequency — no explosion but constant pressure)", "styles": [ { "key": "research-card-stack-scroll", "label": "research-card-stack-scroll", "media": "./media/research-card-stack-scroll.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/research-card-stack-scroll.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/ui-entrance/research-card-stack-scroll/prompt.md", "tsx": "https://getshotpack.com/demos/ui-entrance/research-card-stack-scroll/demo.tsx", "tsxFiles": [ "./demos/ui-entrance/research-card-stack-scroll/ResearchCardStackScroll.tsx" ], "prompt": "https://getshotpack.com/demos/ui-entrance/research-card-stack-scroll/prompt.md", "unlock": null }, { "id": "rhythm-interrupt-moves", "tier": "free", "core": true, "category": "rhythm", "subcategory": null, "tags": [ "rhythm" ], "summary": "Two rhythm-interrupting variants — jump-cut-punch-in three-step jump-cut push-in, strobe-black-frames strobe black frames", "duration": "B ~4.5s / C ~4.5s", "energy": "B Medium / C High", "styles": [ { "key": "jump-cut-punch-in", "label": "jump-cut-punch-in", "media": "./media/jump-cut-punch-in.mp4?v=1784437314707" }, { "key": "strobe-black-frames", "label": "strobe-black-frames", "media": "./media/strobe-black-frames.mp4?v=1784437314708" } ], "preview": "https://r2.getshotpack.com/media/jump-cut-punch-in.mp4?v=1784437314707", "poster": null, "card": "https://getshotpack.com/demos/rhythm/rhythm-interrupt-moves/prompt.md", "tsx": "https://getshotpack.com/demos/rhythm/rhythm-interrupt-moves/demo.tsx", "tsxFiles": [ "./demos/rhythm/rhythm-interrupt-moves/JumpCutPunchIn.tsx", "./demos/rhythm/rhythm-interrupt-moves/StrobeBlackFrames.tsx" ], "prompt": "https://getshotpack.com/demos/rhythm/rhythm-interrupt-moves/prompt.md", "unlock": null }, { "id": "riso-print-hits", "tier": "free", "core": true, "category": "effects", "subcategory": null, "tags": [ "effects", "typography", "rhythm" ], "summary": "Misregistration hits, two variants — riso-misregistration-hit single impact frame (impact-stop splits a two-color print, jitters twice, registers) and riso-beat-pump beat pump (jumps big per beat + escalating misregistration per beat)", "duration": "A 4s (single); B 4.7s (four beats)", "energy": "high", "styles": [ { "key": "misregistration-hit", "label": "misregistration-hit 单发", "media": "./media/misregistration-hit.mp4?v=1784437314711" }, { "key": "beat-pump", "label": "beat-pump 节拍泵", "media": "./media/beat-pump.mp4?v=1784437314712" } ], "preview": "https://r2.getshotpack.com/media/misregistration-hit.mp4?v=1784437314711", "poster": null, "card": "https://getshotpack.com/demos/effects/riso-print-hits/prompt.md", "tsx": "https://getshotpack.com/demos/effects/riso-print-hits/demo.tsx", "tsxFiles": [ "./demos/effects/riso-print-hits/RisoBeatPump.tsx", "./demos/effects/riso-print-hits/RisoMisregistrationHit.tsx" ], "prompt": "https://getshotpack.com/demos/effects/riso-print-hits/prompt.md", "unlock": null }, { "id": "row-embed", "tier": "free", "core": true, "category": "ui-entrance", "subcategory": null, "tags": [ "ui-entrance" ], "summary": "Content rows descend from the air like cards, level out via rotateX, and the instant they embed, a thin accent-colored seam lights along their bottom edge", "duration": "~2s (12–68f)", "energy": "Medium", "styles": [ { "key": "row-embed", "label": "row-embed", "media": "./media/row-embed.mp4?v=1784437314715" } ], "preview": "https://r2.getshotpack.com/media/row-embed.mp4?v=1784437314715", "poster": null, "card": "https://getshotpack.com/demos/ui-entrance/row-embed/prompt.md", "tsx": null, "tsxFiles": [], "prompt": "https://getshotpack.com/demos/ui-entrance/row-embed/prompt.md", "unlock": null }, { "id": "runway-ground-skim", "tier": "free", "core": true, "category": "ui-entrance", "subcategory": null, "tags": [ "ui-entrance", "camera" ], "summary": "Under a low-angle ground-skimming camera, a group of UI cards sticks down from the air in a quick rain-like burst (starts offset slightly, descents overlap heavily in parallel, stop the instant they land with zero bounce); once landed, the page stands up and the viewpoint turns head-on to close", "duration": "hover display ~0.4s + sticking ~1.2s + stand-up turn ~1.8s; whole piece 4s", "energy": "High (the falling feel is the centerpiece, the stand-up turn is the closure)", "styles": [ { "key": "runway-ground-skim", "label": "runway-ground-skim", "media": "./media/runway-ground-skim.mp4?v=1784437314719" } ], "preview": "https://r2.getshotpack.com/media/runway-ground-skim.mp4?v=1784437314719", "poster": null, "card": "https://getshotpack.com/demos/ui-entrance/runway-ground-skim/prompt.md", "tsx": "https://getshotpack.com/demos/ui-entrance/runway-ground-skim/demo.tsx", "tsxFiles": [ "./demos/ui-entrance/runway-ground-skim/RunwayGroundSkim.tsx" ], "prompt": "https://getshotpack.com/demos/ui-entrance/runway-ground-skim/prompt.md", "unlock": null }, { "id": "sakuga-timing-shift", "tier": "free", "core": true, "category": "rhythm", "subcategory": null, "tags": [ "rhythm", "ui-entrance" ], "summary": "Shooting on 3s becomes shooting on 1s — the element first moves with hand-flip-book staccato in 3-frame steps, at the climax moment it cuts to frame-by-frame silky sprint; the frame-rate quantization shift itself is the spectacle", "duration": "~5s", "energy": "Medium-high", "styles": [ { "key": "sakuga-timing-shift", "label": "sakuga-timing-shift", "media": "./media/sakuga-timing-shift.mp4?v=1784437314722" } ], "preview": "https://r2.getshotpack.com/media/sakuga-timing-shift.mp4?v=1784437314722", "poster": null, "card": "https://getshotpack.com/demos/rhythm/sakuga-timing-shift/prompt.md", "tsx": "https://getshotpack.com/demos/rhythm/sakuga-timing-shift/demo.tsx", "tsxFiles": [ "./demos/rhythm/sakuga-timing-shift/SakugaTimingShift.tsx" ], "prompt": "https://getshotpack.com/demos/rhythm/sakuga-timing-shift/prompt.md", "unlock": null }, { "id": "scan-bracket-sweep", "tier": "free", "core": true, "category": "effects", "subcategory": null, "tags": [ "effects" ], "summary": "A skeleton document pops to center, L-shaped viewfinder brackets drop at the four corners, and a 2.5px solid line with a gradient tail sweeps back and forth across the document 5 passes — the document stays still throughout; only light reads it", "duration": "~5.0s (150f@30fps)", "energy": "medium-low (mechanical, restrained; the rhythm lives in the reciprocating sweep's breathing)", "styles": [ { "key": "scan-bracket-sweep", "label": "scan-bracket-sweep", "media": "./media/scan-bracket-sweep.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/scan-bracket-sweep.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/effects/scan-bracket-sweep/prompt.md", "tsx": "https://getshotpack.com/demos/effects/scan-bracket-sweep/demo.tsx", "tsxFiles": [ "./demos/effects/scan-bracket-sweep/ScanBracketSweep.tsx" ], "prompt": "https://getshotpack.com/demos/effects/scan-bracket-sweep/prompt.md", "unlock": null }, { "id": "scanline-annotate-focus", "tier": "free", "core": true, "category": "effects", "subcategory": null, "tags": [ "effects" ], "summary": "A bright scanline sweeps top-to-bottom across the page; wherever it passes, a camera viewfinder pops in sequence (1.75× converging + slight overshoot), then a monospace small annotation fires beside it, and the top status line counts in sync 00/06→06/06", "duration": "~4.6s (138f@30fps)", "energy": "medium (mechanical and calm; rhythm driven by the constant-velocity scanline, annotations as beat points)", "styles": [ { "key": "scanline-annotate-focus", "label": "scanline-annotate-focus", "media": "./media/scanline-annotate-focus.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/scanline-annotate-focus.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/effects/scanline-annotate-focus/prompt.md", "tsx": "https://getshotpack.com/demos/effects/scanline-annotate-focus/demo.tsx", "tsxFiles": [ "./demos/effects/scanline-annotate-focus/ScanlineAnnotateFocus.tsx" ], "prompt": "https://getshotpack.com/demos/effects/scanline-annotate-focus/prompt.md", "unlock": null }, { "id": "scanline-assemble-flyin", "tier": "free", "core": true, "category": "effects", "subcategory": null, "tags": [ "effects" ], "summary": "A page opens on an empty dark grid; a bright scanline sweeps top-to-bottom; wherever it reaches a block's landing point, that component flies in from off-screen and locks in, with motion blur and a landing edge flash — the page is exactly assembled the moment the scan completes", "duration": "~4.6s (138f@30fps)", "energy": "medium-high (the scanline is steady, but each component fly-in is a burst point, density escalating)", "styles": [ { "key": "scanline-assemble-flyin", "label": "scanline-assemble-flyin", "media": "./media/scanline-assemble-flyin.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/scanline-assemble-flyin.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/effects/scanline-assemble-flyin/prompt.md", "tsx": "https://getshotpack.com/demos/effects/scanline-assemble-flyin/demo.tsx", "tsxFiles": [ "./demos/effects/scanline-assemble-flyin/ScanlineAssembleFlyin.tsx" ], "prompt": "https://getshotpack.com/demos/effects/scanline-assemble-flyin/prompt.md", "unlock": null }, { "id": "scramble", "tier": "free", "core": true, "category": "typography", "subcategory": null, "tags": [ "typography" ], "summary": "A monospace whole line of characters first scrambles rapidly every 2 frames, then locks into the real characters one by one left-to-right; each lock frame flashes a blue-white highlight — a seed-driven reproducible decryption feel", "duration": "~3.2s (96f@30fps)", "energy": "Medium-high (continuous high-frequency character noise, no single impact point)", "styles": [ { "key": "scramble", "label": "scramble", "media": "./media/scramble.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/scramble.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/typography/scramble/prompt.md", "tsx": "https://getshotpack.com/demos/typography/scramble/demo.tsx", "tsxFiles": [ "./demos/typography/scramble/Scramble.tsx" ], "prompt": "https://getshotpack.com/demos/typography/scramble/prompt.md", "unlock": null }, { "id": "scroll-brake-moves", "tier": "free", "core": true, "category": "data", "subcategory": null, "tags": [ "data", "rhythm" ], "summary": "Two long-scroll hard-brake variants — changelog-scroll-brake (the basic version: a high-speed long scroll decelerates exponentially to an exact stop + the target row lifts) and brake-reticle-lock (the combo version: reticles bite onto the stop point on the exact same frame as the brake)", "duration": "A 4–5s / B 5s", "energy": "Opens high, lands medium (speed-contrast type)", "styles": [ { "key": "changelog-scroll-brake", "label": "changelog-scroll-brake", "media": "./media/changelog-scroll-brake.mp4?v=1784437314727" }, { "key": "brake-reticle-lock", "label": "brake-reticle-lock", "media": "./media/brake-reticle-lock.mp4?v=1784437314729" } ], "preview": "https://r2.getshotpack.com/media/changelog-scroll-brake.mp4?v=1784437314727", "poster": null, "card": "https://getshotpack.com/demos/data/scroll-brake-moves/prompt.md", "tsx": "https://getshotpack.com/demos/data/scroll-brake-moves/demo.tsx", "tsxFiles": [ "./demos/data/scroll-brake-moves/BrakeReticleLock.tsx", "./demos/data/scroll-brake-moves/ChangelogScrollBrake.tsx" ], "prompt": "https://getshotpack.com/demos/data/scroll-brake-moves/prompt.md", "unlock": null }, { "id": "segmented-thumb-hero", "tier": "free", "core": true, "category": "interaction", "subcategory": null, "tags": [ "interaction" ], "summary": "A segmented control's thumb displacement takes the hero close-up — an oversized capsule segmented control springs in, an outlined-arrow cursor slides in from off-frame and presses, the white thumb slides to the other segment in 8f ease-out, and at the moment it lands a new icon springs out while the old icon retracts", "duration": "~3.5s (demo 110f: float-in 18f + cursor 24f + click + 8f slide + icon pop + hold)", "energy": "Medium (micro-interaction close-up, refined rather than explosive)", "styles": [ { "key": "segmented-thumb-hero", "label": "segmented-thumb-hero", "media": "./media/segmented-thumb-hero.mp4?v=1784437314731" } ], "preview": "https://r2.getshotpack.com/media/segmented-thumb-hero.mp4?v=1784437314731", "poster": null, "card": "https://getshotpack.com/demos/interaction/segmented-thumb-hero/prompt.md", "tsx": "https://getshotpack.com/demos/interaction/segmented-thumb-hero/demo.tsx", "tsxFiles": [ "./demos/interaction/segmented-thumb-hero/SegmentedThumbHero.tsx" ], "prompt": "https://getshotpack.com/demos/interaction/segmented-thumb-hero/prompt.md", "unlock": null }, { "id": "settings-toggle-flow", "tier": "free", "core": true, "category": "mobile", "subcategory": "screen", "tags": [ "mobile", "screen" ], "summary": "A phone settings page toggle flow: multiple switches flip on in a stagger (thumb springs with overshoot + track color transition), a slider drags its progress, and a \"Settings saved\" toast slides up, lingers, and fades out", "duration": "~7.4s (222f @ 30fps, including ≥30f of stillness after settling)", "energy": "Medium (each switch flips in a stagger)", "styles": [ { "key": "settings-toggle-flow", "label": "settings-toggle-flow", "media": "./media/settings-toggle-flow-1786356754258.mp4" } ], "preview": "https://r2.getshotpack.com/media/settings-toggle-flow-1786356754258.mp4", "poster": "https://r2.getshotpack.com/media/settings-toggle-flow-1786363295560.png", "card": "https://getshotpack.com/demos/mobile/settings-toggle-flow/prompt.md", "tsx": "https://getshotpack.com/demos/mobile/settings-toggle-flow/demo.tsx", "tsxFiles": [ "./demos/mobile/settings-toggle-flow/SettingsToggleFlow.tsx" ], "prompt": "https://getshotpack.com/demos/mobile/settings-toggle-flow/prompt.md", "unlock": null }, { "id": "shot-transitions", "tier": "free", "core": true, "category": "transition", "subcategory": null, "tags": [ "transition" ], "summary": "Camera handoff, six variants — push-to-whiteout flash-cut, straight cruise through dark, focus relay, black-frame text card, whip-pan, and mask-wipe through a window (incl. a depth variant), selected by energy drop", "duration": "n/a (technique card; frames per variant are in the parameter table, drawn from the adjacent shots' budgets)", "energy": "n/a (technique card, doesn't occupy an energy slot)", "styles": [ { "key": "flash-cut", "label": "推进流白 flash-cut", "media": "./media/flash-cut.mp4?v=1784437314733" }, { "key": "shot-transitions-4", "label": "穿暗场直航", "media": "./media/shot-transitions-4.mp4?v=1784437314735" }, { "key": "shot-transitions-5", "label": "虚焦接力", "media": "./media/shot-transitions-5.mp4?v=1784437314737" }, { "key": "shot-transitions-6", "label": "黑场字卡", "media": "./media/shot-transitions-6.mp4?v=1784437314739" }, { "key": "whip-pan", "label": "whip-pan 甩镜", "media": "./media/whip-pan.mp4?v=1784437314741" }, { "key": "mask-wipe", "label": "mask-wipe 穿窗", "media": "./media/mask-wipe.mp4?v=1784437314742" } ], "preview": "https://r2.getshotpack.com/media/flash-cut.mp4?v=1784437314733", "poster": null, "card": "https://getshotpack.com/demos/transition/shot-transitions/prompt.md", "tsx": "https://getshotpack.com/demos/transition/shot-transitions/demo.tsx", "tsxFiles": [ "./demos/transition/shot-transitions/MaskWipeReal.tsx", "./demos/transition/shot-transitions/PortalWipeV2.tsx", "./demos/transition/shot-transitions/WhipBrakeReal.tsx", "./demos/transition/shot-transitions/WhipPanReal.tsx" ], "prompt": "https://getshotpack.com/demos/transition/shot-transitions/prompt.md", "unlock": null }, { "id": "skeleton-reveal", "tier": "free", "core": true, "category": "ui-entrance", "subcategory": null, "tags": [ "ui-entrance" ], "summary": "A three-tier fidelity reveal — draft → skeleton → content: hand-drawn doodle placeholders (boiling jitter) are replaced in one beat by gray-bar skeleton windows; after the skeleton list rolls in, the lens pushes closer and the gray bars develop row by row into avatars + word-by-word text, with the last word landing half a beat late", "duration": "~5.7s (172f: doodle 1s + swap-to-real 0.3s + skeleton roll-in 1.2s + push-in develop 3s)", "energy": "Medium (narrative entrance; the point is the two \"becomes real\" transitions)", "styles": [ { "key": "skeleton-reveal", "label": "skeleton-reveal", "media": "./media/skeleton-reveal.mp4?v=1784437314746" } ], "preview": "https://r2.getshotpack.com/media/skeleton-reveal.mp4?v=1784437314746", "poster": null, "card": "https://getshotpack.com/demos/ui-entrance/skeleton-reveal/prompt.md", "tsx": "https://getshotpack.com/demos/ui-entrance/skeleton-reveal/demo.tsx", "tsxFiles": [ "./demos/ui-entrance/skeleton-reveal/SkeletonReveal.tsx" ], "prompt": "https://getshotpack.com/demos/ui-entrance/skeleton-reveal/prompt.md", "unlock": null }, { "id": "slam-entrance-moves", "tier": "free", "core": true, "category": "effects", "subcategory": null, "tags": [ "effects", "ui-entrance" ], "summary": "High-energy slam entrances, three variants — kanada-perspective-snap Kanada-perspective hard stop, score-slam score slam-down, impact-burst-kit landing impact kit (ripples to neighbor cards)", "duration": "single-variant action segment 6–22f + impact aftershock ~16f + hold ≥45f", "energy": "high", "styles": [ { "key": "kanada-perspective-snap", "label": "kanada-perspective-snap", "media": "./media/kanada-perspective-snap.mp4?v=1784437314749" }, { "key": "score-slam", "label": "score-slam", "media": "./media/score-slam.mp4?v=1784437314751" }, { "key": "impact-burst-kit", "label": "impact-burst-kit", "media": "./media/impact-burst-kit.mp4?v=1784437314753" } ], "preview": "https://r2.getshotpack.com/media/kanada-perspective-snap.mp4?v=1784437314749", "poster": null, "card": "https://getshotpack.com/demos/effects/slam-entrance-moves/prompt.md", "tsx": "https://getshotpack.com/demos/effects/slam-entrance-moves/demo.tsx", "tsxFiles": [ "./demos/effects/slam-entrance-moves/ImpactBurstKit.tsx", "./demos/effects/slam-entrance-moves/KanadaPerspectiveSnap.tsx", "./demos/effects/slam-entrance-moves/ScoreSlam.tsx" ], "prompt": "https://getshotpack.com/demos/effects/slam-entrance-moves/prompt.md", "unlock": null }, { "id": "smear-multiples", "tier": "free", "core": true, "category": "rhythm", "subcategory": null, "tags": [ "rhythm", "effects" ], "summary": "Afterimage doppelgangers — while a card moves fast horizontally it drags 4 clearly countable semi-transparent duplicate copies, which collapse and merge at the landing moment; an animation-style alternative to motion blur", "duration": "Element-level technique (move 12f + merge bounce-back 8f, parasitic on the displacement move)", "energy": "Medium-high", "styles": [ { "key": "smear-multiples", "label": "smear-multiples", "media": "./media/smear-multiples.mp4?v=1784437314756" } ], "preview": "https://r2.getshotpack.com/media/smear-multiples.mp4?v=1784437314756", "poster": null, "card": "https://getshotpack.com/demos/rhythm/smear-multiples/prompt.md", "tsx": "https://getshotpack.com/demos/rhythm/smear-multiples/demo.tsx", "tsxFiles": [ "./demos/rhythm/smear-multiples/SmearMultiples.tsx" ], "prompt": "https://getshotpack.com/demos/rhythm/smear-multiples/prompt.md", "unlock": null }, { "id": "space-camera-moves", "tier": "free", "core": true, "category": "camera", "subcategory": null, "tags": [ "camera" ], "summary": "Two 3D-spatial camera moves — exploded-view (components blow apart along Z then reassemble) and drone-dive-landing (drone plunge landing)", "duration": "A 5s (explode-hover-reassemble entire run); C 3–5s one-way plunge", "energy": "High", "styles": [ { "key": "exploded-view", "label": "exploded-view", "media": "./media/exploded-view.mp4?v=1784437314760" }, { "key": "drone-dive-landing", "label": "drone-dive-landing", "media": "./media/drone-dive-landing.mp4?v=1784437314765" } ], "preview": "https://r2.getshotpack.com/media/exploded-view.mp4?v=1784437314760", "poster": null, "card": "https://getshotpack.com/demos/camera/space-camera-moves/prompt.md", "tsx": "https://getshotpack.com/demos/camera/space-camera-moves/demo.tsx", "tsxFiles": [ "./demos/camera/space-camera-moves/DroneDiveLanding.tsx", "./demos/camera/space-camera-moves/ExplodedView.tsx" ], "prompt": "https://getshotpack.com/demos/camera/space-camera-moves/prompt.md", "unlock": null }, { "id": "spectrum-morph-ui", "tier": "free", "core": true, "category": "rhythm", "subcategory": null, "tags": [ "rhythm", "typography" ], "summary": "Spectrum-ized UI — the title's underline splits into a row of vertical bars dancing to the spectrum for two bars, then converges back into a straight line; music visualization growing on the UI", "duration": "~4.7s (split 8f + dancing 64f + converge 12f + static 39f)", "energy": "Medium", "styles": [ { "key": "spectrum-morph-ui", "label": "spectrum-morph-ui", "media": "./media/spectrum-morph-ui.mp4?v=1784437314767" } ], "preview": "https://r2.getshotpack.com/media/spectrum-morph-ui.mp4?v=1784437314767", "poster": null, "card": "https://getshotpack.com/demos/rhythm/spectrum-morph-ui/prompt.md", "tsx": "https://getshotpack.com/demos/rhythm/spectrum-morph-ui/demo.tsx", "tsxFiles": [ "./demos/rhythm/spectrum-morph-ui/SpectrumMorphUi.tsx" ], "prompt": "https://getshotpack.com/demos/rhythm/spectrum-morph-ui/prompt.md", "unlock": null }, { "id": "speed-ramp-freeze", "tier": "free", "core": true, "category": "rhythm", "subcategory": null, "tags": [ "rhythm" ], "summary": "Two rhythm techniques built on nonlinear frame-number remap — speed-ramp (fast → 0.2x gaze → fast) and freeze-annotate (flowing → freeze with circle annotation → thaw)", "duration": "Speed-ramp total 4–5s (slow window ≥40f); freeze-annotate total 4–5s (freeze segment ≥45f)", "energy": "Medium-high (the speed contrast itself is the energy beat)", "styles": [ { "key": "speed-ramp", "label": "speed-ramp", "media": "./media/speed-ramp.mp4?v=1784437314770" }, { "key": "freeze-annotate", "label": "freeze-annotate", "media": "./media/freeze-annotate.mp4?v=1784437314772" } ], "preview": "https://r2.getshotpack.com/media/speed-ramp.mp4?v=1784437314770", "poster": null, "card": "https://getshotpack.com/demos/rhythm/speed-ramp-freeze/prompt.md", "tsx": "https://getshotpack.com/demos/rhythm/speed-ramp-freeze/demo.tsx", "tsxFiles": [ "./demos/rhythm/speed-ramp-freeze/FreezeAnnotateReal.tsx", "./demos/rhythm/speed-ramp-freeze/SpeedRampReal.tsx" ], "prompt": "https://getshotpack.com/demos/rhythm/speed-ramp-freeze/prompt.md", "unlock": null }, { "id": "split-flap-title", "tier": "free", "core": true, "category": "typography", "subcategory": null, "tags": [ "typography", "opening" ], "summary": "Airport split-flap display title — each character is a mechanical flip cell split into top/bottom halves, flipping through 2 scrambled characters with a click to land on the target, cascading left-to-right as a wave", "duration": "~4.7s (140f: ≥20f scrambled stillness to establish + cascading flips + ≥15f settled stillness)", "energy": "Medium (sustained mechanical motion, not an instantaneous impact)", "styles": [ { "key": "split-flap-title", "label": "split-flap-title", "media": "./media/split-flap-title.mp4?v=1784437314774" } ], "preview": "https://r2.getshotpack.com/media/split-flap-title.mp4?v=1784437314774", "poster": null, "card": "https://getshotpack.com/demos/typography/split-flap-title/prompt.md", "tsx": "https://getshotpack.com/demos/typography/split-flap-title/demo.tsx", "tsxFiles": [ "./demos/typography/split-flap-title/SplitFlapFlip.tsx" ], "prompt": "https://getshotpack.com/demos/typography/split-flap-title/prompt.md", "unlock": null }, { "id": "spotlight-hero-card", "tier": "free", "core": true, "category": "opening", "subcategory": null, "tags": [ "opening", "effects", "camera" ], "summary": "A spotlight sweeps the page and locks onto one card; after a 45° oblique push-in the card springs up to float, a beam traces its outline twice, then it seats back into place", "duration": "~4.6s (82–220f)", "energy": "Medium (the highest-texture shot; slow and steady rhythm)", "styles": [ { "key": "spotlight-hero-card", "label": "spotlight-hero-card", "media": "./media/spotlight-hero-card.mp4?v=1785050510059" } ], "preview": "https://r2.getshotpack.com/media/spotlight-hero-card.mp4?v=1785050510059", "poster": null, "card": "https://getshotpack.com/demos/opening/spotlight-hero-card/prompt.md", "tsx": null, "tsxFiles": [], "prompt": "https://getshotpack.com/demos/opening/spotlight-hero-card/prompt.md", "unlock": null }, { "id": "spotlight-sweep-moves", "tier": "free", "core": true, "category": "effects", "subcategory": null, "tags": [ "effects", "ui-entrance", "transition" ], "summary": "Dark-field spotlight development, three variants — A wake-sleep sweep (bright where the light is, dark when it leaves), B edge-hugging glow pan (purple light seeps along UI edges + constant-velocity spotlight drifts right), C corner constant-velocity development (radial spotlight expands at constant velocity from a corner, lighting the full screen); \"light is narrative\" UI showcase in black", "duration": "single variant 3.5–4.5s; A/B can chain into a tour segment", "energy": "medium-low (restrained, mysterious; the burst point is the \"lighting up\" instant)", "styles": [ { "key": "glow-wake-sleep-panel", "label": "glow-wake-sleep-panel", "media": "./media/glow-wake-sleep-panel.mp4?v=1784785066792" }, { "key": "slide-spotlight-pan", "label": "slide-spotlight-pan", "media": "./media/slide-spotlight-pan.mp4?v=1785050512851" }, { "key": "corner-spotlight-reveal", "label": "corner-spotlight-reveal", "media": "./media/corner-spotlight-reveal.mp4?v=1784784591965" } ], "preview": "https://r2.getshotpack.com/media/glow-wake-sleep-panel.mp4?v=1784785066792", "poster": null, "card": "https://getshotpack.com/demos/effects/spotlight-sweep-moves/prompt.md", "tsx": "https://getshotpack.com/demos/effects/spotlight-sweep-moves/demo.tsx", "tsxFiles": [ "./demos/effects/spotlight-sweep-moves/CornerSpotlightReveal.tsx", "./demos/effects/spotlight-sweep-moves/GlowWakeSleepPanel.tsx", "./demos/effects/spotlight-sweep-moves/SlideSpotlightPan.tsx" ], "prompt": "https://getshotpack.com/demos/effects/spotlight-sweep-moves/prompt.md", "unlock": null }, { "id": "steep-tilt-glide", "tier": "free", "core": true, "category": "camera", "subcategory": null, "tags": [ "camera", "ui-entrance" ], "summary": "Under a fixed camera, an upright page stands at a steep 60° perspective (right edge near, left edge far), and the page itself slides along its own 3D lateral plane past the lens (object moves, camera doesn't); the slide carries velocity ghosting, floating text/components stick down, and the scene opens from dark into light", "duration": "4s (120f) single shot; wider pages can run longer", "energy": "Medium-high (perspective spectacle + continuous motion, but an even rhythm)", "styles": [ { "key": "steep-tilt-glide", "label": "steep-tilt-glide", "media": "./media/steep-tilt-glide.mp4?v=1784437314787" } ], "preview": "https://r2.getshotpack.com/media/steep-tilt-glide.mp4?v=1784437314787", "poster": null, "card": "https://getshotpack.com/demos/camera/steep-tilt-glide/prompt.md", "tsx": "https://getshotpack.com/demos/camera/steep-tilt-glide/demo.tsx", "tsxFiles": [ "./demos/camera/steep-tilt-glide/SteepTiltGlide.tsx" ], "prompt": "https://getshotpack.com/demos/camera/steep-tilt-glide/prompt.md", "unlock": null }, { "id": "stroke-segment-build", "tier": "free", "core": true, "category": "opening", "subcategory": null, "tags": [ "opening", "typography" ], "summary": "Broken strokes make the word — the title splits into a dozen disconnected stroke segments lit up in random order; the first 70% is unreadable, then the moment the last segments land the meaning \"snaps\" into place", "duration": "4–5s", "energy": "Low start, mid peak (suspense type; the landing frame is the energy point)", "styles": [ { "key": "stroke-segment-build", "label": "stroke-segment-build", "media": "./media/stroke-segment-build.mp4?v=1784437314790" } ], "preview": "https://r2.getshotpack.com/media/stroke-segment-build.mp4?v=1784437314790", "poster": null, "card": "https://getshotpack.com/demos/opening/stroke-segment-build/prompt.md", "tsx": "https://getshotpack.com/demos/opening/stroke-segment-build/demo.tsx", "tsxFiles": [ "./demos/opening/stroke-segment-build/StrokeSegmentBuild.tsx" ], "prompt": "https://getshotpack.com/demos/opening/stroke-segment-build/prompt.md", "unlock": null }, { "id": "svg-shape-morph", "tier": "free", "core": true, "category": "ui-entrance", "subcategory": null, "tags": [ "ui-entrance" ], "summary": "One 140-point closed outline smoothly morphs into another shape and back; the two shapes are first resampled in polar coordinates to the same point count, per-point radius interpolation with inOutCubic; mid-morph layers a slight scale breathing, slow self-rotation, and hue drifting from 185° to 305°", "duration": "~5.2s (156f@30fps)", "energy": "Low (continuous flow with no explosion — good as narration base or breathing beat)", "styles": [ { "key": "svg-shape-morph", "label": "svg-shape-morph", "media": "./media/svg-shape-morph.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/svg-shape-morph.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/ui-entrance/svg-shape-morph/prompt.md", "tsx": "https://getshotpack.com/demos/ui-entrance/svg-shape-morph/demo.tsx", "tsxFiles": [ "./demos/ui-entrance/svg-shape-morph/SvgShapeMorph.tsx" ], "prompt": "https://getshotpack.com/demos/ui-entrance/svg-shape-morph/prompt.md", "unlock": null }, { "id": "tap-ripple-zoom", "tier": "free", "core": true, "category": "mobile", "subcategory": "interaction", "tags": [ "mobile", "interaction" ], "summary": "In a phone chat UI, a touch point taps an AI bubble, a two-ring water ripple spreads, the bubble scales down under the press, and the whole device focus-zooms into the bubble (spring damping 15 / stiffness 80 / mass 1, scale 1→2.75); after settling, the whole device breathes", "duration": "~5s (150f @ 30fps, including ≥30f of stillness after settling)", "energy": "Medium-low (a small peak at the tap moment, then the zoom settles slowly)", "styles": [ { "key": "tap-ripple-zoom", "label": "tap-ripple-zoom", "media": "./media/tap-ripple-zoom-1786356754258.mp4" } ], "preview": "https://r2.getshotpack.com/media/tap-ripple-zoom-1786356754258.mp4", "poster": "https://r2.getshotpack.com/media/tap-ripple-zoom-1786363295560.png", "card": "https://getshotpack.com/demos/mobile/tap-ripple-zoom/prompt.md", "tsx": "https://getshotpack.com/demos/mobile/tap-ripple-zoom/demo.tsx", "tsxFiles": [ "./demos/mobile/tap-ripple-zoom/TapRippleZoom.tsx" ], "prompt": "https://getshotpack.com/demos/mobile/tap-ripple-zoom/prompt.md", "unlock": null }, { "id": "tear-streak-transitions", "tier": "free", "core": true, "category": "transition", "subcategory": null, "tags": [ "transition", "effects" ], "summary": "Tear transition — glitch-displace noise tear (hard cut inside 16 horizontal strips misaligning and shaking), strip-level tearing with a digital-glitch meaning", "duration": "Prior state ≥40f + tear 17–24f + ending ≥40f, ~4.5s (135–140f)", "energy": "High", "styles": [ { "key": "glitch-displace", "label": "glitch-displace", "media": "./media/glitch-displace.mp4?v=1784437314792" } ], "preview": "https://r2.getshotpack.com/media/glitch-displace.mp4?v=1784437314792", "poster": null, "card": "https://getshotpack.com/demos/transition/tear-streak-transitions/prompt.md", "tsx": "https://getshotpack.com/demos/transition/tear-streak-transitions/demo.tsx", "tsxFiles": [ "./demos/transition/tear-streak-transitions/GlitchDisplace.tsx" ], "prompt": "https://getshotpack.com/demos/transition/tear-streak-transitions/prompt.md", "unlock": null }, { "id": "tension-camera-moves", "tier": "free", "core": true, "category": "camera", "subcategory": null, "tags": [ "camera" ], "summary": "Four emotional camera moves — bullet-time freeze orbit, dutch-roll righting, slow-push pressure, pull-back isolation; the camera makes viewers \"feel\" instead of \"watch\"", "duration": "4–5s per variant; ≤2 variants total per video (≤1 use each)", "energy": "A High / B Medium / C Low, building / D Low, closing", "styles": [ { "key": "bullet-time-freeze-orbit", "label": "bullet-time-freeze-orbit 冻结环绕", "media": "./media/bullet-time-freeze-orbit.mp4?v=1784437314794" }, { "key": "dutch-roll-to-level", "label": "dutch-roll-to-level 斜角滚正", "media": "./media/dutch-roll-to-level.mp4?v=1784437314796" }, { "key": "slow-push-in", "label": "slow-push-in 慢推压迫", "media": "./media/slow-push-in.mp4?v=1784437314801" }, { "key": "pull-back-isolation", "label": "pull-back-isolation 拉远孤立", "media": "./media/pull-back-isolation.mp4?v=1784437314803" } ], "preview": "https://r2.getshotpack.com/media/bullet-time-freeze-orbit.mp4?v=1784437314794", "poster": null, "card": "https://getshotpack.com/demos/camera/tension-camera-moves/prompt.md", "tsx": "https://getshotpack.com/demos/camera/tension-camera-moves/demo.tsx", "tsxFiles": [ "./demos/camera/tension-camera-moves/BulletTimeFreezeOrbit.tsx", "./demos/camera/tension-camera-moves/DutchRollToLevel.tsx", "./demos/camera/tension-camera-moves/PullBackIsolation.tsx", "./demos/camera/tension-camera-moves/SlowPushIn.tsx" ], "prompt": "https://getshotpack.com/demos/camera/tension-camera-moves/prompt.md", "unlock": null }, { "id": "terminal-3d", "tier": "free", "core": true, "category": "camera", "subcategory": null, "tags": [ "camera" ], "summary": "Three terminal windows scattered through 3D space; the camera flies between windows with a sinusoidal pull-back mid-flight, and at each window a typewriter taps out a command while results slide out line by line — a spatial narrative flow of command execution", "duration": "~6.0s (180f @ 30fps; three stops of ~1.6s hold + 0.85s flight each)", "energy": "Medium (flight provides dynamism, typing provides rhythm; overall a steady technical narrative)", "styles": [ { "key": "terminal-3d", "label": "terminal-3d", "media": "./media/terminal-3d.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/terminal-3d.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/camera/terminal-3d/prompt.md", "tsx": "https://getshotpack.com/demos/camera/terminal-3d/demo.tsx", "tsxFiles": [ "./demos/camera/terminal-3d/Terminal3D.tsx" ], "prompt": "https://getshotpack.com/demos/camera/terminal-3d/prompt.md", "unlock": null }, { "id": "text-as-mask", "tier": "free", "core": true, "category": "opening", "subcategory": null, "tags": [ "opening", "typography" ], "summary": "Text-as-mask video — a slow-moving product shot shows through the inside of an ultra-bold giant title; at the end the glyphs scale up 26× overflowing, and the inside footage takes over full-screen", "duration": "5s (hold 20f + in-glyph drift 80f + scale takeover 30f + stillness 20f)", "energy": "Medium-high (steady drift segment, one burst at the takeover)", "styles": [ { "key": "text-as-mask", "label": "text-as-mask", "media": "./media/text-as-mask.mp4?v=1784437314808" } ], "preview": "https://r2.getshotpack.com/media/text-as-mask.mp4?v=1784437314808", "poster": null, "card": "https://getshotpack.com/demos/opening/text-as-mask/prompt.md", "tsx": "https://getshotpack.com/demos/opening/text-as-mask/demo.tsx", "tsxFiles": [ "./demos/opening/text-as-mask/TextAsMask.tsx" ], "prompt": "https://getshotpack.com/demos/opening/text-as-mask/prompt.md", "unlock": null }, { "id": "text-column-converge", "tier": "free", "core": true, "category": "typography", "subcategory": null, "tags": [ "typography", "outro" ], "summary": "Two words in standoff converge — the left \"NEW\" and a right feature word stay pinned to equal frame margins on their respective sides with hard-cut cycling and zero shrinkage throughout, and only on the final word does a single ease-in-out slide bring them to the center line, interlocking into a phrase; small text below appears almost as a hard cut; an end-reveal title card", "duration": "cycling 7–16f/word × 8–9 words + converge ~36f + stillness after small text; whole segment ~5–6s", "energy": "Medium-low (machine rhythm, small-text spec-list temperament, not word stomping)", "styles": [ { "key": "text-column-converge", "label": "text-column-converge", "media": "./media/text-column-converge.mp4?v=1784437314815" } ], "preview": "https://r2.getshotpack.com/media/text-column-converge.mp4?v=1784437314815", "poster": null, "card": "https://getshotpack.com/demos/typography/text-column-converge/prompt.md", "tsx": "https://getshotpack.com/demos/typography/text-column-converge/demo.tsx", "tsxFiles": [ "./demos/typography/text-column-converge/TextColumnConverge.tsx" ], "prompt": "https://getshotpack.com/demos/typography/text-column-converge/prompt.md", "unlock": null }, { "id": "theme-switch-moves", "tier": "free", "core": true, "category": "interaction", "subcategory": null, "tags": [ "interaction" ], "summary": "Theme switching in two variants — theme-sweep, a diagonal sweep (the interface reskins in place where the boundary passes), and palette-ripple, the combo piece (the ⌘K palette shrinks to a point and a ripple spreads from that point to reskin)", "duration": "A 3–4s / B 5–6s", "energy": "A Medium / B Medium-high (the combo piece has a complete causal chain)", "styles": [ { "key": "theme-sweep-toggle", "label": "theme-sweep-toggle", "media": "./media/theme-sweep-toggle.mp4?v=1784437314818" }, { "key": "palette-theme-ripple", "label": "palette-theme-ripple", "media": "./media/palette-theme-ripple.mp4?v=1784437314820" } ], "preview": "https://r2.getshotpack.com/media/theme-sweep-toggle.mp4?v=1784437314818", "poster": null, "card": "https://getshotpack.com/demos/interaction/theme-switch-moves/prompt.md", "tsx": "https://getshotpack.com/demos/interaction/theme-switch-moves/demo.tsx", "tsxFiles": [ "./demos/interaction/theme-switch-moves/PaletteThemeRipple.tsx", "./demos/interaction/theme-switch-moves/ThemeSweepToggle.tsx" ], "prompt": "https://getshotpack.com/demos/interaction/theme-switch-moves/prompt.md", "unlock": null }, { "id": "timeline-travel", "tier": "free", "core": true, "category": "data", "subcategory": null, "tags": [ "data", "camera" ], "summary": "Horizontal timeline travel — the camera accelerates along the horizontal tick axis past version ticks; as it passes each tick a card springs upright in a brief pause, and the final tick ends in a hard stop that pushes in close", "duration": "4–5s", "energy": "Medium-high (an acceleration → hard-stop rhythm shot)", "styles": [ { "key": "timeline-travel", "label": "timeline-travel", "media": "./media/timeline-travel.mp4?v=1784437314823" } ], "preview": "https://r2.getshotpack.com/media/timeline-travel.mp4?v=1784437314823", "poster": null, "card": "https://getshotpack.com/demos/data/timeline-travel/prompt.md", "tsx": "https://getshotpack.com/demos/data/timeline-travel/demo.tsx", "tsxFiles": [ "./demos/data/timeline-travel/TimelineTravel.tsx" ], "prompt": "https://getshotpack.com/demos/data/timeline-travel/prompt.md", "unlock": null }, { "id": "title-demote-to-label", "tier": "free", "core": true, "category": "typography", "subcategory": null, "tags": [ "typography", "transition" ], "summary": "Big title demotes into a section label, two variants — A: the centered big title develops, holds one beat, then continuously shrinks 0.3x and pans to the top-left corner as a small section label while the content area grows beneath it; B: same routine but its entrance carries a text-selection highlight block that sweeps in then withdraws", "duration": "A ~3s (92f) / B ~3.5s (104f); demo plays both variants back-to-back in 196f", "energy": "Low-mid (layout-transformation type, atmospheric shot)", "styles": [ { "key": "title-demote-to-label", "label": "title-demote-to-label", "media": "./media/title-demote-to-label.mp4?v=1784437314825" } ], "preview": "https://r2.getshotpack.com/media/title-demote-to-label.mp4?v=1784437314825", "poster": null, "card": "https://getshotpack.com/demos/typography/title-demote-to-label/prompt.md", "tsx": "https://getshotpack.com/demos/typography/title-demote-to-label/demo.tsx", "tsxFiles": [ "./demos/typography/title-demote-to-label/TitleDemoteToLabel.tsx" ], "prompt": "https://getshotpack.com/demos/typography/title-demote-to-label/prompt.md", "unlock": null }, { "id": "trailer-grammar-moves", "tier": "free", "core": true, "category": "rhythm", "subcategory": null, "tags": [ "rhythm", "opening", "transition" ], "summary": "Three trailer-grammar variants — trailer-bumper pre-roll quick-cut hook, card-footage-cadence title cards interleaved in dialogue with footage, smash-cut hard cut into stillness", "duration": "A ~4.7s / B ~5s / C ~4.5s", "energy": "A High / B Medium / C High", "styles": [ { "key": "trailer-bumper", "label": "trailer-bumper", "media": "./media/trailer-bumper.mp4?v=1784437314827" }, { "key": "card-footage-cadence", "label": "card-footage-cadence", "media": "./media/card-footage-cadence.mp4?v=1784437314829" }, { "key": "smash-cut", "label": "smash-cut", "media": "./media/smash-cut.mp4?v=1784437314831" } ], "preview": "https://r2.getshotpack.com/media/trailer-bumper.mp4?v=1784437314827", "poster": null, "card": "https://getshotpack.com/demos/rhythm/trailer-grammar-moves/prompt.md", "tsx": "https://getshotpack.com/demos/rhythm/trailer-grammar-moves/demo.tsx", "tsxFiles": [ "./demos/rhythm/trailer-grammar-moves/CardFootageCadence.tsx", "./demos/rhythm/trailer-grammar-moves/SmashCut.tsx", "./demos/rhythm/trailer-grammar-moves/TrailerBumper.tsx" ], "prompt": "https://getshotpack.com/demos/rhythm/trailer-grammar-moves/prompt.md", "unlock": null }, { "id": "transition-hidden-cut", "tier": "free", "core": true, "category": "transition", "subcategory": null, "tags": [ "transition" ], "summary": "Hidden-cut transitions, three variants — foreground-occlusion invisible cut, versus-slam opening, and warm light-leak burn; the hard cut is hidden inside 1–3 frames of occlusion/impact/light peak, and the viewer never sees the scissors", "duration": "n/a (technique card; frames per variant are in the parameter table, drawn from the adjacent shots' budgets)", "energy": "n/a (technique card, doesn't occupy an energy slot)", "styles": [ { "key": "invisible-cut", "label": "invisible-cut 前景遮挡隐形切", "media": "./media/invisible-cut.mp4?v=1784437314833" }, { "key": "versus-slam", "label": "versus-slam 对撞开屏", "media": "./media/versus-slam.mp4?v=1784437314835" }, { "key": "light-leak-burn", "label": "light-leak-burn 琥珀漏光", "media": "./media/light-leak-burn.mp4?v=1784437314836" } ], "preview": "https://r2.getshotpack.com/media/invisible-cut.mp4?v=1784437314833", "poster": null, "card": "https://getshotpack.com/demos/transition/transition-hidden-cut/prompt.md", "tsx": "https://getshotpack.com/demos/transition/transition-hidden-cut/demo.tsx", "tsxFiles": [ "./demos/transition/transition-hidden-cut/InvisibleCut.tsx", "./demos/transition/transition-hidden-cut/LightLeakBurn.tsx", "./demos/transition/transition-hidden-cut/VersusSlam.tsx" ], "prompt": "https://getshotpack.com/demos/transition/transition-hidden-cut/prompt.md", "unlock": null }, { "id": "transition-travel", "tier": "free", "core": true, "category": "transition", "subcategory": null, "tags": [ "transition", "camera" ], "summary": "Travel-style transitions, two variants — shared-element morph home and letterform-zoom; the camera dives into real elements in the frame to change scenes", "duration": "n/a (technique card; each variant's action segment 25–60f, surrounding holds counted separately, frames drawn from the adjacent shots' budgets)", "energy": "n/a (technique card, doesn't occupy an energy slot)", "styles": [ { "key": "shared-element-morph", "label": "共享元素归位 shared-element-morph", "media": "./media/shared-element-morph.mp4?v=1784437314838" }, { "key": "letterform-zoom", "label": "字腔穿越 letterform-zoom", "media": "./media/letterform-zoom.mp4?v=1784437314839" } ], "preview": "https://r2.getshotpack.com/media/shared-element-morph.mp4?v=1784437314838", "poster": null, "card": "https://getshotpack.com/demos/transition/transition-travel/prompt.md", "tsx": "https://getshotpack.com/demos/transition/transition-travel/demo.tsx", "tsxFiles": [ "./demos/transition/transition-travel/LetterformZoom.tsx", "./demos/transition/transition-travel/SharedElementMorph.tsx" ], "prompt": "https://getshotpack.com/demos/transition/transition-travel/prompt.md", "unlock": null }, { "id": "type-and-filter", "tier": "free", "core": true, "category": "interaction", "subcategory": null, "tags": [ "interaction" ], "summary": "On a real UI you type to search, the grid converges into a single card by itself, and a click dives through into the detail page", "duration": "~2.5s (118–190f)", "energy": "Medium (the unhurried beat after the high-energy dealing segment)", "styles": [ { "key": "type-and-filter", "label": "type-and-filter", "media": "./media/type-and-filter.mp4?v=1784437314842" } ], "preview": "https://r2.getshotpack.com/media/type-and-filter.mp4?v=1784437314842", "poster": null, "card": "https://getshotpack.com/demos/interaction/type-and-filter/prompt.md", "tsx": null, "tsxFiles": [], "prompt": "https://getshotpack.com/demos/interaction/type-and-filter/prompt.md", "unlock": null }, { "id": "type-assembly-moves", "tier": "free", "core": true, "category": "typography", "subcategory": null, "tags": [ "typography" ], "summary": "Text assembly, four variants — split-text-stagger per-character split rise, letterform-drift-assembly drift convergence, tracking-expand-reveal letter-spacing breathing, text-on-path flowing in along a line", "duration": "single variant 4–5s (action segments A ~56f / B ~104f / C ~58f / D ~99f, all including hold)", "energy": "A medium / B medium-high / C low-medium / D medium", "styles": [ { "key": "split-text-stagger", "label": "split-text-stagger 裂升", "media": "./media/split-text-stagger.mp4?v=1784437314844" }, { "key": "drift-assembly", "label": "drift-assembly 漂移合拢", "media": "./media/drift-assembly.mp4?v=1784437314846" }, { "key": "tracking-expand", "label": "tracking-expand 字距呼吸", "media": "./media/tracking-expand.mp4?v=1784437314848" }, { "key": "text-on-path", "label": "text-on-path 沿线流入", "media": "./media/text-on-path.mp4?v=1784437314851" } ], "preview": "https://r2.getshotpack.com/media/split-text-stagger.mp4?v=1784437314844", "poster": null, "card": "https://getshotpack.com/demos/typography/type-assembly-moves/prompt.md", "tsx": "https://getshotpack.com/demos/typography/type-assembly-moves/demo.tsx", "tsxFiles": [ "./demos/typography/type-assembly-moves/LetterformDriftAssembly.tsx", "./demos/typography/type-assembly-moves/SplitTextStagger.tsx", "./demos/typography/type-assembly-moves/TextOnPath.tsx", "./demos/typography/type-assembly-moves/TrackingExpandReveal.tsx" ], "prompt": "https://getshotpack.com/demos/typography/type-assembly-moves/prompt.md", "unlock": null }, { "id": "type-entrance-moves", "tier": "free", "core": true, "category": "typography", "subcategory": null, "tags": [ "typography" ], "summary": "Title entrance, two variants — scramble-decode (the answer grows out of noise) and letter-drop-physics (characters fall with gravity, bounce, settle), pick one by tone", "duration": "single variant 4–5s (including hold and still ending; action segments A ~66f / B ~106f)", "energy": "Medium-high (A leans rational progression, B leans physical playfulness)", "styles": [ { "key": "scramble-decode", "label": "scramble-decode 乱码解码", "media": "./media/scramble-decode.mp4?v=1784437314853" }, { "key": "letter-drop-physics", "label": "letter-drop-physics 字符坠落", "media": "./media/letter-drop-physics.mp4?v=1784437314856" } ], "preview": "https://r2.getshotpack.com/media/scramble-decode.mp4?v=1784437314853", "poster": null, "card": "https://getshotpack.com/demos/typography/type-entrance-moves/prompt.md", "tsx": "https://getshotpack.com/demos/typography/type-entrance-moves/demo.tsx", "tsxFiles": [ "./demos/typography/type-entrance-moves/LetterDropPhysics.tsx", "./demos/typography/type-entrance-moves/ScrambleDecode.tsx" ], "prompt": "https://getshotpack.com/demos/typography/type-entrance-moves/prompt.md", "unlock": null }, { "id": "type-rhythm-sync", "tier": "free", "core": true, "category": "typography", "subcategory": null, "tags": [ "typography", "rhythm" ], "summary": "Text synced to sound, two variants — font-weight-pump (strokes thicken and snap back with the drum) and karaoke-fill-sync (words light up one by one with the voiceover)", "duration": "single variant 4–5s; A 10f decay window per hit, B 15–35f per word by speech rate", "energy": "A high (party-vibe) / B medium (follow-along guidance)", "styles": [ { "key": "font-weight-pump", "label": "font-weight-pump 字重脉冲", "media": "./media/font-weight-pump.mp4?v=1784437314859" }, { "key": "karaoke-fill-sync", "label": "karaoke-fill-sync 填色随读", "media": "./media/karaoke-fill-sync.mp4?v=1784437314860" } ], "preview": "https://r2.getshotpack.com/media/font-weight-pump.mp4?v=1784437314859", "poster": null, "card": "https://getshotpack.com/demos/typography/type-rhythm-sync/prompt.md", "tsx": "https://getshotpack.com/demos/typography/type-rhythm-sync/demo.tsx", "tsxFiles": [ "./demos/typography/type-rhythm-sync/FontWeightPump.tsx", "./demos/typography/type-rhythm-sync/KaraokeFillSync.tsx" ], "prompt": "https://getshotpack.com/demos/typography/type-rhythm-sync/prompt.md", "unlock": null }, { "id": "typewriter-moves", "tier": "free", "core": true, "category": "typography", "subcategory": null, "tags": [ "typography", "opening" ], "summary": "Typewriter, two variants — terminal-typewriter: the terminal command finishes typing and detonates a scene switch; error-retype: a \"rephrase\" three-act play of mistyping, deleting, and retyping", "duration": "A ~5s / B ~5.5s", "energy": "A medium-high / B medium-low", "styles": [ { "key": "terminal-typewriter", "label": "terminal-typewriter", "media": "./media/terminal-typewriter.mp4?v=1784437314862" }, { "key": "error-retype", "label": "error-retype", "media": "./media/error-retype.mp4?v=1784437314864" } ], "preview": "https://r2.getshotpack.com/media/terminal-typewriter.mp4?v=1784437314862", "poster": null, "card": "https://getshotpack.com/demos/typography/typewriter-moves/prompt.md", "tsx": "https://getshotpack.com/demos/typography/typewriter-moves/demo.tsx", "tsxFiles": [ "./demos/typography/typewriter-moves/TerminalTypewriter.tsx", "./demos/typography/typewriter-moves/TypewriterErrorRetype.tsx" ], "prompt": "https://getshotpack.com/demos/typography/typewriter-moves/prompt.md", "unlock": null }, { "id": "typing-code-block", "tier": "free", "core": true, "category": "typography", "subcategory": null, "tags": [ "typography" ], "summary": "The same syntax-highlighted code shows two reveals side by side — left side line-level stagger with 4f gaps, fading in and rising 8px; right side per-character typing keeping each character's original token color, with a #3a4468 block cursor behind the current character", "duration": "~4.6s (138f@30fps)", "energy": "Medium (right side continuous typing advance, left side one-shot convergence)", "styles": [ { "key": "typing-code-block", "label": "typing-code-block", "media": "./media/typing-code-block.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/typing-code-block.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/typography/typing-code-block/prompt.md", "tsx": "https://getshotpack.com/demos/typography/typing-code-block/demo.tsx", "tsxFiles": [ "./demos/typography/typing-code-block/TypingCodeBlock.tsx" ], "prompt": "https://getshotpack.com/demos/typography/typing-code-block/prompt.md", "unlock": null }, { "id": "ui-strip-away-outro", "tier": "free", "core": true, "category": "outro", "subcategory": null, "tags": [ "outro" ], "summary": "A subtractive ending — after clicking Publish, the entire editor UI evaporates in staggered layers from the periphery toward the center; on the black field only that button remains, sliding to screen center and scaling up, then the button fades out to hand off to the wordmark final", "duration": "~4.3s (130f: cursor settles 34f → evaporation ~40f → button alone → wordmark takeover)", "energy": "Medium (quiet operation up front, sustained exit in the middle, no instantaneous impact)", "styles": [ { "key": "ui-strip-away-outro", "label": "ui-strip-away-outro", "media": "./media/ui-strip-away-outro.mp4?v=1784437314866" } ], "preview": "https://r2.getshotpack.com/media/ui-strip-away-outro.mp4?v=1784437314866", "poster": null, "card": "https://getshotpack.com/demos/outro/ui-strip-away-outro/prompt.md", "tsx": "https://getshotpack.com/demos/outro/ui-strip-away-outro/demo.tsx", "tsxFiles": [ "./demos/outro/ui-strip-away-outro/UiStripAwayOutro.tsx" ], "prompt": "https://getshotpack.com/demos/outro/ui-strip-away-outro/prompt.md", "unlock": null }, { "id": "ui-to-brand-morph", "tier": "free", "core": true, "category": "outro", "subcategory": null, "tags": [ "outro" ], "summary": "Two-variant UI-to-brand morph — icon-flip-bloom flattens the icon's Y-axis into a vertical line that blooms into a flower-shaped mark + wordmark settling letter by letter; input-morph-assemble shrinks the input box into a pill with three primitive elements dropping in to assemble into a single logo petal", "duration": "A ~4.3s (130f) / B ~4.7s (140f)", "energy": "Medium-high (closing highlight; one complete transformation tells it all)", "styles": [ { "key": "icon-flip-bloom", "label": "icon-flip-bloom", "media": "./media/icon-flip-bloom.mp4?v=1784437314868" }, { "key": "input-morph-assemble", "label": "input-morph-assemble", "media": "./media/input-morph-assemble.mp4?v=1785045002395" } ], "preview": "https://r2.getshotpack.com/media/icon-flip-bloom.mp4?v=1784437314868", "poster": null, "card": "https://getshotpack.com/demos/outro/ui-to-brand-morph/prompt.md", "tsx": "https://getshotpack.com/demos/outro/ui-to-brand-morph/demo.tsx", "tsxFiles": [ "./demos/outro/ui-to-brand-morph/IconFlipBloomLogo.tsx", "./demos/outro/ui-to-brand-morph/InputMorphsIntoLogo.tsx" ], "prompt": "https://getshotpack.com/demos/outro/ui-to-brand-morph/prompt.md", "unlock": null }, { "id": "value-stagger-gradient", "tier": "free", "core": true, "category": "ui-entrance", "subcategory": null, "tags": [ "ui-entrance" ], "summary": "16 bars' entrance delay is temporal staggering, while height/hue/displacement/blur each lay out a numerical gradient from first to last; a second beat switches the stagger origin to the center, re-spreading with the pulse amplitude largest at the center", "duration": "~5.0s (150f@30fps)", "energy": "Medium-high (the first beat is a continuous spread; the second beat's center pulse is a clear single peak)", "styles": [ { "key": "value-stagger-gradient", "label": "value-stagger-gradient", "media": "./media/value-stagger-gradient.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/value-stagger-gradient.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/ui-entrance/value-stagger-gradient/prompt.md", "tsx": "https://getshotpack.com/demos/ui-entrance/value-stagger-gradient/demo.tsx", "tsxFiles": [ "./demos/ui-entrance/value-stagger-gradient/ValueStaggerGradient.tsx" ], "prompt": "https://getshotpack.com/demos/ui-entrance/value-stagger-gradient/prompt.md", "unlock": null }, { "id": "vertical-word-roll-blur-cycle", "tier": "free", "core": true, "category": "typography", "subcategory": null, "tags": [ "typography" ], "summary": "The trailing word of a sentence becomes a vertical wheel, 3 word swaps at 0.55s each (outQuint seven-tenths + outBack three-tenths, fast-then-very-slow with a micro overshoot), adjacent rows get vertical blur and gray scaling by distance, and the center word tints from gray to the accent color the instant it settles", "duration": "~5.0s (150f@30fps: stillness → 3 word swaps → whole group fades out at tail)", "energy": "Medium (steady three beats, no peaks)", "styles": [ { "key": "vertical-word-roll-blur-cycle", "label": "vertical-word-roll-blur-cycle", "media": "./media/vertical-word-roll-blur-cycle.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/vertical-word-roll-blur-cycle.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/typography/vertical-word-roll-blur-cycle/prompt.md", "tsx": "https://getshotpack.com/demos/typography/vertical-word-roll-blur-cycle/demo.tsx", "tsxFiles": [ "./demos/typography/vertical-word-roll-blur-cycle/VerticalWordRollBlurCycle.tsx" ], "prompt": "https://getshotpack.com/demos/typography/vertical-word-roll-blur-cycle/prompt.md", "unlock": null }, { "id": "voice-waveform-live", "tier": "free", "core": true, "category": "interaction", "subcategory": null, "tags": [ "interaction" ], "summary": "A recording pill's live voiceprint — 64 thin vertical bars rise and fall with \"speech\", towering in the middle while speaking and collapsing to a dotted line on pauses, with the waveform scrolling right to left; a full performance of speak → pause → speak → submit-collapse", "duration": "~5s (150f: entry 12f + speak 1.4s + pause 0.8s + speak 1.4s + submit-collapse 0.8s)", "energy": "Medium (functional aliveness, not showboating)", "styles": [ { "key": "voice-waveform-live", "label": "voice-waveform-live", "media": "./media/voice-waveform-live.mp4?v=1784437314870" } ], "preview": "https://r2.getshotpack.com/media/voice-waveform-live.mp4?v=1784437314870", "poster": null, "card": "https://getshotpack.com/demos/interaction/voice-waveform-live/prompt.md", "tsx": "https://getshotpack.com/demos/interaction/voice-waveform-live/demo.tsx", "tsxFiles": [ "./demos/interaction/voice-waveform-live/VoiceWaveformLive.tsx" ], "prompt": "https://getshotpack.com/demos/interaction/voice-waveform-live/prompt.md", "unlock": null }, { "id": "wall-reveal-moves", "tier": "free", "core": true, "category": "ui-entrance", "subcategory": null, "tags": [ "ui-entrance" ], "summary": "Three variants of whole-wall batch entrance — bento cell-by-cell lighting, grid wave flipping, blueprint line-tracing formation; all reveal in place without displacement, complementing deck-deal-flyin's fly-in displacement type into a category matrix", "duration": "each variant ~4.3–5s (A 150f / B 130f / C 150f @30fps, including establishment holds and still endings)", "energy": "Medium", "styles": [ { "key": "bento-light-up", "label": "bento-light-up 逐格点亮", "media": "./media/bento-light-up.mp4?v=1784437314872" }, { "key": "grid-wave-flip", "label": "grid-wave-flip 波浪翻面", "media": "./media/grid-wave-flip.mp4?v=1784437314873" }, { "key": "wireframe-draw-on", "label": "wireframe-draw-on 蓝图描线成形", "media": "./media/wireframe-draw-on.mp4?v=1784437314874" } ], "preview": "https://r2.getshotpack.com/media/bento-light-up.mp4?v=1784437314872", "poster": null, "card": "https://getshotpack.com/demos/ui-entrance/wall-reveal-moves/prompt.md", "tsx": "https://getshotpack.com/demos/ui-entrance/wall-reveal-moves/demo.tsx", "tsxFiles": [ "./demos/ui-entrance/wall-reveal-moves/BentoLightUp.tsx", "./demos/ui-entrance/wall-reveal-moves/GridWaveFlip.tsx", "./demos/ui-entrance/wall-reveal-moves/WireframeDrawOn.tsx" ], "prompt": "https://getshotpack.com/demos/ui-entrance/wall-reveal-moves/prompt.md", "unlock": null }, { "id": "wallet-counter-roll", "tier": "free", "core": true, "category": "mobile", "subcategory": "data", "tags": [ "mobile", "data" ], "summary": "The balance in a phone wallet rolls through a 4-digit odometer at high speed, then each digit decelerates in turn with an overshoot and locks onto 8,492; the transaction list below staggers in, and finally the whole device breathes to settle", "duration": "~6s (180f @ 30fps, including ≥30f of stillness after settling)", "energy": "Medium (high speed during the roll → each digit locks in turn)", "styles": [ { "key": "wallet-counter-roll", "label": "wallet-counter-roll", "media": "./media/wallet-counter-roll-1786362965619.mp4" } ], "preview": "https://r2.getshotpack.com/media/wallet-counter-roll-1786362965619.mp4", "poster": "https://r2.getshotpack.com/media/wallet-counter-roll-1786363295560.png", "card": "https://getshotpack.com/demos/mobile/wallet-counter-roll/prompt.md", "tsx": "https://getshotpack.com/demos/mobile/wallet-counter-roll/demo.tsx", "tsxFiles": [ "./demos/mobile/wallet-counter-roll/WalletCounterRoll.tsx" ], "prompt": "https://getshotpack.com/demos/mobile/wallet-counter-roll/prompt.md", "unlock": null }, { "id": "whip-pan-transition", "tier": "free", "core": true, "category": "transition", "subcategory": null, "tags": [ "transition" ], "summary": "Whip-pan transition — two pages sweep across the same frame with a large translate left/right/up/down, with speed-stretch and motion blur; the previous page whips out from its entry side, the next page whips in from the same side", "duration": "Per variant, prior state ≥20f + whip 24–40f + ending ≥40f, ~4s (120f)", "energy": "High (the whip segment is the film's speed peak; buffer with low energy before and after)", "styles": [ { "key": "whip-h", "label": "whip-h", "media": "./media/whip-pan-transition.mp4?v=1786343981647" }, { "key": "whip-v", "label": "whip-v" } ], "preview": "https://r2.getshotpack.com/media/whip-pan-transition.mp4?v=1786343981647", "poster": null, "card": "https://getshotpack.com/demos/transition/whip-pan-transition/prompt.md", "tsx": "https://getshotpack.com/demos/transition/whip-pan-transition/demo.tsx", "tsxFiles": [ "./demos/transition/whip-pan-transition/WhipPanTransition.tsx" ], "prompt": "https://getshotpack.com/demos/transition/whip-pan-transition/prompt.md", "unlock": null }, { "id": "white-flash-logo-simplify-cut", "tier": "free", "core": true, "category": "transition", "subcategory": null, "tags": [ "transition" ], "summary": "A colorful liquid-gradient wordmark sits in flowing shimmer, the frame slams to white overexposure in one beat, and a flat version of the wordmark fades in and freezes on the white ground — one white flash completes a dimensionality reduction of texture", "duration": "~3.6s (108f@30fps; seated shimmer 0–1.2s · slam to white 1.2–1.5s · flat freeze 1.7–2.7s)", "energy": "Medium-High (one pulse-like accent, stillness both before and after)", "styles": [ { "key": "white-flash-logo-simplify-cut", "label": "white-flash-logo-simplify-cut", "media": "./media/white-flash-logo-simplify-cut.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/white-flash-logo-simplify-cut.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/transition/white-flash-logo-simplify-cut/prompt.md", "tsx": "https://getshotpack.com/demos/transition/white-flash-logo-simplify-cut/demo.tsx", "tsxFiles": [ "./demos/transition/white-flash-logo-simplify-cut/WhiteFlashLogoSimplifyCut.tsx" ], "prompt": "https://getshotpack.com/demos/transition/white-flash-logo-simplify-cut/prompt.md", "unlock": null }, { "id": "wipe-transitions", "tier": "free", "core": true, "category": "transition", "subcategory": null, "tags": [ "transition" ], "summary": "Geometric wipe transitions, two variants — clock-wipe (a radar pointer sweeps 360° to change pages) and blinds-slice (12 vertical strips staggered-flip into a wave)", "duration": "Per variant, prior state ≥20f + wipe 32–60f + ending ≥40f, ~5s (150f)", "energy": "Medium", "styles": [ { "key": "clock-wipe", "label": "clock-wipe", "media": "./media/clock-wipe.mp4?v=1784437314879" }, { "key": "blinds-slice", "label": "blinds-slice", "media": "./media/blinds-slice.mp4?v=1784437314880" } ], "preview": "https://r2.getshotpack.com/media/clock-wipe.mp4?v=1784437314879", "poster": null, "card": "https://getshotpack.com/demos/transition/wipe-transitions/prompt.md", "tsx": "https://getshotpack.com/demos/transition/wipe-transitions/demo.tsx", "tsxFiles": [ "./demos/transition/wipe-transitions/BlindsSlice.tsx", "./demos/transition/wipe-transitions/ClockWipe.tsx" ], "prompt": "https://getshotpack.com/demos/transition/wipe-transitions/prompt.md", "unlock": null }, { "id": "word-relay-filmstrip", "tier": "free", "core": true, "category": "typography", "subcategory": null, "tags": [ "typography", "ui-entrance" ], "summary": "A left column of equal-height black-and-white alternating page cards steps forward in scroll, while the right side has a serif large word relaying in place (noun constant + verb rotating) — the column scrolls exactly one step at the instant the word swaps, and the word block's vertical center precisely aligns with the current page card's midpoint", "duration": "~1.5–2s per word period × 3–4 words; whole segment 5–7s", "energy": "Medium-low (editorial temperament; rhythm comes from the \"click\" of word swaps)", "styles": [ { "key": "word-relay-filmstrip", "label": "word-relay-filmstrip", "media": "./media/word-relay-filmstrip.mp4?v=1784437314883" } ], "preview": "https://r2.getshotpack.com/media/word-relay-filmstrip.mp4?v=1784437314883", "poster": null, "card": "https://getshotpack.com/demos/typography/word-relay-filmstrip/prompt.md", "tsx": "https://getshotpack.com/demos/typography/word-relay-filmstrip/demo.tsx", "tsxFiles": [ "./demos/typography/word-relay-filmstrip/WordRelayFilmstrip.tsx" ], "prompt": "https://getshotpack.com/demos/typography/word-relay-filmstrip/prompt.md", "unlock": null }, { "id": "word-relay-geometry", "tier": "free", "core": true, "category": "typography", "subcategory": null, "tags": [ "typography" ], "summary": "Three benefit words each carry a dedicated geometry relay — dashed large circle self-rotating and shrinking → three solid circles growing in sequence via trim (phase offset 0.06) → a metal sheen sweeps and the last beat settles into pure white; old words shrink to 0.86 and fade out, new words reveal outline→fill", "duration": "~6.0s (180f@30fps: three segments at 0.36 time windows each, 0.04 overlap between segments)", "energy": "Medium-high (three beats advancing + continuous geometry motion + background particles, no still frames)", "styles": [ { "key": "word-relay-geometry", "label": "word-relay-geometry", "media": "./media/word-relay-geometry.mp4?v=1785600000000" } ], "preview": "https://r2.getshotpack.com/media/word-relay-geometry.mp4?v=1785600000000", "poster": null, "card": "https://getshotpack.com/demos/typography/word-relay-geometry/prompt.md", "tsx": "https://getshotpack.com/demos/typography/word-relay-geometry/demo.tsx", "tsxFiles": [ "./demos/typography/word-relay-geometry/WordRelayGeometry.tsx" ], "prompt": "https://getshotpack.com/demos/typography/word-relay-geometry/prompt.md", "unlock": null }, { "id": "zoom-blur-transition", "tier": "free", "core": true, "category": "transition", "subcategory": null, "tags": [ "transition" ], "summary": "Zoom-punch transition — the previous page zooms in and fades out through blur, the next page punches in from magnified blur and resets; both pages moving along the same depth direction hides the cut point", "duration": "Per variant, prior state ≥20f + punch 24–40f + ending ≥40f, ~4s (120f)", "energy": "High (the punch segment is the advancing peak, low-energy buffer before and after)", "styles": [ { "key": "zoom-in", "label": "zoom-in", "media": "./media/zoom-blur-transition.mp4?v=1786343981647" }, { "key": "rise-punch", "label": "rise-punch" } ], "preview": "https://r2.getshotpack.com/media/zoom-blur-transition.mp4?v=1786343981647", "poster": null, "card": "https://getshotpack.com/demos/transition/zoom-blur-transition/prompt.md", "tsx": "https://getshotpack.com/demos/transition/zoom-blur-transition/demo.tsx", "tsxFiles": [ "./demos/transition/zoom-blur-transition/ZoomBlurTransition.tsx" ], "prompt": "https://getshotpack.com/demos/transition/zoom-blur-transition/prompt.md", "unlock": null } ] }