tribunal-kit 9.2.4 → 9.2.5

package/.agent/skills/12-principles-of-animation/SKILL.md

@@ -1,51 +1,51 @@
----
-name: 12-principles-of-animation
-description: "Use when Application of Disney's 12 Principles of Animation (Squash & Stretch, Anticipation, Staging, Follow Through, Slow In & Slow Out, Arc, Secondary Action, Timing, Exaggeration, Solid Drawing, Appeal) to modern web UI motion."
-version: 5.0.0
-last-updated: 2026-09-13
-skills:
-  - motion-engineering
-  - 60fps-animation
-  - accessible-animation
-tools: Read, Grep, Glob, Bash, Edit, Write
-scripts-binding:
-  - .agent/scripts/lint_runner.js
-  - .agent/scripts/verify_all.js
----
-
-# 12 Principles of Animation — Web UI Motion Theory
-
----
-
-## 🛠️ Technical Architecture & Reference Recipes
-
----
-
----
-
-## The 6 Essential Web Principles
-
-### 1. Squash & Stretch (Scale Elasticity)
-
-- Compress elements slightly on impact (e.g. button press down `scale(0.97)`), then stretch slightly on release (`scale(1.02)` -> `scale(1)`).
-- **Rule**: Preserve overall volume. If height decreases by 5%, width must expand by 5%.
-
-### 2. Anticipation (Pre-Motion Cue)
-
-- Before a major movement (e.g. modal sliding up), perform a micro-backwards movement (e.g. shift down `2px` for `40ms`) to prepare the user's eye.
-
-### 3. Staging (Focus & Spatial Hierarchy)
-
-- Direct user attention to one primary animation at a time. Never animate competing layout elements across different regions simultaneously.
-
-### 4. Slow In & Slow Out (Easing Curves)
-
-- Objects in nature start slow, accelerate, and decelerate gradually. Use strong ease-out curves (`cubic-bezier(0.16, 1, 0.3, 1)`) for UI entrances.
-
-### 5. Arcs (Natural Curvilinear Trajectories)
-
-- Human arms and physical objects move in curved arcs rather than mechanical straight lines. When moving elements across 2D space, use parabolic bezier curves or `offset-path`.
-
-### 6. Follow Through & Overlapping Action
-
-- Secondary elements (e.g. badge text inside a sliding card) lag slightly behind the main container (stagger delay 30ms - 50ms), creating organic physical realism.
+---
+name: 12-principles-of-animation
+description: "Use when Application of Disney's 12 Principles of Animation (Squash & Stretch, Anticipation, Staging, Follow Through, Slow In & Slow Out, Arc, Secondary Action, Timing, Exaggeration, Solid Drawing, Appeal) to modern web UI motion."
+version: 5.0.0
+last-updated: 2026-09-13
+skills:
+  - motion-engineering
+  - 60fps-animation
+  - accessible-animation
+tools: Read, Grep, Glob, Bash, Edit, Write
+scripts-binding:
+  - .agent/scripts/lint_runner.js
+  - .agent/scripts/verify_all.js
+---
+
+# 12 Principles of Animation — Web UI Motion Theory
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+---
+
+---
+
+## The 6 Essential Web Principles
+
+### 1. Squash & Stretch (Scale Elasticity)
+
+- Compress elements slightly on impact (e.g. button press down `scale(0.97)`), then stretch slightly on release (`scale(1.02)` -> `scale(1)`).
+- **Rule**: Preserve overall volume. If height decreases by 5%, width must expand by 5%.
+
+### 2. Anticipation (Pre-Motion Cue)
+
+- Before a major movement (e.g. modal sliding up), perform a micro-backwards movement (e.g. shift down `2px` for `40ms`) to prepare the user's eye.
+
+### 3. Staging (Focus & Spatial Hierarchy)
+
+- Direct user attention to one primary animation at a time. Never animate competing layout elements across different regions simultaneously.
+
+### 4. Slow In & Slow Out (Easing Curves)
+
+- Objects in nature start slow, accelerate, and decelerate gradually. Use strong ease-out curves (`cubic-bezier(0.16, 1, 0.3, 1)`) for UI entrances.
+
+### 5. Arcs (Natural Curvilinear Trajectories)
+
+- Human arms and physical objects move in curved arcs rather than mechanical straight lines. When moving elements across 2D space, use parabolic bezier curves or `offset-path`.
+
+### 6. Follow Through & Overlapping Action
+
+- Secondary elements (e.g. badge text inside a sliding card) lag slightly behind the main container (stagger delay 30ms - 50ms), creating organic physical realism.

package/.agent/skills/60fps-animation/SKILL.md

@@ -1,91 +1,91 @@
----
-name: 60fps-animation
-description: "Use when Web animation performance guidance for avoiding layout thrashing, achieving 60/120fps motion, and using GPU compositor-friendly properties (transform, opacity)."
-version: 5.0.0
-last-updated: 2026-09-13
-skills:
-  - motion-engineering
-  - accessible-animation
-  - fixing-motion-performance
-tools: Read, Grep, Glob, Bash, Edit, Write
-scripts-binding:
-  - .agent/scripts/lint_runner.js
-  - .agent/scripts/verify_all.js
----
-
-# 60fps Animation — GPU Compositor & High-Performance Motion
-
----
-
-## 🛠️ Technical Architecture & Reference Recipes
-
----
-
-## 🛠️ Technical Architecture & Reference Recipes
-
----
-
-## 2026 Motion Performance & GPU Invariants
-
-1. **CSS `@starting-style` Native Transitions**:
-   ```css
-   /* Native entry animation without JS transition wrappers */
-   dialog[open] {
-     opacity: 1;
-     transform: scale(1);
-     transition:
-       opacity 200ms ease,
-       transform 200ms ease;
-     @starting-style {
-       opacity: 0;
-       transform: scale(0.95);
-     }
-   }
-   ```
-2. **Native Scroll-Driven Animations**: Use CSS `animation-timeline: view()` or `scroll()` to run scroll animations directly on the compositor thread without firing JavaScript scroll event handlers.
-3. **No Layout Thrashing in JS**: Never interleave DOM reads (`element.getBoundingClientRect()`, `offsetHeight`) with DOM writes (`style.transform`). Batch reads first, then writes in `requestAnimationFrame()`.
-
-## Hallucination Traps (Read First)
-
-- ❌ Animating `top`, `left`, `width`, `height` → ✅ Animate `transform: translate3d(...)` and `scale(...)`
-- ❌ Using JavaScript scroll listeners for parallax/fade → ✅ Use native CSS `animation-timeline`
-- ❌ Setting `will-change: transform` globally on every element → ✅ Blows GPU VRAM; apply only during active interaction
-- ❌ Animating box-shadow directly → ✅ Animate `opacity` on a pseudo-element (`::after`) with pre-rendered shadow
-
----
-
-## 4 Performance Rules
-
-### 1. Compositor-Only Animation Pipeline
-
-Only animate properties handled strictly by the GPU compositor layer:
-
-- ✅ **Compositor Properties** (Zero Layout / Zero Paint): `transform` (`translate3d`, `scale`, `rotate`) and `opacity`.
-- ❌ **Forbidden Animating Properties** (Triggers Full Layout Re-calculation): `width`, `height`, `margin`, `padding`, `top`, `left`, `border-width`.
-
-### 2. Replacing Width/Height Transitions with Scale Math
-
-Instead of animating `width: 100px` to `200px`:
-
-```css
-/* BAD: Triggers Layout recalculation on every frame */
-.box-bad {
-  transition: width 300ms ease;
-}
-
-/* GOOD: GPU Compositor Hardware Accelerated */
-.box-good {
-  transform: scaleX(2);
-  transform-origin: left center;
-  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-```
-
-### 3. `will-change` Management
-
-- Apply `will-change: transform, opacity` ONLY right before or during active animation.
-- Remove `will-change` when animation completes to free up GPU VRAM memory!
-
-### 4. Layout Thrashing Prevention in JS
-
-- Never interleave DOM reads (`element.offsetHeight`) with DOM writes (`element.style.height = ...`) inside requestAnimationFrame or scroll handlers. Batch all reads first, then perform all writes.
+---
+name: 60fps-animation
+description: "Use when Web animation performance guidance for avoiding layout thrashing, achieving 60/120fps motion, and using GPU compositor-friendly properties (transform, opacity)."
+version: 5.0.0
+last-updated: 2026-09-13
+skills:
+  - motion-engineering
+  - accessible-animation
+  - fixing-motion-performance
+tools: Read, Grep, Glob, Bash, Edit, Write
+scripts-binding:
+  - .agent/scripts/lint_runner.js
+  - .agent/scripts/verify_all.js
+---
+
+# 60fps Animation — GPU Compositor & High-Performance Motion
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+---
+
+## 2026 Motion Performance & GPU Invariants
+
+1. **CSS `@starting-style` Native Transitions**:
+   ```css
+   /* Native entry animation without JS transition wrappers */
+   dialog[open] {
+     opacity: 1;
+     transform: scale(1);
+     transition:
+       opacity 200ms ease,
+       transform 200ms ease;
+     @starting-style {
+       opacity: 0;
+       transform: scale(0.95);
+     }
+   }
+   ```
+2. **Native Scroll-Driven Animations**: Use CSS `animation-timeline: view()` or `scroll()` to run scroll animations directly on the compositor thread without firing JavaScript scroll event handlers.
+3. **No Layout Thrashing in JS**: Never interleave DOM reads (`element.getBoundingClientRect()`, `offsetHeight`) with DOM writes (`style.transform`). Batch reads first, then writes in `requestAnimationFrame()`.
+
+## Hallucination Traps (Read First)
+
+- ❌ Animating `top`, `left`, `width`, `height` → ✅ Animate `transform: translate3d(...)` and `scale(...)`
+- ❌ Using JavaScript scroll listeners for parallax/fade → ✅ Use native CSS `animation-timeline`
+- ❌ Setting `will-change: transform` globally on every element → ✅ Blows GPU VRAM; apply only during active interaction
+- ❌ Animating box-shadow directly → ✅ Animate `opacity` on a pseudo-element (`::after`) with pre-rendered shadow
+
+---
+
+## 4 Performance Rules
+
+### 1. Compositor-Only Animation Pipeline
+
+Only animate properties handled strictly by the GPU compositor layer:
+
+- ✅ **Compositor Properties** (Zero Layout / Zero Paint): `transform` (`translate3d`, `scale`, `rotate`) and `opacity`.
+- ❌ **Forbidden Animating Properties** (Triggers Full Layout Re-calculation): `width`, `height`, `margin`, `padding`, `top`, `left`, `border-width`.
+
+### 2. Replacing Width/Height Transitions with Scale Math
+
+Instead of animating `width: 100px` to `200px`:
+
+```css
+/* BAD: Triggers Layout recalculation on every frame */
+.box-bad {
+  transition: width 300ms ease;
+}
+
+/* GOOD: GPU Compositor Hardware Accelerated */
+.box-good {
+  transform: scaleX(2);
+  transform-origin: left center;
+  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+```
+
+### 3. `will-change` Management
+
+- Apply `will-change: transform, opacity` ONLY right before or during active animation.
+- Remove `will-change` when animation completes to free up GPU VRAM memory!
+
+### 4. Layout Thrashing Prevention in JS
+
+- Never interleave DOM reads (`element.offsetHeight`) with DOM writes (`element.style.height = ...`) inside requestAnimationFrame or scroll handlers. Batch all reads first, then perform all writes.

package/.agent/skills/accessible-animation/SKILL.md

@@ -1,189 +1,189 @@
----
-name: accessible-animation
-description: "Use when implementing WCAG 2.2 AA compliant UI motion, tiered reduced-motion patterns, vestibular trigger suppression, and accessible transitions across CSS, React, Framer Motion, and GSAP."
-version: 5.0.0
-last-updated: 2026-09-13
-skills:
-  - 60fps-animation
-  - motion-engineering
-  - framer-motion-expert
-  - review-animations
-tools: Read, Grep, Glob, Bash, Edit, Write
-scripts-binding:
-  - .agent/scripts/lint_runner.js
-  - .agent/scripts/verify_all.js
----
-
-# Accessible Animation — Tiered Reduced-Motion Architecture & WCAG 2.2 AA Compliance
-
----
-
-## 🛠️ Technical Architecture & Reference Recipes
-
-Motion in digital interfaces elevates feedback and delight, but for users with vestibular disorders, inner-ear sensitivities, or cognitive processing differences, unrestrained motion causes severe nausea, vertigo, migraines, and physical disorientation. A master-grade accessible motion architecture does not bluntly disable all UI feedback; it systematically applies tiered reduction—preserving vital state changes and subtle opacity fades while eliminating spatial translations, zoom scales, parallax shifts, and rapid flashes.
-
----
-
----
-
----
-
----
-
-## 🛠️ Technical Architecture & Reference Recipes
-
-### 1. The Vestibular Trigger Substitution Matrix
-
-| Disorienting Trigger           | Vestibular Hazard                | Accessible Compliant Substitution                                 |
-| :----------------------------- | :------------------------------- | :---------------------------------------------------------------- |
-| **Full-Page Parallax**         | Severe nausea, spatial imbalance | Static layout positioning with subtle content opacity reveal      |
-| **Multi-Axis 3D Rotation**     | Visual vertigo, disorientation   | 2D elevation shadow transition or subtle border glow              |
-| **Rapid Zoom / Scale (>1.2x)** | Depth perception distortion      | Gentle scale (1.0 to 1.02x) or immediate 150ms opacity cross-fade |
-| **Infinite Spinning Spinners** | Cognitive fatigue, dizziness     | Pulsing opacity indicator or static step progress bar             |
-| **Off-Canvas Fly-In Drawer**   | Visual lurching across viewport  | Immediate opacity dissolve (`0` to `1` over 120ms)                |
-
----
-
-### 2. Four Production-Grade Implementation Recipes
-
-#### Recipe 1: CSS Non-Destructive Global Safety Harness
-
-```css
-/* Universal Non-Destructive Reset: Preserves JS event hooks while eliminating movement */
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    /* 0.001ms duration ensures transitionend & animationend events still fire reliably */
-    animation-duration: 0.001ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.001ms !important;
-    scroll-behavior: auto !important;
-  }
-
-  /* Exceptions: Allow intentional, gentle micro-fades for essential state comprehension */
-  .accessible-fade {
-    transition: opacity 150ms ease-out !important;
-  }
-}
-```
-
----
-
-#### Recipe 2: SSR-Safe React Hook (`useAccessibleMotion`)
-
-Prevents hydration mismatch warnings by defaulting to safe state until client mounts:
-
-```tsx
-import { useState, useEffect } from 'react';
-
-export function useAccessibleMotion(): boolean {
-  // Default to false on server to match initial HTML render
-  const [shouldReduceMotion, setShouldReduceMotion] = useState(false);
-
-  useEffect(() => {
-    if (typeof window === 'undefined' || !window.matchMedia) return;
-
-    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
-    setShouldReduceMotion(mediaQuery.matches);
-
-    const handleChange = (e: MediaQueryListEvent) => {
-      setShouldReduceMotion(e.matches);
-    };
-
-    mediaQuery.addEventListener('change', handleChange);
-    return () => mediaQuery.removeEventListener('change', handleChange);
-  }, []);
-
-  return shouldReduceMotion;
-}
-```
-
----
-
-#### Recipe 3: Framer Motion Tiered Component Pattern
-
-```tsx
-import React from 'react';
-import { motion, useReducedMotion } from 'framer-motion';
-
-interface AccessibleDialogProps {
-  isOpen: boolean;
-  onClose: () => void;
-  children: React.ReactNode;
-}
-
-export function AccessibleDialog({ isOpen, onClose, children }: AccessibleDialogProps) {
-  const shouldReduce = useReducedMotion();
-
-  if (!isOpen) return null;
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
-      <motion.div
-        role="dialog"
-        aria-modal="true"
-        initial={shouldReduce ? { opacity: 0 } : { opacity: 0, scale: 0.92, y: 16 }}
-        animate={{ opacity: 1, scale: 1, y: 0 }}
-        exit={shouldReduce ? { opacity: 0 } : { opacity: 0, scale: 0.94, y: 12 }}
-        transition={{
-          duration: shouldReduce ? 0.12 : 0.22,
-          ease: [0.16, 1, 0.3, 1],
-        }}
-        className="w-full max-w-lg p-6 bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl"
-      >
-        {children}
-      </motion.div>
-    </div>
-  );
-}
-```
-
----
-
-#### Recipe 4: GSAP `matchMedia` Integration & Smooth-Scroll Cancellation
-
-```typescript
-import gsap from 'gsap';
-import { ScrollTrigger } from 'gsap/ScrollTrigger';
-
-gsap.registerPlugin(ScrollTrigger);
-
-export function setupAccessibleScrollMotion(targetElement: HTMLElement) {
-  const mm = gsap.matchMedia();
-
-  // 1. Standard Motion (User has not requested reduction)
-  mm.add('(prefers-reduced-motion: no-preference)', () => {
-    gsap.to(targetElement, {
-      y: -80,
-      scale: 1.05,
-      scrollTrigger: {
-        trigger: targetElement,
-        start: 'top bottom',
-        end: 'bottom top',
-        scrub: 1,
-      },
-    });
-  });
-
-  // 2. Reduced Motion (User prefers reduced motion)
-  mm.add('(prefers-reduced-motion: reduce)', () => {
-    // Zero parallax scrub, zero scale shift. Pure gentle opacity cross-fade.
-    gsap.fromTo(
-      targetElement,
-      { opacity: 0.4 },
-      {
-        opacity: 1,
-        duration: 0.2,
-        scrollTrigger: {
-          trigger: targetElement,
-          start: 'top 85%',
-          toggleActions: 'play none none reverse',
-        },
-      },
-    );
-  });
-
-  return () => mm.revert();
-}
-```
+---
+name: accessible-animation
+description: "Use when implementing WCAG 2.2 AA compliant UI motion, tiered reduced-motion patterns, vestibular trigger suppression, and accessible transitions across CSS, React, Framer Motion, and GSAP."
+version: 5.0.0
+last-updated: 2026-09-13
+skills:
+  - 60fps-animation
+  - motion-engineering
+  - framer-motion-expert
+  - review-animations
+tools: Read, Grep, Glob, Bash, Edit, Write
+scripts-binding:
+  - .agent/scripts/lint_runner.js
+  - .agent/scripts/verify_all.js
+---
+
+# Accessible Animation — Tiered Reduced-Motion Architecture & WCAG 2.2 AA Compliance
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+Motion in digital interfaces elevates feedback and delight, but for users with vestibular disorders, inner-ear sensitivities, or cognitive processing differences, unrestrained motion causes severe nausea, vertigo, migraines, and physical disorientation. A master-grade accessible motion architecture does not bluntly disable all UI feedback; it systematically applies tiered reduction—preserving vital state changes and subtle opacity fades while eliminating spatial translations, zoom scales, parallax shifts, and rapid flashes.
+
+---
+
+---
+
+---
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+### 1. The Vestibular Trigger Substitution Matrix
+
+| Disorienting Trigger           | Vestibular Hazard                | Accessible Compliant Substitution                                 |
+| :----------------------------- | :------------------------------- | :---------------------------------------------------------------- |
+| **Full-Page Parallax**         | Severe nausea, spatial imbalance | Static layout positioning with subtle content opacity reveal      |
+| **Multi-Axis 3D Rotation**     | Visual vertigo, disorientation   | 2D elevation shadow transition or subtle border glow              |
+| **Rapid Zoom / Scale (>1.2x)** | Depth perception distortion      | Gentle scale (1.0 to 1.02x) or immediate 150ms opacity cross-fade |
+| **Infinite Spinning Spinners** | Cognitive fatigue, dizziness     | Pulsing opacity indicator or static step progress bar             |
+| **Off-Canvas Fly-In Drawer**   | Visual lurching across viewport  | Immediate opacity dissolve (`0` to `1` over 120ms)                |
+
+---
+
+### 2. Four Production-Grade Implementation Recipes
+
+#### Recipe 1: CSS Non-Destructive Global Safety Harness
+
+```css
+/* Universal Non-Destructive Reset: Preserves JS event hooks while eliminating movement */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    /* 0.001ms duration ensures transitionend & animationend events still fire reliably */
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+
+  /* Exceptions: Allow intentional, gentle micro-fades for essential state comprehension */
+  .accessible-fade {
+    transition: opacity 150ms ease-out !important;
+  }
+}
+```
+
+---
+
+#### Recipe 2: SSR-Safe React Hook (`useAccessibleMotion`)
+
+Prevents hydration mismatch warnings by defaulting to safe state until client mounts:
+
+```tsx
+import { useState, useEffect } from 'react';
+
+export function useAccessibleMotion(): boolean {
+  // Default to false on server to match initial HTML render
+  const [shouldReduceMotion, setShouldReduceMotion] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return;
+
+    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+    setShouldReduceMotion(mediaQuery.matches);
+
+    const handleChange = (e: MediaQueryListEvent) => {
+      setShouldReduceMotion(e.matches);
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, []);
+
+  return shouldReduceMotion;
+}
+```
+
+---
+
+#### Recipe 3: Framer Motion Tiered Component Pattern
+
+```tsx
+import React from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+
+interface AccessibleDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+export function AccessibleDialog({ isOpen, onClose, children }: AccessibleDialogProps) {
+  const shouldReduce = useReducedMotion();
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
+      <motion.div
+        role="dialog"
+        aria-modal="true"
+        initial={shouldReduce ? { opacity: 0 } : { opacity: 0, scale: 0.92, y: 16 }}
+        animate={{ opacity: 1, scale: 1, y: 0 }}
+        exit={shouldReduce ? { opacity: 0 } : { opacity: 0, scale: 0.94, y: 12 }}
+        transition={{
+          duration: shouldReduce ? 0.12 : 0.22,
+          ease: [0.16, 1, 0.3, 1],
+        }}
+        className="w-full max-w-lg p-6 bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl"
+      >
+        {children}
+      </motion.div>
+    </div>
+  );
+}
+```
+
+---
+
+#### Recipe 4: GSAP `matchMedia` Integration & Smooth-Scroll Cancellation
+
+```typescript
+import gsap from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+gsap.registerPlugin(ScrollTrigger);
+
+export function setupAccessibleScrollMotion(targetElement: HTMLElement) {
+  const mm = gsap.matchMedia();
+
+  // 1. Standard Motion (User has not requested reduction)
+  mm.add('(prefers-reduced-motion: no-preference)', () => {
+    gsap.to(targetElement, {
+      y: -80,
+      scale: 1.05,
+      scrollTrigger: {
+        trigger: targetElement,
+        start: 'top bottom',
+        end: 'bottom top',
+        scrub: 1,
+      },
+    });
+  });
+
+  // 2. Reduced Motion (User prefers reduced motion)
+  mm.add('(prefers-reduced-motion: reduce)', () => {
+    // Zero parallax scrub, zero scale shift. Pure gentle opacity cross-fade.
+    gsap.fromTo(
+      targetElement,
+      { opacity: 0.4 },
+      {
+        opacity: 1,
+        duration: 0.2,
+        scrollTrigger: {
+          trigger: targetElement,
+          start: 'top 85%',
+          toggleActions: 'play none none reverse',
+        },
+      },
+    );
+  });
+
+  return () => mm.revert();
+}
+```