From 40774cb3ec66db4dca6e64c6a06d6b21cdf520fc Mon Sep 17 00:00:00 2001 From: ukimsanov Date: Wed, 20 May 2026 15:03:06 -0700 Subject: [PATCH] refactor(skill): trim techniques.md to actual techniques (13 from 20) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Removed 7 entries that are not techniques. They're either UI style treatments, hand-rolled CSS templates, or named effects — different kinds of artifacts that don't belong under the same "primitive animation techniques" frame: - 12. Frosted Glass Panels → style treatment - 15. Impact Line on Text Drop → named effect - 16. Device Mockups (Laptop + Phone) → hand-rolled CSS template - 17. Aurora Gradient Backgrounds → style treatment - 18. Floating Particles → style treatment - 19. Terminal UI with Typing → hand-rolled CSS template - 20. Moodboard / Editorial Layout → hand-rolled layout The 13 entries that remain (SVG drawing, Canvas 2D, CSS 3D, Per-Word Kinetic Type, Lottie, Video Compositing, Char Typing, Variable Font, MotionPath, Velocity-Matched Transitions, Audio-Reactive, Clip-Path Reveal, WebGL Shader Art) are real primitives — animation building blocks an agent composes into beats, not finished recipes to lift verbatim. Updated the header to say 13 and point at `registry/blocks/` for pre-built UI templates instead of pretending they're techniques. ToC table and section numbering both updated. Net: -361 / +6 lines. --- skills/hyperframes/references/techniques.md | 367 +------------------- 1 file changed, 6 insertions(+), 361 deletions(-) diff --git a/skills/hyperframes/references/techniques.md b/skills/hyperframes/references/techniques.md index 6226b4e28..c9495c43c 100644 --- a/skills/hyperframes/references/techniques.md +++ b/skills/hyperframes/references/techniques.md @@ -1,8 +1,8 @@ # Visual Techniques Reference -20 proven techniques from production HyperFrames videos. Use these in your storyboard and compositions to create visually rich, professional output. Each technique includes a minimal code pattern you can adapt. +13 primitive animation techniques from production HyperFrames videos — SVG drawing, kinetic typography, variable fonts, WebGL shaders, motion-path, etc. Compose these into beats; they are the building blocks, not finished recipes. Each entry includes a minimal code pattern you can adapt. -These are NOT advanced — they're standard motion design patterns that every composition should use at least 2-3 of. +These are NOT advanced — they're standard motion design patterns that every composition should use at least 2-3 of. For pre-built UI templates (terminal chrome, device mockups, moodboard layouts), look in the `registry/blocks/` directory instead — those are recipes, not techniques. **These are starting points, not copy-paste templates.** Every code pattern below is a minimal working example from a real production video. Adapt them to your needs — change colors, sizes, timings, easings, element counts, layout. Combine techniques, mix parts from different patterns, invent variations. The goal is to understand the PRINCIPLE behind each technique so you can build something original, not to reproduce these examples exactly. @@ -27,15 +27,8 @@ These are NOT advanced — they're standard motion design patterns that every co | 9 | **GSAP MotionPathPlugin** | Elements follow SVG curves, orbital motion, spirals | Dynamic entrances, connector animations | | 10 | **Velocity-Matched Transitions** | Outgoing blur/translate matches incoming for seamless cuts | Beat transitions, scene changes | | 11 | **Audio-Reactive Animation** | Elements pulse to narration frequency bands | Background textures, text glow, ambient motion | -| 12 | **Frosted Glass Panels** | `backdrop-filter: blur` + translucent backgrounds + inset glow | Premium UI cards, feature overlays, modals | -| 13 | **Clip-Path Reveal Masks** | Fixed window that content slides through (text/images enter from one side) | Headline intros, image reveals, wipe effects | -| 14 | **WebGL Fragment Shader Art** | Full GPU generative backgrounds — FBM domain warp, cosine palettes | Hero backgrounds, atmospheric scenes | -| 15 | **Impact Line on Text Drop** | Horizontal line expands at text landing point — physical weight feel | Title cards, stat reveals, single-word emphasis | -| 16 | **Device Mockups (Laptop + Phone)** | CSS-only MacBook/iPhone with realistic chrome, scrolling content | Product showcases, website demos, app reveals | -| 17 | **Aurora Gradient Backgrounds** | Multi-blob radial gradients that drift — depth without Canvas/WebGL | Dark cinematic scenes, CTA backgrounds | -| 18 | **Floating Particles** | CSS particles with glow shadows, staggered float | Ambient texture, premium atmosphere | -| 19 | **Terminal UI with Typing** | macOS chrome + typed commands + scaffold output lines | Developer CTAs, CLI demos, product onboarding | -| 20 | **Moodboard / Editorial Layout** | Paper texture, decorative rules, pinned cards at angles, connecting lines | Brand reels, design showcases, editorial content | +| 12 | **Clip-Path Reveal Masks** | Fixed window that content slides through (text/images enter from one side) | Headline intros, image reveals, wipe effects | +| 13 | **WebGL Fragment Shader Art** | Full GPU generative backgrounds — FBM domain warp, cosine palettes | Hero backgrounds, atmospheric scenes | --- @@ -415,41 +408,7 @@ Keep text/logo intensity subtle (≤5% scale, ≤30% glow) — audio-reactive mo --- -## 12. Frosted Glass Panels - -macOS-style translucent panels with blur and depth. Premium UI treatment for cards, overlays, and modals. - -```html -
-

Feature

-

Description text

-
- -``` - -The gradient background provides subtle directional light. The inset shadow adds a top edge highlight. Works on both dark and light backgrounds — adjust rgba values accordingly. - ---- - -## 13. Clip-Path Reveal Masks +## 12. Clip-Path Reveal Masks A fixed window that content slides through — text or images enter from one side and are clipped by an invisible boundary. Different from SVG path drawing: the mask is static, the content moves. @@ -482,7 +441,7 @@ Variations: `clip-path: circle(0% at 50% 50%)` → `circle(100%)` for iris revea --- -## 14. WebGL Fragment Shader Art +## 13. WebGL Fragment Shader Art Full GPU generative backgrounds — domain-warped FBM noise, cosine palette coloring, iridescent organic patterns. Far richer than Canvas 2D. @@ -553,320 +512,6 @@ Always include a Canvas 2D gradient fallback for environments without WebGL. --- -## 15. Impact Line on Text Drop - -Text drops in with overshoot bounce. At the moment of impact, a thin horizontal line expands outward from the baseline — sells the physical weight of the landing. - -```html -
hyperframes
-
- - -``` - -The line appears slightly after the text lands (0.15s offset). It expands, then fades while growing wider — simulating dissipating energy. - ---- - -## 16. Device Mockups (Laptop + Phone) - -CSS-only laptop and phone frames with realistic chrome, shadows, and perspective. Content scrolls inside the screen. - -```html - -
-
-
-
- -
-
-
-
-
-
- -``` - -Animate the content scrolling inside the screen with `tl.to(".site-img", { y: -SCROLL_DISTANCE, duration: 5, ease: "power1.inOut" })`. Add inspector callout annotations that appear at each scroll stop. - -For **phone mockups**: same structure but with dynamic island, status bar, home indicator, and 3D perspective via `transform: perspective(2200px) rotateY(-12deg)`. - ---- - -## 17. Aurora Gradient Backgrounds - -Multi-blob radial gradients that drift slowly — creates depth and atmosphere without Canvas/WebGL complexity. - -```html -
- - -``` - -Derive colors from DESIGN.md's brand palette. 4-5 blobs at different positions create natural color mixing. Use brand accent as one blob, complementary tones for the rest. - ---- - -## 18. Floating Particles - -CSS-only particles with absolute positioning, glow shadows, and staggered float animation. Adds premium ambient texture. - -```html -
-
-
-
- -
- - -``` - ---- - -## 19. Terminal UI with Typing - -macOS-style terminal chrome (traffic light dots) with typed commands, scaffold output lines, and cursor blink. Use for developer-focused videos, CTA sections, and product demos. - -```html -
-
- - - - Terminal — zsh -
-
-
- ❯ - - | -
-
-
Creating project...
-
index.html
-
meta.json
-
✓ Done
-
-
-
- -``` - ---- - -## 20. Moodboard / Editorial Layout - -Print-inspired compositions with paper texture, decorative rules, pinned cards at angles, and connecting gold lines. Works for brand reels and design-forward content. - -```html -
-
-
-
- BRAND NAME -
-
-
- -
Hero Section
-
- -
- -``` - -Pin cards at slightly random angles (±2-5deg). Connect related cards with thin gold SVG lines that draw in. Use paper-like warm backgrounds (#f1ece2, #fbf8f1). - ---- - ## Easing Vocabulary GSAP offers a deep easing library. Every composition should use at least 3 different easings — using `power2.out` for everything produces flat, monotonous motion. Think of easings as tone of voice: a video that only whispers is boring; one that varies between whisper, normal, and punch is engaging.