🎞️ Media & Video

A skill specialized in creating web animations with Framer Motion and CSS. It covers fade-ins, staggered lists, hover states, animated modals, page transitions, scroll-triggered animations, and parallax — all in React/TypeScript or plain CSS.

Without the skill, you get generic animation code. With it, Claude follows performance best practices (transform + opacity, never top/left), recommended durations (150–400ms), and automatically reduces motion for accessibility.

Framer Motion, CSS keyframes, motion design, micro-interactions, accessibility (prefers-reduced-motion).

The skill triggers when you ask for animation, transitions, motion design, Framer Motion, scroll animation, loading animation, hover effects, micro-interactions, or visual effects in a React component.

Knowing the triggers helps you make the right request. "Create a fade-in" triggers it; "add a CSS transition" does too.

Trigger words: animation, transition, motion, hover, scroll, loading, micro-interaction.

The skill provides ready-made patterns: Fade In on Mount, Staggered List, Button Hover, Modal with AnimatePresence, Page Transition, Scroll Progress Indicator, and Parallax—all performant and accessible.

Well-crafted animations reduce cognitive load, guide the eye, and convey quality. Poorly crafted animations (that use top/left and lack reduced-motion support) hurt performance and accessibility.

Perceived performance, polished UI, GPU-friendly (transform/opacity), AnimatePresence for mounting/unmounting.

Uses framer-motion (npm install framer-motion) as the main library, with motion.*, AnimatePresence, useScroll, useTransform e useSpring. For plain CSS, it generates @keyframes and Tailwind classes (animate-*). Follows easing rules (ease-out for entrances, ease-in for exits) and durations (micro 150ms, standard 200–300ms, complex 400ms).

Understanding the stack lets you adjust parameters (damping, stiffness in spring animations) and know when to use CSS vs. Framer Motion.

framer-motion, useScroll, useTransform, AnimatePresence, spring vs tween, Tailwind animate.

A classic example: a list of cards that appear in a cascade (stagger) when the page loads, each card with a hover lift and shadow. The skill generates the complete component with Framer Motion and variants.

Seeing a real example shows how the skill interprets the request and which props it sets by default.

staggerChildren, variants, whileHover, exit animations.

Works especially well with canvas-design (base UI) and 3d-animation-creator (scroll video as a companion). It doesn’t cover live-action video (use remotion or hyperframes) or Three.js 3D animations.

Knowing the limitations helps avoid frustration: use remotion for exportable MP4; use 3d-animation-creator for scroll-video sites.

Boundary: web animation vs. exported video; complementary to 3d-animation-creator.

A skill that takes an MP4/MOV video and builds a complete HTML/CSS/JS site where the video is controlled by scrolling. The scroll position determines which frame is displayed — the video plays forward or backward as you scroll down or up the page.

It's the same effect Apple uses on iPhone pages. With extracted frames and a canvas, you can create the illusion of 3D video without WebGL.

Scroll-driven animation, frame extraction, canvas rendering, Apple-style storytelling.

Triggers when you ask "create a website like Apple," "scroll-driven video," "video that plays as you scroll," "scroll animation," or "extract video frames for scrolling." The skill starts with a required interview: product name, color, style, sections.

The initial interview collects all design decisions before building — preventing rework. Without it, the skill doesn't proceed.

Step 0 required: design interview; trigger phrase "Apple-style".

Turn any video into a premium landing page where the product reveals itself as you scroll. Annotation cards appear at specific moments in the video, while feature and spec sections integrate with the visual narrative.

A landing page with scroll-driven video converts better by creating immersion. Production time dropped from weeks to hours with this skill.

Immersion, visual storytelling, conversion, premium landing page.

Step 1: analyze FPS and video duration. Step 2: extract frames with FFmpeg (ffmpeg -i video.mp4 frames/frame_%04d.jpg -q:v 85). Step 3: builds HTML with <canvas> sticky, a 350vh scroll height, and JavaScript that maps scrollY for the correct frame index via requestAnimationFrame. Mobile uses 250vh.

The actual engine is FFmpeg for extraction and canvas for rendering. Knowing this lets you adjust quality (-q:v), frame rate, and fix path errors.

FFmpeg, canvas, requestAnimationFrame, scroll height, frame index mapping.

Create an Apple-style landing page for a tech product. The video produto.mp4 is in /tmp/. Extract the frames with FFmpeg, build the site with scroll-driven animation, add 3 annotation cards at frames 30, 90, and 150, and a specs section below.

The complete prompt includes the video's location, number of cards, and sections — these details avoid the interactive interview.

Video location, target frames for cards, content sections.

Works with animation-designer to animate the cards and sections around the video. To generate the source video, use remotion or seedance-loop-prompt. It isn't for pages without video — use animation-designer on its own in that case.

The full stack is: seedance generates a loop → 3d-animation-creator uses the loop as a source → animation-designer animates the surrounding text sections.

Requires source video; stack: seedance → 3d-animation-creator → animation-designer.

Remotion is a framework for creating videos programmatically in React. Instead of a visual timeline, you write React components that receive frame e fps as props and render the state at that moment. The result becomes an MP4 via headless rendering.

Video versionable in Git, dynamic API data, TypeScript typing, scene composition as components—it's Motion Canvas/After Effects in your editor.

Composition, useCurrentFrame, interpolate, spring, Sequence, AbsoluteFill.

Triggers when you mention Remotion, "create a video in React," "programmatic video composition," "export MP4 via code," or "animate data for video." Also triggers for programmatic Shorts/Reels requests.

Knowing the triggers helps you steer it: say "Remotion" explicitly if you want the skill; otherwise, Claude may use generic CSS animation.

Trigger words: Remotion, React video, programmatic composition, MP4 via code.

With Remotion, you can create presentation videos, animated intros, data visualizations, and social media posts directly from your codebase — no Adobe, no Lottie, no manual design. Each video is a reusable React component.

The produced video can be used directly on the page (via <video>), embedded as a hero, or published on YouTube/Instagram — all from the same code.

Video as a component, dynamic data, reuse, CI/CD for video.

Uses @remotion/core, @remotion/player and optionally @remotion/media-utils. Compositions are registered in Root.tsx, each scene is a component with useCurrentFrame(). Export via npx remotion render or Remotion Lambda. Animation uses interpolate(frame, [0,30], [0,1]) e spring({frame, fps, config}).

Understanding interpolate and spring is key: interpolate maps frames to values, spring creates natural physics. Both make animation predictable and adjustable.

@remotion/core, Root.tsx, useCurrentFrame, interpolate, spring, npx remotion render.

Create a 30s Remotion composition (30fps) with: an animated intro (text appearing with spring), 3 feature scenes of 5s each, and an outro with a CTA. Use Sequence to organize scenes. Colors: background #0f0f0f, accent #a855f7.

Specifying the duration, fps, number of scenes, and palette in the prompt saves iterations.

Specify total duration, fps, number of Sequences, color palette.

The MP4 generated by Remotion feeds into the 3d-animation-creator (source video for scrolling) and the HyperFrames (HTML→MP4 pipeline). Don’t use it for real-time web animations — use animation-designer. It doesn’t use FFmpeg directly (that’s HyperFrames).

Remotion creates the content; 3d-animation-creator and HyperFrames consume the generated MP4.

Remotion creates MP4 → 3d-animation-creator consumes it → HyperFrames distributes it.

seedance-loop-prompt: generates structured prompts for video AI (Seedance) to create seamless background loops—the beginning and end of the video connect perfectly. HyperFrames (explainer video): a skill that records an animated HTML page frame by frame with headless Chrome and assembles the MP4 with FFmpeg—it turns HTML into exportable video.

Together, they cover both directions: seedance creates video for the web; HyperFrames turns the web into video for export. FFmpeg is the shared engine.

Seamless loops, structured prompt for AI video, HTML→MP4, headless Chrome, FFmpeg.

seedance-loop-prompt triggers when you ask “create a prompt for a looping video,” “seamless background,” “looping video prompt,” or mention Seedance. HyperFrames triggers with “create an explainer video,” “record HTML as video,” “HTML to MP4,” “animated Shorts,” or “video for INEMA.CLUB.”

The triggers are distinct: seedance = prompt for a generative AI; HyperFrames = record the animated page itself.

seedance: “seamless loop”; HyperFrames: “explainer video,” “HTML→MP4.”

seedance provides a ready-to-use prompt in 7 blocks (SCENE, CAMERA, ACTION ARC, TEXT, LIGHTING, LOOP SEAL, TECHNICAL) that you paste into the video AI to get a cinematic loop. HyperFrames produces a high-quality MP4 from any animated HTML page — ideal for Shorts, intros, and demos.

With seedance, you get premium backgrounds without a stock video library. With HyperFrames, you can turn any HTML course into a video ready to publish on YouTube.

Prompt structured in 7 blocks, cinematic loop, HTML→MP4 for Social Media.

seedance-loop-prompt is plain text: it interprets your brief and assembles the prompt into 7 blocks with strict rules (no on-screen text, beginning = end for the loop, no cuts). HyperFrames uses: headless Chrome to capture each animation frame → FFmpeg to assemble the frames into an MP4 (ffmpeg -framerate 30 -i frame_%04d.png -c:v libx264 -pix_fmt yuv420p output.mp4). Prerequisites already installed: Chrome, FFmpeg, Python.

FFmpeg appears in almost every module in this track: extracts frames (3.2), assembles frames (3.4), renders (3.3). It's the central video tool on the command line.

Chrome headless, ffmpeg -framerate, libx264, yuv420p, prerequisites installed.

Two ready-to-use prompts: (1) For seedance: "Create a prompt for a background loop: neon data forest, slow orbital camera, cyberpunk purple and cyan atmosphere, 6 seconds, no text on screen." (2) For HyperFrames: "Record the /tmp/intro.html page as a 15-second video, 30fps, 1080x1920 resolution for Shorts. Use headless Chrome and FFmpeg."

Seeing the two prompts side by side makes their different purposes clear: one generates a prompt for an external AI; the other records the local page.

Visual brief for seedance; path + resolution + fps for HyperFrames.

seedance provides the background for pages recorded by HyperFrames. HyperFrames works well with animation-designer (a richer animated page = a more impactful video) and remotion (an alternative when you want a version-controlled video in React). The companion course HyperFrames (skill-hyperframes-videos) covers this entire pipeline in 4 tracks.

Seedance doesn’t generate the video — it generates the prompt. You need an AI video tool (Seedance, Sora, etc.) to execute it. HyperFrames doesn’t edit existing videos — it records HTML pages.

Related HyperFrames course; seedance ≠ video generator; HyperFrames ≠ video editor.