9.7 KiB
Visual Style Library
Named visual identities for HyperFrames videos. Each style is grounded in a real graphic design tradition. Use them to give your video a specific visual personality, not just generic "clean" or "bold."
How to pick: Match mood first, content second. Ask: "What should the viewer FEEL?"
How to use: Reference the style in your scene plan. Translate the style's principles into concrete composition decisions — palette choice, font selection, entrance patterns, transition type, ambient motion feel.
Quick Reference
| Style | Mood | Best for | Primary shader |
|---|---|---|---|
| Swiss Pulse | Clinical, precise | SaaS, data, dev tools, metrics | Cinematic Zoom or SDF Iris |
| Velvet Standard | Premium, timeless | Luxury, enterprise, keynotes | Cross-Warp Morph |
| Deconstructed | Industrial, raw | Tech launches, security, punk | Glitch or Whip Pan |
| Maximalist Type | Loud, kinetic | Big announcements, launches | Ridged Burn |
| Data Drift | Futuristic, immersive | AI, ML, cutting-edge tech | Gravitational Lens or Domain Warp |
| Soft Signal | Intimate, warm | Wellness, personal stories, brand | Thermal Distortion |
| Folk Frequency | Cultural, vivid | Consumer apps, food, communities | Swirl Vortex or Ripple Waves |
| Shadow Cut | Dark, cinematic | Dramatic reveals, security, exposé | Domain Warp |
1. Swiss Pulse — Josef Müller-Brockmann
Mood: Clinical, precise | Best for: SaaS dashboards, developer tools, APIs, metrics
- Black (
#1a1a1a), white, ONE accent — electric blue (#0066FF) or amber (#FFB300) - Helvetica or Inter Bold for headlines, Regular for labels. Numbers large (80–120px)
- Grid-locked compositions. Every element snaps to an invisible 12-column grid
- Animated counters count up from 0. Hard cuts, no decorative transitions
- Transitions: Cinematic Zoom or SDF Iris (precise, geometric)
GSAP signature: expo.out, power4.out. Entries are fast and snap into place. Nothing floats.
Swiss Pulse: Black/white + one electric accent. Grid-locked compositions.
Numbers dominate the frame at 80-120px. Counter animations from 0.
Hard cuts or geometric transitions. Nothing decorative.
2. Velvet Standard — Massimo Vignelli
Mood: Premium, timeless | Best for: Luxury products, enterprise software, keynotes, investor decks
- Black, white, ONE rich accent — deep navy (
#1a237e) or gold (#c9a84c) - Thin sans-serif, ALL CAPS, wide letter-spacing (
0.15em+) - Generous negative space. Symmetrical, centered, architectural precision
- Slow, deliberate. Sequential reveals with long holds. No frantic motion
- Transitions: Cross-Warp Morph (elegant, organic flow between scenes)
GSAP signature: sine.inOut, power1. Nothing snaps — everything glides with intention.
Velvet Standard: Black, white, one rich accent. Thin ALL CAPS type with wide tracking.
Generous negative space. Sequential reveals, long holds.
Cross-Warp Morph transitions. Slow and deliberate — luxury takes its time.
3. Deconstructed — Neville Brody
Mood: Industrial, raw | Best for: Tech news, developer launches, security products, punk-energy reveals
- Dark grey (
#1a1a1a), rust orange (#D4501E), raw white (#f0f0f0) - Type at angles, overlapping edges, escaping frames. Bold industrial weight
- Gritty textures: scan-line effects, glitch artifacts baked into the design
- Text SLAMS and SHATTERS. Letters scramble then snap to final position
- Transitions: Glitch shader or Whip Pan (breaks the rules, feels aggressive)
GSAP signature: back.out(2.5), steps(8), elastic.out(1.2, 0.4). Intentional irregularity.
Deconstructed: Dark grey #1a1a1a + rust orange #D4501E. Type at angles, escaping frames.
Scan-line glitch overlays. Text SLAMS and scrambles into place.
Glitch shader transitions. Industrial and raw — nothing should feel polished.
4. Maximalist Type — Paula Scher
Mood: Loud, kinetic | Best for: Big product launches, milestone announcements, high-energy hype videos
- Bold saturated: red (
#E63946), yellow (#FFD60A), black, white — maximum contrast - Text IS the visual. Overlapping type layers at different scales and angles, filling 50–80% of frame
- Everything is kinetic: slamming, sliding, scaling. 2–3 second rapid-fire scenes
- Text layered OVER footage — never empty backgrounds
- Transitions: Ridged Burn (explosive, dramatic, impossible to ignore)
GSAP signature: expo.out, back.out(1.8). Fast arrivals, hard stops.
Maximalist Type: Red, yellow, black, white — max contrast. Text IS the visual.
Overlapping at different scales, 50-80% of frame. Everything in motion.
Ridged Burn transitions. No static moments — kinetic energy throughout.
5. Data Drift — Refik Anadol
Mood: Futuristic, immersive | Best for: AI products, ML platforms, data companies, speculative tech
- Iridescent: deep black (
#0a0a0a), electric purple (#7c3aed), cyan (#06b6d4) - Thin futuristic sans-serif — floating, weightless, minimal
- Fluid morphing compositions. Extreme scale shifts (micro → macro)
- Particles coalesce into numbers. Light traces data paths through the frame
- Transitions: Gravitational Lens or Domain Warp (otherworldly distortion)
GSAP signature: sine.inOut, power2.out. Smooth, continuous, organic. Nothing hard.
Data Drift: Deep black #0a0a0a with electric purple #7c3aed and cyan #06b6d4.
Thin futuristic type, minimal text. Particles coalesce into numbers.
Gravitational Lens or Domain Warp transitions. Fluid, immersive, otherworldly.
6. Soft Signal — Stefan Sagmeister
Mood: Intimate, warm | Best for: Wellness brands, personal stories, lifestyle products, human-centered apps
- Warm amber (
#F5A623), cream (#FFF8EC), dusty rose (#C4A3A3), sage green (#8FAF8C) - Handwritten-style or humanist serif fonts. Personal, lowercase, delicate
- Close-up framing feel: single element fills the frame. Nothing feels corporate
- Slow drifts and floats, never snaps. Soft organic motion throughout
- Transitions: Thermal Distortion (warm, flowing, like heat shimmer)
GSAP signature: sine.inOut, power1.inOut. Everything breathes.
Soft Signal: Warm amber, cream, dusty rose, sage green. Humanist or handwritten type.
Single elements fill the frame — intimate, never corporate.
Slow drifts and floats throughout. Thermal Distortion transitions.
Nothing should feel hurried or polished.
7. Folk Frequency — Eduardo Terrazas
Mood: Cultural, vivid | Best for: Consumer apps, food platforms, community products, festive launches
- Vivid folk: hot pink (
#FF1493), cobalt blue (#0047AB), sun yellow (#FFE000), emerald (#009B77) - Bold warm rounded type. Pattern and repetition — folk art rhythm and density
- Layered compositions with rich visual texture. Every frame feels handcrafted
- Colorful motion: elements bounce, pop, and spin into place with joy
- Transitions: Swirl Vortex or Ripple Waves (hypnotic, celebratory)
GSAP signature: back.out(1.6), elastic.out(1, 0.5). Overshoots feel intentional.
Folk Frequency: Hot pink #FF1493, cobalt blue, sun yellow, emerald. Bold rounded type.
Pattern and repetition throughout. Layered, dense, handcrafted feeling.
Swirl Vortex or Ripple Waves transitions. Joyful, celebratory energy.
8. Shadow Cut — Hans Hillmann
Mood: Dark, cinematic | Best for: Security products, dramatic reveals, investigative content, intense launches
- Near-monochrome: deep blacks (
#0a0a0a), cold greys (#3a3a3a), stark white + blood red (#C1121F) or toxic green (#39FF14) - Sharp angular text like film noir title cards. Heavy contrast, no softness
- Heavy shadow — elements emerge from darkness. Reveal is the narrative
- Slow creeping push-ins, dramatic scale reveals, silence before the hit
- Transitions: Domain Warp (dissolves reality itself before revealing the next scene)
GSAP signature: power4.in for exits, power3.out for dramatic reveals. The pause before the hit matters.
Shadow Cut: Deep blacks #0a0a0a, cold greys, stark white + one accent (blood red or toxic green).
Sharp angular type, film noir aesthetic. Elements emerge from darkness.
Slow creeping push-ins. Domain Warp transitions. The reveal IS the story.
Mood → Style Guide
| If the content feels... | Use... |
|---|---|
| Data-driven, analytical, technical | Swiss Pulse |
| Premium, enterprise, luxury | Velvet Standard |
| Raw, punk, aggressive, rebellious | Deconstructed |
| Hype, loud, high-energy launch | Maximalist Type |
| AI, ML, speculative, futuristic | Data Drift |
| Human, warm, personal, wellness | Soft Signal |
| Cultural, fun, consumer, festive | Folk Frequency |
| Dark, dramatic, intense, cinematic | Shadow Cut |
Creating Custom Styles
These 8 styles are examples — not constraints. Create your own by:
- Name it after a designer, art movement, or cultural reference
- Palette: 2-3 colors max. Declare explicit hex values
- Typography: One family, two weights. State the role of each
- Motion rules: How fast? Snappy or fluid? Overshoot or precision?
- Transition: Which shader matches the energy?
- What NOT to do: 2-3 explicit anti-patterns for this style
The pattern: named style → palette → typography → motion rules → transition → avoids.