arkaos 5.5.0 → 5.7.0

package/departments/brand/skills/motion-design/references/patterns/state-feedback.md

@@ -0,0 +1,96 @@
+# State & Feedback Patterns
+
+## Button Press
+
+### Playful
+- Press: scale 0.95 (60ms, ease-out); Release: overshoot 1.05 (80ms); Settle: 1.0 (120ms, spring)
+- Secondary: shadow shrinks/grows; color darkens/brightens. Total ~260ms
+
+### Premium
+- Press: scale 0.98 (80ms); Release: 1.0 (150ms, no overshoot)
+- Opacity dims to 90% on press. Total ~230ms
+
+### Corporate
+- Press: scale 0.97 (60ms); Release: 1.0 (100ms); overshoot 0-2%
+- Background darkens 10%. Total ~160ms
+
+## Hover States
+
+| Element | Effect | Duration |
+|---------|--------|----------|
+| Button | Scale 1.02-1.05 | <100ms |
+| Card | Scale 1.01-1.02 + shadow lift | <100ms |
+| Link | Color change + underline | <100ms |
+| Icon | Scale 1.1 + rotation 2-5° | <100ms |
+| Image | Scale 1.03 (overflow hidden) | 150ms |
+
+Hover enter <100ms; hover exit 150-200ms (slower = polished).
+
+## Toggle / Switch
+- Thumb slides (120-180ms, ease-in-out); track color transitions simultaneously
+- Slight squash in movement direction
+- Playful: bounce at destination; Premium: smooth, no overshoot
+
+## Success State
+
+### Checkmark Success
+1. Container: scale 0.9→1.0 (200ms, ease-out-back, 5-10% overshoot)
+2. Checkmark: stroke draw (150ms, ease-out, 100ms delay)
+3. Color: to green (200ms); ambient glow/particles (300ms)
+4. Total: 400-500ms
+
+### Confirmation Badge
+1. Badge scales from 0 (200ms, ease-out-back)
+2. Text fades in (150ms, 50ms delay)
+3. Background pulse (300ms, sine)
+
+### Payment Success
+1. Spinner → checkmark crossfade (200ms)
+2. Checkmark draws (200ms); container → success color (200ms)
+3. Text fades in (200ms, 100ms delay); optional confetti (300-500ms)
+
+## Error State
+
+### Error Shake
+- Horizontal oscillation ±10-15px, 2-3 cycles decreasing amplitude
+- ease-in-out, 300-400ms total; red tint; no overshoot; settles at origin
+
+### Inline Validation
+1. Error text slides down + fades in (200ms)
+2. Border → red (150ms); icon scales in (150ms, 50ms delay)
+3. Optional single shake (200ms)
+
+### Form Submission Error
+1. Button returns to normal (200ms)
+2. Error message slides in (250ms)
+3. Affected fields highlight red (150ms, staggered 30ms)
+4. Smooth scroll to first error (300ms, ease-in-out)
+
+## Loading States
+
+### Spinner
+- Continuous 360°, linear, 1000-1500ms/rev; optional breathing pulse (2-3s)
+
+### Skeleton
+- Gradient sweep L→R, 1500-2000ms; base 10-20% opacity, peak 30-40%
+
+### Progress Bar
+- Width/transform, ease-in-out; optional color milestones + shimmer
+
+### Indeterminate
+- Oscillating position/width, 1500-2500ms, ease-in-out; continuous, never frantic
+
+## Warning State
+1. Yellow/amber border (150ms)
+2. Warning icon scales in (150ms, subtle overshoot)
+3. Optional icon pulse (2-3s, sine); text fades in (200ms, 50ms delay)
+
+## Disabled / Enabled
+
+- **Disabling**: opacity to 50-60% (200ms); optional scale to 98%
+- **Enabling**: opacity to 100% (200ms); optional scale pulse 98%→100%
+
+## Focus States
+- Focus ring: scale 95%→100% + opacity (150ms)
+- Card focus: scale 1.01, shadow increase (150ms)
+- Tab nav focus: <100ms; must work with reduced-motion

package/departments/brand/skills/motion-design/references/reference/property-selection.md

@@ -0,0 +1,95 @@
+# Property Selection
+
+## Position
+
+| Direction | Meaning |
+|-----------|---------|
+| Upward | Growth, improvement, aspiration |
+| Downward | Settling, completion, grounding |
+| Leftward | Regression, backward, departure |
+| Rightward | Progression, forward, arrival |
+| Toward center | Focus, convergence |
+| Away from center | Distribution, expansion |
+
+## Scale
+
+| Direction | Meaning |
+|-----------|---------|
+| Scale up | Importance, activation, proximity |
+| Scale down | Deprioritization, distance |
+| Pulse | Attention, heartbeat, life |
+| Breathing | Presence, waiting |
+
+## Rotation
+
+| Range | Meaning |
+|-------|---------|
+| Small (5-15°) | Subtle adjustment |
+| Medium (45-90°) | Transformation |
+| Full (360°) | Completion, processing |
+| Continuous | Ongoing activity |
+
+## Opacity
+
+| Direction | Meaning |
+|-----------|---------|
+| Fade in | Arrival, enablement |
+| Fade out | Departure, disablement |
+| Partial | Secondary, disabled state |
+
+**Rule**: NEVER opacity alone for important state changes. Combine with position or scale.
+
+## Color
+
+| Transition | Meaning |
+|-----------|---------|
+| To green | Success, go |
+| To red | Error, stop |
+| To blue | Trust, active |
+| To gray | Disabled, inactive |
+| Brightening | Activation, focus |
+| Dimming | Deactivation, background |
+
+## Combined Properties
+
+| Combination | Best For |
+|-------------|----------|
+| Position + Opacity | Content appearing/disappearing |
+| Scale + Opacity | Cards, modals, notifications |
+| Position + Scale | Selected items, focused content |
+| Rotation + Scale | Celebrations, playful activation |
+| Position + Rotation | Organic transitions |
+| Color + Scale | State emphasis |
+
+Primary property carries meaning; secondary adds polish. Two properties is the sweet spot.
+
+## Property Selection by Goal
+
+| Goal | Primary | Secondary | Avoid |
+|------|---------|-----------|-------|
+| Entrance | position | opacity | rotation |
+| Exit | position | opacity | scale up |
+| Button press | scale | color | position |
+| Hover | scale or color | opacity | position |
+| Success | scale | color + opacity | position |
+| Error | position (shake) | color | scale |
+| Loading | rotation | opacity | position |
+| Toggle | position | color | rotation |
+| Notification | position + scale | opacity | rotation |
+| Delete | scale + opacity | position | grow |
+| Selection | scale | color, opacity | rotation |
+| Progress | position or scale | color | opacity |
+
+## Performance
+
+| Property | Performance |
+|----------|-------------|
+| transform (translate, scale, rotate) | Excellent — GPU-accelerated |
+| opacity | Excellent — GPU-accelerated |
+| color / background-color | Good — triggers paint |
+| clip-path | Good — GPU on modern browsers |
+| width / height | Poor — triggers layout |
+| margin / padding | Poor — triggers layout |
+| box-shadow | Poor — expensive paint |
+
+**Rule**: Prefer transform + opacity for all motion.

package/departments/brand/skills/motion-design/references/reference/quality-checklist.md

@@ -0,0 +1,67 @@
+# Quality Checklist
+
+## Visual Quality
+- [ ] Elements >40px for motion, >100px for detail
+- [ ] Readable at full speed without slow-motion
+- [ ] Clear primary, secondary, ambient layers
+- [ ] Counter-motion for balance where needed
+- [ ] Natural arcs (unless intentionally mechanical)
+- [ ] 1/3 rule (distance): no unbroken motion >1/3 container
+- [ ] 1/3 rule (density): max 1/3 elements active simultaneously
+
+## Technical Quality
+- [ ] No linear easing on spatial movement
+- [ ] Duration matches element type table
+- [ ] Ease-out entrances, ease-in exits
+- [ ] Duration proportional to distance
+- [ ] Entrance duration >= exit duration
+- [ ] Not opacity-only for important state changes
+- [ ] Stagger total <500ms
+- [ ] Follow-through: child elements offset 50-150ms
+
+## Emotional Quality
+- [ ] Target emotion identified before properties
+- [ ] Personality archetype matches brand
+- [ ] Setup → action → resolution structure
+- [ ] Intensity matches interaction importance
+- [ ] Consistent: same interaction = same motion
+- [ ] Appropriate on 100th viewing
+
+## Performance Quality
+- [ ] Primary motion uses transform + opacity
+- [ ] <20 animated elements per viewport
+- [ ] No layout-triggering properties animated
+- [ ] Elements staggered, not simultaneous
+- [ ] Maintains 60fps (30fps acceptable for ambient)
+
+## Accessibility Quality
+- [ ] prefers-reduced-motion alternative provided
+- [ ] No vestibular triggers without alternative
+- [ ] Same interaction = same animation
+- [ ] Critical info not motion-only
+- [ ] Animations >5s are pausable
+
+## Severity Tiers
+
+### CRITICAL
+- Linear easing on spatial movement
+- Opacity-only for important states
+- Exceeds 1/3 screen rule
+- Missing primary layer
+- Stagger >500ms
+- Layout property animation causing jank
+
+### HIGH
+- Missing secondary layer
+- Duration mismatch with element type
+- Wrong directional easing
+- Inconsistent personality
+- No follow-through
+- Missing reduced-motion alternative
+
+### MEDIUM
+- Missing ambient layer
+- No anticipation phase
+- Overshoot mismatch
+- Could use better arcs
+- Missing counter-motion

package/departments/brand/skills/motion-design/references/reference/timing-easing-tables.md

@@ -0,0 +1,106 @@
+# Timing & Easing Tables
+
+## Duration by Element Type
+
+| Element | Duration |
+|---------|----------|
+| Tooltip / micro-feedback | 80-120ms |
+| Button / toggle | 120-180ms |
+| Icon transition | 150-250ms |
+| Card enter/exit | 200-350ms |
+| Modal / dialog | 300-400ms |
+| Page transition | 400-600ms |
+| Dramatic reveal | 600-1200ms |
+| Ambient | 2000-20000ms |
+
+## Distance-Duration Scaling
+
+50px=0.8x | 100px=1.0x | 200px=1.3x | 300px=1.5x | 400px=1.6x | Full screen=1.8-2.0x
+
+## Enter vs. Exit
+Entrance = base (100%). Exit = 65-75% of entrance.
+
+## Interactive Feedback
+
+| Interaction | Max Latency |
+|------------|-------------|
+| Hover | <100ms |
+| Press/tap | <150ms |
+| Release/settle | 200-300ms |
+| Error shake | 300-400ms |
+| Long press | 500-800ms |
+| Drag start | <50ms |
+
+## Duration by Personality
+
+| Personality | Quick | Standard | Slow |
+|------------|-------|----------|------|
+| Playful | 150ms | 250ms | 400ms |
+| Premium | 350ms | 500ms | 800ms |
+| Corporate | 200ms | 300ms | 450ms |
+| Energetic | 100ms | 180ms | 300ms |
+
+## Easing: Directional Rules
+
+Entrance=ease-out | Exit=ease-in | On-screen=ease-in-out | Looping=sine | Rotation/progress=linear
+
+## Easing: Industry Standards
+
+| Name | Cubic Bezier | Use |
+|------|-------------|-----|
+| MD3 Standard | (0.2, 0, 0, 1) | Default on-screen |
+| MD3 Emphasized | (0.05, 0.7, 0.1, 1) | Entrances |
+| MD3 Accelerate | (0.3, 0, 1, 1) | Exits |
+| MD3 Decelerate | (0, 0, 0, 1) | Entering |
+| Apple HIG | (0.25, 0.1, 0.25, 1) | iOS default |
+| Apple Spring | stiffness:300 damping:20 | Interactive |
+| Snappy UI | (0.2, 0, 0, 1) | Fast, decisive |
+| Gentle float | (0.4, 0, 0.2, 1) | Ambient |
+| Bounce settle | (0.175, 0.885, 0.32, 1.275) | Playful |
+| Elastic snap | (0.68, -0.55, 0.265, 1.55) | Dramatic |
+
+## Material-Based Easing
+
+| Material | Duration Scale | Overshoot |
+|----------|---------------|-----------|
+| Rigid (metal) | 1.2x | 0% |
+| Elastic (rubber) | 0.8x | 15-25% |
+| Fluid (water) | 1.5x | 5% |
+| Paper (cards) | 1.0x | 3-5% |
+| Gas (smoke) | 2.0x | 0% |
+| Glass | 0.9x | 0% |
+
+## Spring Parameters
+
+| Feel | Stiffness | Damping |
+|------|-----------|---------|
+| Very stiff | 400+ | 25-30 |
+| Standard | 250-350 | 18-24 |
+| Bouncy | 150-250 | 10-15 |
+| Very bouncy | 100-200 | 5-10 |
+| Gentle | 100-150 | 20-25 |
+
+Damping: <1.0=oscillates, 1.0=fastest no-oscillation, >1.0=slow settle.
+
+## Stagger Patterns
+
+| Pattern | Delay | Budget |
+|---------|------|--------|
+| Micro cascade | 20-40ms | <200ms |
+| Standard | 50-100ms | <400ms |
+| Dramatic | 100-200ms | <600ms |
+| Wave | 30-60ms | <500ms |
+
+Direction: top-to-bottom (lists) | L-to-R (horizontal) | center-out (hero) | random (organic) | reverse (exits)
+
+Total stagger MUST stay <500ms.
+
+## Overshoot Budget
+
+| Context | Overshoot |
+|---------|-----------|
+| Success | 5-10% |
+| Error | 0% |
+| Feedback | 2-5% |
+| Celebration | 15-25% |
+| Premium | 0% |

package/departments/brand/skills/motion-design/references/reference/troubleshooting.md

@@ -0,0 +1,73 @@
+# Troubleshooting
+
+## Looks Robotic
+- Linear easing → use ease-out (entrance) or ease-in-out
+- Straight paths → add 10-20px arc at midpoint
+- Uniform timing → stagger 50-100ms between elements
+- Everything synced → offset start/stop 50-150ms
+- No secondary → add shadow, icon reaction, ambient
+
+## Feels Too Slow
+- Duration exceeds type budget → check duration table
+- ease-in-out when ease-out works → ease-out feels faster
+- Too much anticipation → reduce to 10% or remove
+- Stagger exceeded → total <500ms
+- Overshoot settle too long → increase damping
+
+## Feels Too Fast / Jarring
+- Duration below minimum → modals 300ms+, pages 400ms+
+- No easing → add ease-out minimum
+- Missing resolution → add 50-100ms settle
+- No anticipation on large motion → add 100-200ms wind-up
+
+## Feels Cheap / Flat
+- Only primary motion → add secondary + ambient
+- Opacity-only → combine with position or scale
+- Same easing everywhere → vary primary vs secondary
+- No follow-through → child elements trail 50-150ms
+- No overshoot → add 3-10%
+
+## Too Distracting
+- Too many moving → 1/3 rule
+- Amplitude too large → reduce to minimum
+- Competing heroes → one per moment, dim rest
+- Ambient too prominent → 10-20% amplitude, slower
+- No breathing room → 100-200ms pause between beats
+
+## No Personality
+- Default easing → apply archetype's signature
+- Same duration for all → use personality palette
+- No consistent entrance → define one for project
+- Mixed archetypes → pick one for 90%+
+
+## Inconsistent Feel
+- Different easing same-type → standardize per motion type
+- Duration varies same type → use palette consistently
+- Entry direction changes → one origin everywhere
+- Overshoot inconsistent → apply rules consistently
+
+## Performance (Dropped Frames)
+- Animating width/height/margin → use transform
+- Too many elements → <20 per viewport
+- Complex shadows/filters → simplify or pre-render
+- No GPU acceleration → transform + opacity
+- All simultaneous → stagger to spread load
+
+## Quick Diagnostic
+
+1. No linear on spatial movement
+2. Duration matches element type
+3. Primary + secondary layers
+4. Consistent personality
+5. Directional easing correct
+6. 1/3 screen rule
+7. 1/3 element rule
+8. Follow-through present
+9. Every motion has purpose
+10. Fine on 100th viewing
+
+## Personality Mistakes
+- **Playful**: overshoot >25% = broken; not everything bounces; short+bounce = glitchy
+- **Premium**: too subtle = invisible; too slow = waiting; zero = broken
+- **Corporate**: too conservative = boring; playful easing breaks trust; identical = monotonous
+- **Energetic**: max everywhere = nothing stands out; too many particles; no settle = chaos

package/departments/dev/skills/canvas-generative/SKILL.md

@@ -8,8 +8,8 @@ description: >
   TRIGGER: "generative art", "arte generativa", "particles background",
   "fundo de partículas", "noise field", "flow field", "canvas animation",
   "fundo processual", "creative coding em canvas", "/dev canvas-generative".
-  SKIP: real-time 3D or shader work -> no dedicated skill yet, use the
-  frontend workflows; a pre-rendered 3D world scrubbed by scroll ->
+  SKIP: real-time 3D or shader work -> dev/threejs; a pre-rendered 3D
+  world scrubbed by scroll ->
   dev/scroll-world; turning an existing video into a scroll site ->
   dev/animated-website; charts and data graphics -> the dataviz skill.
 allowed-tools: [Read, Write, Edit, Bash, Grep, Glob]
@@ -352,7 +352,7 @@ function update() {
 |---|---|
 | Noise implementations, particle pool, flow field, L-system, attractors | `references/algorithms.md` |
 | Timing and easing for animated transitions | the brand guidelines' Motion System (§06), reached via the source-of-truth table in `departments/brand/references/uiux-knowledge-and-tools.md` |
-| 3D generative (shaders, GPU particles) | out of this skill's scope — Canvas 2D only; scope a WebGL approach with the frontend squad |
+| 3D generative (shaders, GPU particles) | `departments/dev/skills/threejs/SKILL.md` |
 
 ## Output
 

package/departments/dev/skills/threejs/SKILL.md

@@ -0,0 +1,173 @@
+---
+name: dev/threejs
+description: >
+  Real-time 3D in the browser with three.js and React Three Fiber: modern
+  setup (import maps, WebGL vs WebGPU renderer choice, TSL), the
+  scene-camera-renderer wiring, geometries, materials and lights, loaders,
+  disposal discipline against GPU memory leaks, performance budgets — and
+  the R3F layer (hooks, drei, postprocessing) for React projects.
+  TRIGGER: "three.js", "threejs", "react three fiber", "r3f", "webgl",
+  "webgpu", "shader", "GLSL", "cena 3D", "3D interativo no browser",
+  "drei", "/dev threejs".
+  SKIP: a pre-rendered 3D world scrubbed by scroll (no real-time engine)
+  -> dev/scroll-world; generative 2D canvas -> dev/canvas-generative;
+  generating a 3D asset (GLB mesh) from an image -> the higgsfield-generate
+  skill; React motion without 3D -> dev/framer-motion.
+allowed-tools: [Read, Write, Edit, Bash, Grep, Glob]
+metadata:
+  origin: community
+  source: https://github.com/AThevon/genjutsu
+  license: MIT
+---
+
+<!-- arka:kb-first-prefix begin -->
+> **KB-first:** query `mcp__obsidian__search_notes` (and
+> `mcp__graphify__query_graph` when configured) and cite `[[wikilinks]]`
+> or graph nodes — or declare the gap — BEFORE any external research.
+> Full doctrine: `arka/SKILL.md` (KB-First Research).
+<!-- arka:kb-first-prefix end -->
+
+# Three.js — `/dev threejs`
+
+> **Agent:** Diana (Frontend Dev) | **Framework:** three.js (MIT) + React Three Fiber
+> Core authored from the three.js project's own LLM guidance
+> (`docs/llms.txt`, MIT); the R3F layer derives from genjutsu (MIT) — see
+> `references/`.
+
+## Setup — the modern shape
+
+Import maps, never legacy CDN script tags. Pin one version for `three`
+and `three/addons/` together — mixing versions across the two specifiers
+is the classic silent breaker:
+
+```html
+<script type="importmap">
+{ "imports": {
+    "three": "https://cdn.jsdelivr.net/npm/three@<version>/build/three.module.js",
+    "three/webgpu": "https://cdn.jsdelivr.net/npm/three@<version>/build/three.webgpu.js",
+    "three/tsl": "https://cdn.jsdelivr.net/npm/three@<version>/build/three.tsl.js",
+    "three/addons/": "https://cdn.jsdelivr.net/npm/three@<version>/examples/jsm/" } }
+</script>
+```
+
+`WebGPURenderer` is not exported from `three` — it lives in the
+`three/webgpu` entry, and it is async: `await renderer.init()` before the
+first frame. The TSL node functions live in `three/tsl`, not in
+`three/webgpu`. Omit either entry and the import fails at runtime.
+
+In a bundled project, `npm i three` and import the same specifiers. Check
+the installed version before writing code — the API moves, and the
+project's lockfile outranks your memory of it.
+
+**Renderer choice.** `WebGLRenderer` is the default and safe everywhere.
+`WebGPURenderer` (with TSL node materials) is the forward path but needs
+feature detection and a WebGL fallback; choose it only when the project
+targets browsers you control or ships the fallback. Never mix GLSL
+`ShaderMaterial` into a WebGPU pipeline — that renderer wants TSL
+`NodeMaterial` classes.
+
+## The irreducible core
+
+Scene, camera, renderer, loop — everything else hangs off these:
+
+```js
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 100);
+const renderer = new THREE.WebGLRenderer({ antialias: true });
+renderer.setSize(w, h);
+renderer.setPixelRatio(Math.min(devicePixelRatio, 2)); // cap DPR: 3x buys nothing visible and burns fill rate
+renderer.setAnimationLoop(tick);                        // not a hand-rolled rAF: in XR it swaps to the session's loop; outside XR it is rAF with correct teardown via setAnimationLoop(null)
+```
+
+On resize: update `camera.aspect`, call `camera.updateProjectionMatrix()`,
+then `renderer.setSize`. Forgetting the middle step is why "resize
+stretches everything".
+
+**Animate with elapsed time, not the frame count.** A per-frame delta
+keeps speed identical at 30 and 144 fps; per-frame increments do not.
+Use `THREE.Timer` (`timer.update(); timer.getDelta()`) — `THREE.Clock`
+is deprecated since r183 and warns at runtime.
+
+## Disposal — GPU memory does not garbage-collect
+
+Removing a mesh from the scene frees nothing on the GPU. Every geometry,
+material, texture and render target you create, you `dispose()` when its
+life ends — and a material's textures are disposed separately from the
+material. For a whole subtree, collect first, dispose once: `traverse`
+visits Groups and Lights that have no material, and shared resources must
+not be disposed per-mesh:
+
+```js
+function disposeSubtree(root) {
+  const geometries = new Set(), materials = new Set(), textures = new Set();
+  root.traverse((obj) => {
+    if (!obj.isMesh && !obj.isPoints && !obj.isLine && !obj.isSprite) return;
+    // Sprites share one engine-owned quad geometry app-wide: never dispose it
+    if (obj.geometry && !obj.isSprite) geometries.add(obj.geometry);
+    const mats = Array.isArray(obj.material) ? obj.material : [obj.material];
+    for (const m of mats) {
+      if (!m) continue;
+      materials.add(m);
+      for (const v of Object.values(m)) if (v?.isTexture) textures.add(v);
+      // ShaderMaterial textures live in uniforms, not on the material —
+      // and a uniform's value can be an ARRAY of textures (atlas shape)
+      if (m.uniforms) for (const u of Object.values(m.uniforms)) {
+        const vals = Array.isArray(u?.value) ? u.value : [u?.value];
+        for (const v of vals) if (v?.isTexture) textures.add(v);
+      }
+    }
+  });
+  textures.forEach((t) => t.dispose());
+  materials.forEach((m) => m.dispose());
+  geometries.forEach((g) => g.dispose());
+}
+```
+
+This covers the shapes meshes ordinarily carry — geometries, material
+maps, scalar and array texture uniforms. When a resource is shared
+with meshes OUTSIDE the subtree — a texture atlas, a cached material —
+exclude it: ownership is yours to model, and dispose belongs to the owner.
+
+A single-page app that mounts and unmounts scenes without this leaks
+until the tab dies. This is the number-one three.js production bug.
+
+## Performance budget
+
+- **Draw calls first.** Hundreds of meshes sharing one geometry+material
+  belong in an `InstancedMesh`; thousands of distinct static meshes merge
+  via `BufferGeometryUtils.mergeGeometries`.
+- Reuse geometries and materials across meshes; clone only when a
+  property must diverge.
+- Textures: compressed formats (KTX2/Basis) for anything big, and never
+  larger than the screen area they cover; mipmaps come from the loader or
+  `generateMipmaps`, with no power-of-two constraint in WebGL 2.
+- Lights are per-fragment cost: prefer one directional + ambient or an
+  environment map over a constellation of point lights. Bake what does
+  not move.
+- Shadows are a render pass per caster: tight `shadow.camera` frustum,
+  modest map sizes, `castShadow` only where it is visible.
+
+## Loading models
+
+`GLTFLoader` (with `DRACOLoader` or `KTX2Loader` when the asset uses
+them) from `three/addons/`. Load asynchronously, add a loading state,
+and dispose the loader's intermediates. glTF is the format; converting
+from anything else happens in the asset pipeline, not at runtime.
+
+## React Three Fiber
+
+For React projects, R3F replaces the imperative wiring: the component
+tree IS the scene graph, `useFrame` is the loop, drei supplies the
+controls/loaders/staging you would otherwise hand-write. The full layer —
+hooks discipline, drei picks, postprocessing, and the Do-Nots (from
+setState in useFrame to forgotten dispose) — lives
+in [references/r3f.md](references/r3f.md), with canvas/scene wiring in
+[references/scene-setup.md](references/scene-setup.md) and GLSL/TSL
+patterns in [references/shaders.md](references/shaders.md).
+
+## Output
+
+A working scene module (or R3F component tree) with the render loop,
+resize handling and disposal wired, a stated performance budget (draw
+calls, texture memory, DPR cap), and the renderer choice justified in one
+line. Anything WebGPU/TSL states its fallback.

package/departments/dev/skills/threejs/references/genjutsu.LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Adrien Thevon
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.