claude-design-hyperframes

仓库: heygen-com/hyperframes
安装量: 2K
排名: #2575

安装

npx skills add https://github.com/heygen-com/hyperframes --skill claude-design-hyperframes
Claude Design + HyperFrames
For this project, your medium is
HyperFrames compositions
plain HTML + CSS + a paused GSAP timeline. A separate CLI ( npx hyperframes render index.html ) turns the HTML into an MP4. You are authoring the HTML files — the user runs the CLI locally. You do NOT need a CLI environment to produce these files. HyperFrames replaces your default video-artifact workflow for this project. When the user asks for a video, animation, launch teaser, editorial explainer, product tour, social reel, or any motion deliverable: Do NOT call copy_starter_component with kind: "animations.jsx" . The animations.jsx starter is the wrong format here — HyperFrames uses plain HTML + GSAP, not React Sprites. Do NOT invoke the built-in "Animated video" skill. HyperFrames replaces it for this project. Do NOT use React, Babel, or
<script type="text/babel"> . Compositions are plain HTML; animation state lives on a paused GSAP timeline registered on window.__timelines . Do NOT hand-roll a 1920×1080 scale-to-fit stage wrapper. (loaded in preview.html ) handles viewport scaling and letterboxing for you. Your first action on a new brief is to read the brief, ask a clarifying question if it's sparse, and commit to a visual identity — not to copy a starter component. Users attach this skill to a Claude Design chat, drop brand assets (screenshots, PDFs, reference videos, pasted palettes), and describe a video. You return index.html , preview.html , README.md , and DESIGN.md as a downloadable ZIP. The user runs npx hyperframes render index.html locally to produce the MP4. Work through the five steps below — each has a gate you must pass before moving to the next. Approach Before touching HTML, think in phases. Skipping phases is the single biggest quality problem in AI-generated video. Brief — what does the user want? What have they given you to synthesize from? Identity — what does this video LOOK like? palette, type, motion character, committed in one document before any HTML. Beats — what happens in what order? scenes, durations, verbs per element, mid-scene activity. Build — static layout first, then motion, then self-review. Deliver — preview shell + README for local render + caveats. Step 1: Understand the brief Gate: You can name the subject, the duration, the aspect ratio, and at least one source of visual direction (attachment, pasted palette/type/copy, named aesthetic, or clarifying-question answer). If you can't — you don't have enough to build. Inputs, in order of reliability Attachments (strongest visual source). .fig Figma files, PDFs (brand guidelines, spec docs), .docx / .pptx , images/screenshots, reference video stills. Claude Design reads these natively with detail preserved. Mine for palette, typography, spacing, UI chrome, tone of voice. Pasted content. Hex codes, typefaces, copy samples, scripts, pasted style guides. Authoritative for what it covers. Research. When a brand, product, or topic is named, web_search and web_fetch aggressively. Static pages fetch fine — company blogs ( .com/blog ), press pages, Wikipedia, Crunchbase, TechCrunch, docs sites — and yield (a) tone/positioning, (b) real copy (taglines, feature names, product language), (c) sometimes hex codes + typeface names from press kits. SPA marketing homepages (React/Vue/Angular) are the one weak case — they return near-empty shells because JavaScript isn't executed. Pivot to the brand's blog / press / Wikipedia when the homepage returns little. URLs the user provided. Start there, expand outward. Combine channels. Strong attachments + light research gives you brand-accurate visuals AND brand-accurate copy. Mechanical trigger — ask ONE short question if the brief is sparse If the prompt contains NONE of the following, ask one clarifying question before generating: A file attachment A pasted hex code or named typeface A named aesthetic / style / movement / director / genre A specific brand with a well-known visual identity (Apple, Linear, Stripe, Notion, Figma, Vercel, Tesla, Spotify, etc.) The words "go", "just build", "make it", "surprise me", "ship it" A follow-up turn continuing an existing composition Do NOT rationalize past this check. "The user's email domain is the brand so I know what they want" is NOT a valid skip condition. "It's a well-known company so I'll just build" is NOT valid unless the brand is in the list above. Send one short message (4–6 lines) with concrete options: To make this look like yours — drop any of these (or describe in words): A screenshot or two of your product, site, or an ad you like. A brand PDF / style guide. A reference video for pacing / color / energy. A vibe in words — "clinical and cold" , "loud and fast" , "a particular director / movie" . A must-have — a specific shader, transition, text effect, or element you already want. Or say "just build" and I'll commit to . Wait for the reply. When the user answers, incorporate fully. When they say "just build" / "go" / "ship it" / "surprise me", commit to the aesthetic you offered and proceed. Step 2: Commit to a visual identity Gate: DESIGN.md exists in the project directory with palette, typography, and motion character defined. Visual Identity Gate Commit to ONE aesthetic and write DESIGN.md before index.html . The document is a thinking step, not a deliverable template. DESIGN.md contains: Palette. Name each color's role (bg, ink, accent, muted). Use exact hex values or OKLCH. One accent hue, tinted neutrals. Typography. Display face + body face. See banned list below — and look beyond the standard pairs. Weight contrast must be dramatic (300 vs 900, not 400 vs 700). Video sizes: 60px+ headlines, 20px+ body, 16px+ data labels. Motion character. Pacing (fast/medium/slow/cinematic), primary transition family (CSS vs shader, which shader), easing defaults, what NOT to do. Reference the tokens via CSS custom properties on :root in index.html . Anti-monoculture Training-data defaults every LLM reaches for. Commit to something the brief specifically calls for instead. Don't default to warm editorial (cream paper + serif + terracotta accent). Don't default to generic dark-mode tech (black + violet accent + Inter + geometric sans). Banned fonts: Inter, Inter Tight, Roboto, Open Sans, Noto Sans, Arimo, Lato, Source Sans, PT Sans, Nunito, Poppins, Outfit, Sora, Fraunces, Playfair Display, Cormorant Garamond, Bodoni Moda, EB Garamond, Cinzel, Prata, Syne. Full list and reasoning: skills/hyperframes/references/typography.md . Banned pairings (observed AI defaults): Fraunces + JetBrains Mono (every test-run of an editorial brief lands here); Inter + anything; Playfair + Lato. Pick different faces each time. Lazy defaults to question: gradient text, left-edge accent stripes, cyan-on-dark, pure #000 / #fff , identical card grids, everything centered with equal weight. See skills/hyperframes/house-style.md for the full list. Step 3: Plan the beats Gate: You can list every scene, its duration, and at least one verb per animated element in that scene. If a verb is missing, the element isn't designed yet. Scene plan + pacing Hard ceiling: no scene longer than 5 seconds unless there's a deliberate pacing reason. Scenes in the 6–12s range read as draggy slides; viewers feel the stall. Only go longer than 5s when you can name the reason — a deliberate hold on a hero frame, a long cinematic push, a silence beat, a counter that animates over 6+ seconds to feel substantial. Default to quick. Slow down with intention. Hard floor: scene must last at least as long as a viewer needs to read its text. A 2-second scene with a 20-word paragraph is broken — viewers cannot read it before the transition fires. The "too short" failure is as real as "too long." Reading-time budget per scene: Displayed text (visible during the scene) Minimum scene duration No text (hero image, icon, decorative) 1.5–2s 1–3 words (kicker, label, number, short headline) 2–3s 4–10 words (short headline + tiny subhead) 3–4s 11–20 words (a full sentence or two short lines) 4–6s 21–35 words (multi-line paragraph, bullet list) 6–8s 35+ words (dense explainer text) Split into two scenes. A single scene should not ask the viewer to read more than ~35 words. On top of reading time, add entrance-animation buffer: 0.6–1.0s for the text to finish entering before the viewer can start reading it. Practical formula: scene_duration ≥ entrance_buffer + (word_count × 0.25s) + 0.5s transition tail , with a minimum of 1.5s. Apply this per scene. If scene-3's display text is 18 words of serif body copy, scene-3 needs ~5s, not 3s. If scene-12 is a single-word slam ("Design."), 2s is fine — maybe ideal. Last readable element must finish entering by the 50% mark of the scene. That gives the viewer the second half of the scene to actually read the text before the transition starts. If the last tl.from("#s5-sub", …) on a 4-second scene finishes at t=3.5s, the viewer has only 0.5s to read — not enough. Pull entrances earlier or lengthen the scene. Anti-pattern: dividing total duration by scene count AND ignoring per-scene reading-time. A 2-minute video ÷ 10 scenes = 12-second scenes (too long per hard ceiling); or ÷ 60 scenes = 2-second scenes (too short if any of them has sentence-length text). Better: pick a scene count targeting 3–5s average, then ADJUST each scene up or down based on what it has to show. Short scenes for punches, images, and kickers. Medium scenes for headlines. Longer scenes for body copy or bullet lists. Video length Target scene count Avg scene Notes 10–15s social ad 5–8 2–3s Relentless cuts, every scene is a punch 20–30s teaser 8–12 2–4s Open / build / payoff / close, varied 30–60s explainer 12–20 3–5s Each beat its own scene — don't combine two ideas 60–120s narrative 24–40 3–5s Dense pacing. Think YouTube explainer, not slideshow 120–240s long-form 40–70 4–5s Split into sub-compositions, each act ~8–14 scenes Four mechanical checks before closing Step 3: Per-scene reading-time check: count the words of display text in each scene. Does scene.data-duration satisfy the reading-time budget above? If not, extend the scene (if budget headroom exists) or split the text across two scenes. Last-readable-element check: for each scene, find the last tl.from on a readable text element. Does it finish (start + duration) before the 50% mark of the scene? If not, pull the entrance earlier. If a scene's data-duration exceeds 5 seconds, write one sentence justifying why it holds that long. If you can't, split it into two scenes with different beats. Model the rhythm as a wave, not a flat line. short-short-LONG-short-short-LONG-short reads as intentional pacing. flat-flat-flat-flat reads as a slideshow. Same-duration across scenes = dividing, not designing. Build / Breathe / Resolve (per scene) Every scene > 4 seconds has three phases. Dumping everything in the build and leaving nothing for breathe/resolve is the #1 quality failure. Phase When What Build 0 – 30% Elements enter, staggered. Don't dump everything at once. Offset first tween 0.1–0.3s. Breathe 30% – 70% Content visible, alive with at least ONE ambient motion. No element stands still here. Resolve 70% – 100% A beat resolves — accent pulse, number lands, secondary element arrives, decisive end. Full motion theory (easing as emotion, direction rules, speed as weight, transitions as meaning): skills/hyperframes/references/motion-principles.md . Animation verbs Every element gets a verb. If you can't name the verb, the element is not yet designed. Energy Verbs Example High impact SLAMS, CRASHES, PUNCHES, STAMPS, SHATTERS "$1.9T" SLAMS in from left at -5° Medium energy CASCADE, SLIDES, DROPS, FILLS, DRAWS Three cards CASCADE in staggered 0.3s Low energy types on, FLOATS, morphs, COUNTS UP, fades in Counter COUNTS UP from 0 to 135K Mid-scene activity (kills the "animated slides" failure) Every visible element must have motion during the Breathe phase — not just an entrance. A still image on a still background is a JPEG with a progress bar. Element type Mid-scene activity Image / screenshot Slow zoom ( scale: 1 → 1.03-1.05 over scene duration), slow pan, or Ken Burns Stat / number Counter animates from 0 to target Chart / bars Bars fill in sequence; line draws via strokeDashoffset Logo / lockup Subtle shimmer sweep, gentle scale pulse, or audio-reactive (if music present) Background decoratives Radial glow breathing, gradient shift, grain drift, hairline rule pulse Any persistent element Subtle float ( y: ±4-6px , sine.inOut , yoyo: true, repeat: 1 ) so it's alive instead of frozen Anti-pattern: entrance tween at t=0.5, element never moves again for the remaining 4+ seconds. If that's the shape of a scene, it's a slideshow, not video. Cinematic planning, not CSS planning Write each scene as an experience first, specs second. The difference: Mediocre: "Dark navy background. '$1.9T' in white, 280px. Logo top-left. Wave image bottom-right." Great: "Camera is already mid-flight over a vast dark canvas. The gradient wave sweeps across the frame like aurora borealis — alive, shifting. '$1.9T' SLAMS into existence with such force the wave ripples in response. This isn't a slide — it's a moment." The first describes pixels. The second describes an experience. Write the second, then figure out the pixels. Step 4: Build Gate: Every composition you wrote passes the self-review checklist at the end of this section. Layout Before Animation Static layout FIRST, motion SECOND. Write the scene's HTML + CSS as if it were a static poster — where every element LANDS at its most-visible moment. Verify the static layout works in a browser (no GSAP, no JS). Only after the layout is correct, add timeline + animations. gsap.from() animates FROM offscreen/invisible TO the CSS position. The CSS position is the ground truth. Scene containers use .scene-content flex centering, not absolute positioning on inner content. Keep decoratives (backgrounds, glows, hairlines, grain) OUTSIDE .scene-content . Keep animated content INSIDE .scene-content . Clip contract Every scene is a HyperFrames clip. EVERY scene has a
wrapper — not just scene-1. This is the single most-missed rule in output audits. The wrapper exists so HyperShader.captureIncomingScene() can hide scene content during html2canvas capture, preventing pre-animation from-states from leaking into the WebGL texture. Without the wrapper on a non-first scene, you'll see boxes, clipped text, or empty placeholders during the transition INTO that scene. < div class = " scene clip " id = " s1 " data-start = " 0 " data-duration = " 5 " data-track-index = " 0 " > < div class = " bg-grain " > < div class = " bg-vignette " > < div class = " scene-content " > < h1 id = " s1-title " > … < p id = " s1-sub " > … < div class = " scene clip " id = " s2 " data-start = " 5 " data-duration = " 5 " data-track-index = " 0 " style = " opacity : 0 ; " > < div class = " bg-grain " > < div class = " scene-content " > < h1 id = " s2-title " > … < p id = " s2-sub " > … Data attributes Every timed element (scene, image, video, audio, sub-composition host) is a "clip" and must carry: Attribute Required Values id yes unique identifier class="clip" yes literal string (scenes use "scene clip" ) data-start yes seconds, or clip-id reference ( "el-1" , "intro+2" ) data-duration required for img/div/compositions seconds. video/audio default to media duration data-track-index yes integer. same-track clips cannot overlap in time data-media-start no trim offset into source (seconds) for video/audio data-volume no 0–1 (default 1) for audio data-track-index is TIMELINE layering (which clip's timeline wraps which) — not visual z-order. Use CSS z-index for stacking. Same-track clips can't overlap in time; use different tracks for simultaneous clips or put them on the same track with non-overlapping windows. Composition roots (the outer index.html and any