// an 8-agent studio

AntiSlopUI

00

STOP SHIPPING SLOP.

An8-agentstudioforClaudeCodethatbuildsimmersivesites,groundedinrealAPIs,zerohallucinations.

// the anti-slop promise

Five rules, demonstrated rather than listed. Every section of this page is one of them, running.

Motion has a reason.

Every animation earns its place or it is cut. If removing it makes the message clearer, remove it. Motion serves communication, never decoration.

Easing is identity.

One ease, site-wide. expo.out on every entrance. [0.16, 1, 0.3, 1] on every wipe. Straying from the easing signature is straying from the brand.

Type is the hero.

Before a single animation runs, the type alone must hold the composition. Oversized, condensed, intentional. The font does the work that illustration used to do.

Space and asymmetry.

Break the center. Negative space is not emptiness; it is tension, direction, and rest. Symmetric layouts are forgettable. Asymmetric grids are memorable.

Restraint in color, boldness in motion.

Near-black, warm off-white, one electric lime. Color used on less than 8% of pixels. The restraint is what makes the lime land.

// the studio floor

// studio agent01 / 08

Creative Director

// creative-director

Plans the full build.

Reads the brief, designs the section-by-section plan, writes the delegation table, coordinates all specialists so nothing collides.

// studio agent02 / 08

Frontend Architect

// frontend-architect

Scaffolds the foundation.

Next.js App Router + TypeScript + Tailwind. One Lenis instance, one rAF on the GSAP ticker. Fonts, tokens, reduced-motion hook, typed mount points. The skeleton motion hangs on.

// studio agent03 / 08

Animation Specialist

// animation-specialist

Builds the GSAP timelines.

SplitText line reveals, ScrollTrigger scrubs, clip-path wipes, the preloader mask exit. Every timeline is scoped, cleaned up, and reduced-motion-safe.

// studio agent04 / 08

Motion Specialist

// motion-specialist

Handles Motion for React.

AnimatePresence route transitions, useMotionValue number tickers, word-variant reveals, spring configs. Motion and GSAP never touch the same property on the same element.

// studio agent05 / 08

Parallax Specialist

// parallax-specialist

Owns depth and scroll.

Lenis velocity, ScrollTrigger horizontal pin, counter-parallax splits, ThemeScroll sentinels. One pin total. The studio floor horizontal track is this agent's signature.

// studio agent06 / 08

Interaction Specialist

// interaction-specialist

Builds the pointer layer.

Custom cursor (lime dot, mix-blend-difference, gsap.quickTo), magnetic CTAs, ZProximity cipher decode on install commands. Everything gated behind (pointer: fine).

// studio agent07 / 08

UI/UX Designer

// uiux-designer

Sets the design system.

Token values, type scale clamps, spacing rhythm, contrast verification, focus styles. The CSS that makes WCAG AA hold in both ink and paper theme states.

// studio agent08 / 08

QA Reviewer

// qa-reviewer

The ship gate.

tsc --noEmit, npm run build, 60fps on mid-tier, zero double-driven properties, API truth check, no invented eases or hallucinated imports. Nothing ships without this.

// the stack & reference library

What it runs on.

01FrameworkNext.js App Router + TypeScript
02StylesTailwind CSS v3
03Animation coreGSAP + ScrollTrigger + SplitText
04Smooth scrollLenis
05React motionMotion for React (motion/react)
06Proximity FXZProximity (z-proximity-engine)

Grounded in references.

0references
0libraries
0hallucinated APIs
setup.md

Foundation: Next.js, fonts, reduced-motion, SmoothScrollProvider

smooth-scroll.md

Lenis canonical wiring, Lenis/GSAP ticker, options

scroll-animation.md

ScrollTrigger patterns, clip-path reveals, horizontal gallery

text-effects.md

SplitText, number ticker, scramble, word-illuminate

patterns-recipes.md

containerAnimation, counter-parallax, stagger+scrub

design-principles.md

Easing signature, preloader pattern, art direction

zproximity.md

Cipher preset, fillText preset, fine-pointer gate

// the statement

// how to install

Get it running.

Published on the Adefebrian/AntislopUI marketplace. Add it, then install, from your terminal or inside a Claude Code session. Hover a line to highlight it; every command stays copyable and selectable.

claude / plugin install

// terminal

claude plugin marketplace add Adefebrian/AntislopUI
claude plugin install antislopui@antislopui

// inside claude code

/plugin marketplace add Adefebrian/AntislopUI
/plugin install antislopui@antislopui

Source: github.com/Adefebrian/AntislopUI