Animaxxing Aesthetic

One look, carried as tokens, type roles, a layout grammar, a motion vocabulary, and portable effect recipes. It is the look of animaxxing.com: black, white, and neutral gray; oversized Rethink Sans against small uppercase JetBrains Mono; hairline rules; letters that scatter in from off screen; buttons that assemble out of particles.

This skill composes with one framework skill. Install both and read the framework skill first:

• The framework skill (gsap-nextjs, gsap-astro, gsap-sveltekit, gsap-nuxt, gsap-react-router, gsap-tanstack-router, or gsap-vanilla) owns the lifecycle: mount → initial state → intro → settled → outro → end state → unmount, navigation timing, interruption, and cleanup.
• This skill owns what each phase looks like. Its recipes hand the framework skill's controller enter() and exit() builders and never decide when they run.

Start with the project

1. Read the framework skill for this project and follow its setup. Keep the project's package manager, language, file layout, and component conventions.
2. Read the installed GSAP version. The recipes need GSAP 3.13 or later: SplitText.create, smartWrap, mask, and aria on SplitText, all in the free build. Prefer the bundled docs and types over memory.
3. Load Rethink Sans (variable, weight 400 to 800) and JetBrains Mono (100 to 800) from Google Fonts, or however the project loads fonts. The weight-axis recipes need the variable face; a static 800 cut renders the look but not the motion.
4. If the project already has a brand, confirm the user wants it replaced. This skill is a complete look, not a layer over one.
5. If Tailwind is present, use the @theme mapping in the tokens reference. Otherwise use the plain CSS custom properties. Both are given.

The look

Monochrome only: --canvas, --foreground, --muted, --border, --surface, and an inverse band, in a light and a dark scheme. No color, no shadows, no gradients. Type does the work: fluid poster type measured in container-query units, tight negative tracking, leading under 1; supporting copy small and quiet; labels in uppercase mono, tracked out. Everything flush left and ragged right. Hairlines separate; a 2px border is the strong weight. Radii are tight. The dark scheme follows the operating system unless the user pins one with data-theme.

The motion

Three durations (0.14, 0.2, 0.28 seconds), three eases (power2.out in, power2.in out, power2.inOut shift), tiny distances (4, 8, 16 px). Motion signals that something changed; it is not the thing being read. Display type earns bigger moves: letters scatter in from up to sixty percent of the viewport, paragraphs arrive one word at a time at speaking pace, headings ripple like a crowd wave. The variable weight axis is a motion property. Transforms, autoAlpha, clip-path, blur, and fontWeight only. Splits always revert. Ambient loops run on display surfaces only, pause off screen, and never run under reduced motion.

Apply in this order

1. Tokens. Colors, fonts, type scale, spacing, radii, borders, focus, selection. tokens.md.
2. Type roles. Poster, Statement, Label, Annotation, BodyCopy, and the crop. typography-and-layout.md.
3. Layout grammar. Sticky hairline header, twelve-column grid, numbered chapters rail, ruled ledgers, chips and buttons, cards. Same reference.
4. Route grammar. Mark page items with data-page-transition (standard rise, letters, letters-sides, slide-horizontal), hide them before first paint, and let the framework skill's controller run the intro and outro builders. motion-vocabulary.md and route-letters.md.
5. Surface effects, only where the page has a display surface for them. Hero: scatter-in headline, speak-in subhead, wave, blast-off on the call to action. Calls to action: reactor or marquee. Cards: resolve. An onward link: slipstream. A command or a giant field: ignite.

Recipe contract

Every recipe is one vanilla TypeScript module with GSAP as its only dependency. It exports builders that return a gsap.core.Timeline, or an effect instance:

{ enter(delay: number): gsap.core.Timeline; exit(): void; blast(): void; idle(): void; hover(on: boolean): void; destroy(): void }

Recipes never read the router, never mount or unmount, never own cleanup timing, and never add document-level listeners. The framework skill's controller wires them:

Each recipe file carries a local prefersReducedMotion(); replace it with the project's helper if one exists so an app-level override is honored.

Read only what you need

• Colors, fonts, scale, spacing, radii, focus: tokens.md
• Type roles, header, grid, rail, chips, cards, shell: typography-and-layout.md
• Durations, eases, the in/out shelf, split families, route grammar, pre-paint hiding, reduced motion: motion-vocabulary.md
• Recipes:
  • Character, word, and line entrances: split-entrances.md
  • The page intro and outro with scattering letters: route-letters.md
  • A paragraph spoken in word by word: speak-in.md
  • The letter wave: wave.md
  • The hero outro: blast-off.md
  • The particle canvas and its attach helper: particle-field.md
  • Button, card, and link particle treatments: particle-effects.md
• Before calling work done: verification.md

Rules

• Neutral grays only, consumed through the tokens. Never a raw hex value in a component, never a hue.
• No shadows, gradients, justified text, or centered blocks. Alignment edges carry the composition.
• Hairline is the default separator. Reserve the 2px border for chips, buttons, and cards.
• Uppercase mono for metadata; never for body copy. Annotation type stays above 11px and is never cropped.
• Poster type may be cropped at a deliberate boundary. Reading type is never cropped.
• Motion signals change. Reading text never assembles itself; display text may.
• Timeline defaults overwrite: "auto". Every split uses aria: "auto" and reverts when its phase ends.
• Set will-change only while animating, then clear it with the other temporary styles at settled.
• Pre-paint hiding of marked items needs the framework skill's no-script path; the CSS rule alone is not enough.
• Reduced motion snaps to the settled state and still fires every completion callback.
• One ambient effect per surface, paused off screen, stopped on exit, destroyed on unmount.
• A settled width change resets the page: remount and replay the entrance. Height alone never counts.
• Pointer states have keyboard parity: hover(true) on focus, hover(false) on blur.

Verification

Follow verification.md, then the framework skill's own verification.