Skip to content

Commit 452596e

Browse files
committed
docs: add spatial depth to 1600-style template
Address the '2D slideshow' feel: every scene now plays on space instead of being a flat panel. - continuous camera per scene (keyframed zoom + focal origin drift, and a subtle roll on two scenes) — no more static frames - three parallax planes via style.depth on scene direct children: a deep tone-on-tone ghost word (~0.4), the content (1.0), floating foreground accents (~1.75) — planes separate as the camera moves - 3D rotational entrances (flip_in_x/y, tilt_in with perspective and a hinge transform-origin) instead of flat slides; they resolve face-on so the type stays legible - camera-roll bleed avoided by keeping a covering zoom during rotation (documented in the style rule) Rule updated with the depth/camera layer.
1 parent 742c2bc commit 452596e

2 files changed

Lines changed: 173 additions & 49 deletions

File tree

.claude/skills/rustmotion/rules/1600-brutalist-style.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,20 @@ Recette pour produire des vidéos dans l'esprit des studios de motion design typ
2121
- **Transitions entre scènes** : franches et directionnelles — `wipe_up` / `wipe_left` / `wipe_right` / `wipe_down` / `slide`, durée 0.35s. Alterner les directions pour le rythme.
2222
- **Chiffres** : `counter` (`from`/`to`, `prefix`), il monte sur la durée de la scène. Réserver sa hauteur (`"height"` ≈ font-size + 10) et un `gap` ≥ 24 avec son label, sinon le label remonte sur le chiffre (le counter hors `card` n'a pas de correction de baseline).
2323

24+
## Profondeur & caméra — jouer sur l'espace
25+
26+
Sans ça, le style est un diaporama 2D. Trois leviers, cumulés sur chaque scène :
27+
28+
1. **Caméra en mouvement continu** (`scene.camera.keyframes`, propriétés `zoom` / `origin.x` / `origin.y` / `rotation`) : un push-in ou pull-out lent (zoom 1.0↔1.14) + une dérive du point focal (`origin`) donne une vie permanente. Alterner push-in / pull-out d'une scène à l'autre.
29+
2. **Plans de profondeur** (`style.depth` sur les enfants **directs** de la scène, qui deviennent les plans de parallaxe) : structurer chaque scène en 3 plans absolus plein cadre —
30+
- **fond profond** `depth ~0.4` : un mot/chiffre géant ton-sur-ton (`overflow: hidden` sur le plan pour le clipper au cadre) ;
31+
- **contenu** `depth 1.0` : la typo principale ;
32+
- **avant-plan** `depth ~1.75` : petites formes d'accent avec `float_3d` en boucle.
33+
Au mouvement caméra, les plans se séparent → vraie profondeur.
34+
3. **Entrées en rotation 3D** sur la ligne clé : `flip_in_x` / `flip_in_y` / `tilt_in` (+ `perspective` 900–1400 sur l'élément, `transform-origin` pour pivoter sur une charnière), qui se résolvent face caméra → lisible une fois posé.
35+
36+
**Piège du bleed** : une `rotation` caméra (ou un zoom < 1.0) révèle le `video.background` aux coins. Garder un zoom couvrant pendant toute la rotation (`zoom ≥ ~1.06` pour ±2°), ou fixer `video.background` à la couleur de la scène. Un `origin` qui dérive à zoom 1.0 ne bleede pas (l'origin n'a d'effet qu'avec du zoom).
37+
2438
## Structure d'une scène type
2539

2640
```json

0 commit comments

Comments
 (0)