| 1 | # Animations catalog |
| 2 | |
| 3 | All animations live in `assets/animations/animations.css`. Apply them by |
| 4 | adding `class="anim-<name>"` OR `data-anim="<name>"` to any element |
| 5 | (`runtime.js` re-triggers `data-anim` elements whenever a slide becomes |
| 6 | active, so you get the entry effect every time you navigate onto the slide). |
| 7 | |
| 8 | Open `templates/animation-showcase.html` to browse all of them — one slide |
| 9 | per animation, auto-playing on slide enter. Press **A** on any slide to cycle |
| 10 | a random animation on the current page. |
| 11 | |
| 12 | ## Directional fades |
| 13 | |
| 14 | | name | effect | use for | |
| 15 | |---|---|---| |
| 16 | | `fade-up` | Translate from +32 px, fade. | Default for paragraph + card entry. | |
| 17 | | `fade-down` | Translate from -32 px, fade. | Headers / banners / callouts. | |
| 18 | | `fade-left` | Translate from -40 px. | Left column in a two-column layout. | |
| 19 | | `fade-right` | Translate from +40 px. | Right column in a two-column layout. | |
| 20 | |
| 21 | ## Dramatic entries |
| 22 | |
| 23 | | name | effect | use for | |
| 24 | |---|---|---| |
| 25 | | `rise-in` | +60 px rise + blur-off. | Slide titles, hero headlines. | |
| 26 | | `drop-in` | -60 px drop + slight scale. | Banners, alert bars. | |
| 27 | | `zoom-pop` | Scale 0.6 → 1.04 → 1. | Buttons, stat numbers, CTAs. | |
| 28 | | `blur-in` | 18 px blur clears. | Cover page reveal. | |
| 29 | | `glitch-in` | Clip-path steps + jitter. | Tech / cyber / error states. | |
| 30 | |
| 31 | ## Text effects |
| 32 | |
| 33 | | name | effect | use for | |
| 34 | |---|---|---| |
| 35 | | `typewriter` | Monospace-like type reveal. | One-liners, slogans. | |
| 36 | | `neon-glow` | Cyclic text-shadow pulse. | Terminal-green / dracula themes. | |
| 37 | | `shimmer-sweep` | White sheen passes across. | Metallic buttons, premium cards. | |
| 38 | | `gradient-flow` | Infinite horizontal gradient slide. | Brand wordmarks. | |
| 39 | |
| 40 | ## Lists & numbers |
| 41 | |
| 42 | | name | effect | use for | |
| 43 | |---|---|---| |
| 44 | | `stagger-list` | Children rise-in one-by-one. | Any `<ul>` or `.grid`. | |
| 45 | | `counter-up` | Number ticks 0 → target. | KPI, stat-highlight pages. | |
| 46 | |
| 47 | Counter markup: |
| 48 | ```html |
| 49 | <span class="counter" data-to="1248">0</span> |
| 50 | ``` |
| 51 | |
| 52 | ## SVG / geometry |
| 53 | |
| 54 | | name | effect | use for | |
| 55 | |---|---|---| |
| 56 | | `path-draw` | Strokes draw themselves. | Lines, arrows, diagrams. | |
| 57 | | `morph-shape` | Path `d` morph. | Background shapes. | |
| 58 | |
| 59 | Put `class="anim-path-draw"` on `<svg>`; every path/line/circle inside gets drawn. |
| 60 | |
| 61 | ## 3D & perspective |
| 62 | |
| 63 | | name | effect | use for | |
| 64 | |---|---|---| |
| 65 | | `parallax-tilt` | Hover → 3D tilt. | Hero cards, product shots. | |
| 66 | | `card-flip-3d` | Y-axis 90° flip. | Before/after reveal. | |
| 67 | | `cube-rotate-3d` | Rotate in from a cube side. | Section dividers. | |
| 68 | | `page-turn-3d` | Left-hinge page turn. | Editorial / story flows. | |
| 69 | | `perspective-zoom` | Pull from -400 Z. | Cover openings. | |
| 70 | |
| 71 | ## Ambient / continuous |
| 72 | |
| 73 | | name | effect | use for | |
| 74 | |---|---|---| |
| 75 | | `marquee-scroll` | Infinite horizontal loop. | Client logo strips. | |
| 76 | | `kenburns` | 14 s slow zoom on images. | Hero backgrounds. | |
| 77 | | `confetti-burst` | Pseudo-element sparkle burst. | Thanks / win pages. | |
| 78 | | `spotlight` | Circular clip-path reveal. | Big reveal moments. | |
| 79 | | `ripple-reveal` | Corner-origin ripple reveal. | Section transitions. | |
| 80 | |
| 81 | ## Respecting motion preferences |
| 82 | |
| 83 | All animations are disabled automatically when |
| 84 | `prefers-reduced-motion: reduce` is set. Do not override this. |
| 85 | |
| 86 | ## Tips |
| 87 | |
| 88 | - Prefer `data-anim="..."` over `class="anim-..."` so that the runtime |
| 89 | re-triggers the animation whenever the slide becomes active. |
| 90 | - Use at most 1-2 distinct animation types on a single slide. Mixing 5 looks |
| 91 | messy. |
| 92 | - Stagger lists + a single hero entry = clean rhythm. |
| 93 | - For counter-up, pair with `stat-highlight.html` or `kpi-grid.html`. |
| 94 | |
| 95 | ## FX (canvas) |
| 96 | |
| 97 | CSS animations are fire-and-forget entry effects. **FX** are live, continuously |
| 98 | running canvas/DOM effects that start when their slide becomes active and stop |
| 99 | when it leaves. They are loaded by `assets/animations/fx-runtime.js`, which |
| 100 | dynamically pulls every module under `assets/animations/fx/*.js` and watches |
| 101 | `.slide.is-active` to run lifecycle. |
| 102 | |
| 103 | Add to any page: |
| 104 | ```html |
| 105 | <script src="../assets/animations/fx-runtime.js"></script> |
| 106 | ``` |
| 107 | |
| 108 | Then drop one of these into any slide: |
| 109 | ```html |
| 110 | <div data-fx="particle-burst" style="width:100%;height:360px;"></div> |
| 111 | ``` |
| 112 | |
| 113 | The container just needs a size — the FX auto-sizes a canvas to fit with |
| 114 | `ResizeObserver` + DPR correction. Colors read your theme (`--accent`, |
| 115 | `--accent-2`, `--ok`, `--warn`, `--danger`). |
| 116 | |
| 117 | | name | effect | use case | trigger | |
| 118 | |---|---|---|---| |
| 119 | | `particle-burst` | Particles explode from center, gravity + fade, re-bursts every 2.5s. | Reveal moments, stat pages. | `<div data-fx="particle-burst">` | |
| 120 | | `confetti-cannon` | Colored rotating rects arcing from both bottom corners. | Thank you / success pages. | `<div data-fx="confetti-cannon">` | |
| 121 | | `firework` | Rockets from bottom explode into colored sparks, continuous. | Celebration, launch slides. | `<div data-fx="firework">` | |
| 122 | | `starfield` | 3D perspective starfield flying outward. | Sci-fi / deep space backgrounds. | `<div data-fx="starfield">` | |
| 123 | | `matrix-rain` | Falling green katakana + hex columns. | Cyber / security / data theme. | `<div data-fx="matrix-rain">` | |
| 124 | | `knowledge-graph` | Force-directed graph, 28 labeled nodes, ~50 edges, live physics. | Knowledge / RAG / graph slides. | `<div data-fx="knowledge-graph">` | |
| 125 | | `neural-net` | 4-6-6-3 feedforward net with pulses traveling along edges. | ML / model architecture slides. | `<div data-fx="neural-net">` | |
| 126 | | `constellation` | Drifting points, linked when within 150 px, opacity by distance. | Ambient hero backgrounds. | `<div data-fx="constellation">` | |
| 127 | | `orbit-ring` | 5 concentric rings with dots at different speeds, radial glow. | System / planet / layered concepts. | `<div data-fx="orbit-ring">` | |
| 128 | | `galaxy-swirl` | Logarithmic spiral of ~800 particles, slow rotation. | Cover pages, intros. | `<div data-fx="galaxy-swirl">` | |
| 129 | | `word-cascade` | Words fall from top, pile up at bottom. | Vocabulary / concept cloud slides. | `<div data-fx="word-cascade">` | |
| 130 | | `letter-explode` | Heading letters fly in from random directions, loops every ~4.5s. | Big titles, hero text. | `<div data-fx="letter-explode" data-fx-text-value="EXPLODE">` | |
| 131 | | `chain-react` | 8 circles with a domino pulse wave traveling across. | Pipeline / sequential flow. | `<div data-fx="chain-react">` | |
| 132 | | `magnetic-field` | Particles travel bezier/sin curves leaving trails. | Energy / flow / abstract. | `<div data-fx="magnetic-field">` | |
| 133 | | `data-stream` | Rows of scrolling hex/binary text, cyberpunk. | Data, API, security. | `<div data-fx="data-stream">` | |
| 134 | | `gradient-blob` | 4 drifting blurred radial gradients (additive). | Soft hero backgrounds. | `<div data-fx="gradient-blob">` | |
| 135 | | `sparkle-trail` | Pointer-driven sparkle emitter (auto-wiggles if idle). | Interactive reveal, hover canvases. | `<div data-fx="sparkle-trail">` | |
| 136 | | `shockwave` | Expanding rings from center on loop. | Impact, launch, alert. | `<div data-fx="shockwave">` | |
| 137 | | `typewriter-multi` | 3 lines typing concurrently with blinking block cursors (DOM). | Terminal, agent boot log. | `<div data-fx="typewriter-multi" data-fx-line1="> boot...">` | |
| 138 | | `counter-explosion` | Number counts 0 → target, bursts particles, resets after 4s. | KPI reveal, record highs. | `<div data-fx="counter-explosion" data-fx-to="2400">` | |
| 139 | |
| 140 | FX tips: |
| 141 | - One FX per slide is almost always enough. Mix with regular CSS `data-anim` |
| 142 | effects for layered polish. |
| 143 | - The container needs an explicit size (height) — the canvas fills 100%. |
| 144 | - Every module respects theme custom properties. Set `--accent` / `--accent-2` |
| 145 | on the slide or element to recolor on the fly. |
| 146 | - Lifecycle is automatic: entering a slide starts the FX, leaving stops it and |
| 147 | frees the canvas. You can also call `window.__hpxReinit(el)` manually. |
| 148 |