Ship awwwards-grade, immersive animated websites in React and Next.js, with motion that looks hand-built by a studio, never generic.
A Claude Code and Cowork plugin: one powerful skill plus an eight-agent studio team, grounded in the real docs for GSAP, Lenis, Motion (Framer Motion), Anime.js, and ZProximity, and in the source of 14 awwwards-style builds. Zero invented APIs.
Generic motion is worse than no motion.
Most AI-built sites look the same: everything fades up 20px on scroll, the same ease on every element, a drop shadow on every card, centered single-column everything. AntiSlopUI refuses that.
It builds with intent: an expressive easing signature, oversized type as the hero, mask-clipped line reveals, smooth scroll, pinned and horizontal sections, scroll-driven video, custom cursors, magnetic and proximity effects, and a few precise signature moves per page while everything else stays quiet. Every API it writes is verified against the real library docs, so the output runs, not just compiles.
Claude Code
claude plugin marketplace add Adefebrian/AntislopUI
claude plugin install antislopui@antislopuiOr inside an interactive session:
/plugin marketplace add Adefebrian/AntislopUI
/plugin install antislopui@antislopui
npm / npx
npx antislopui install # copy the plugin into the current folder
npx antislopui path # print the bundled plugin pathCowork
Download the packaged plugin and press Save plugin on the card. The skill triggers on any request to build an animated, immersive, or awwwards-style front-end.
Copy, paste, adapt. The more concrete you are about palette, type, and the signature moves, the better the result.
One-shot site builds
Build an immersive agency landing page with AntiSlopUI: a counter preloader,
a mask-line SplitText hero reveal, Lenis smooth scroll, a pinned horizontal
project gallery, a custom magnetic cursor, and a scribble page transition.
Near-black and off-white with one acid-green accent. Honor reduced motion.
Give me an awwwards Site of the Day feel for a coffee brand using AntiSlopUI: a scroll-driven
hero video pinned for one viewport, converging two-image parallax in the
about section, a theme that shifts per section, and a marquee with massive
display type. Keep it to three signature moves, everything else quiet.
Signature moves (drop into an existing page)
Add a GSAP SplitText hero where each line rises from behind a mask with
expo.out, then reveal the hero image with an expanding clip-path.
Make the projects section a pinned horizontal scroll, and decode each card
title with a ZProximity cipher as the cursor gets near.
Add a custom cursor that grows on links plus a magnetic CTA button, gated to
fine-pointer devices so touch and keyboard are unaffected.
Drive the hero video frame by frame from scroll position, pinned, and add a
two-bar underline wipe on the nav links.
Pull from real awwwards patterns
Use the converging two-image parallax and the sticker velocity-push patterns
from AntiSlopUI for the about and footer sections.
Build the macOS-style dock nav with ZProximity: nearest icon scales and goes
magnetic, neighbors repel, locked to the x axis.
Polish, audit, fix
This hero feels flat and templated. Critique it against the AntiSlopUI
anti-slop design system and give concrete type, color, spacing, and motion fixes.
Audit my animation code with AntiSlopUI: flag any invented GSAP or Motion API,
any property that triggers layout in a scroll or pointer path, any missing
reduced-motion path, and any property driven by two libraries at once.
Convert this generic fade-up-everything page into something with intent: one
signature move per section and a single consistent easing signature.
Direct the studio team
Plan this build with the creative director first, then have the frontend
architect scaffold, the animation, motion, parallax, and interaction
specialists build in parallel, and the QA reviewer gate the result before done.
Use the parallax specialist for a depth-layered hero and the interaction
specialist for a magnetic dock nav. Keep the easing signature consistent.
One skill, antislopui, a lean orchestrator with 16 grounded references:
setup, smooth-scroll, scroll-animation, motion-react, gsap-plugins, anime, text-effects, cursor-magnetic, zproximity, micro-interactions, page-transitions-preloader, component-libraries, effects-catalog, patterns-recipes, design-principles, agent-team.
Eight specialist agents, a studio team that builds and reviews in parallel:
| Agent | Owns |
|---|---|
creative-director |
Plan, art direction, the 2-3 signature moves, delegation |
frontend-architect |
Next.js + Tailwind, the Lenis + GSAP smooth-scroll foundation, tokens |
animation-specialist |
GSAP and Anime.js timelines, text reveals, SVG draw and morph |
motion-specialist |
Motion (Framer Motion): variants, AnimatePresence, layout, motion values |
parallax-specialist |
Lenis, ScrollTrigger, pin, horizontal scroll, scroll-driven video, depth |
interaction-specialist |
Custom cursor, magnetic, ZProximity, micro-interactions |
uiux-designer |
Design system, layout, typography, color, anti-slop critique |
qa-reviewer |
The ship gate: verifies every API, audits performance and accessibility |
| Library | What AntiSlopUI does with it |
|---|---|
| GSAP + ScrollTrigger | scrub timelines, pinning, horizontal scroll, scroll-driven video, SplitText, Flip, MorphSVG, DrawSVG, MotionPath, Physics2D |
| Lenis | smooth scroll wired into the GSAP ticker, one source of truth |
| Motion (Framer Motion) | variants, gestures, AnimatePresence, layout and shared-element, scroll-linked motion values |
| Anime.js v4 | standalone timelines, SVG draw and morph, draggables, text split |
| ZProximity | magnetic, tilt, repel, cipher, dock, fill-text proximity effects |
| Tripled, UseLayouts, GoeyToast | curated component sources, always restyled to your brand |
For a full build, AntiSlopUI runs like a studio: the creative director locks the concept and the few signature moves, the frontend architect scaffolds the smooth-scroll foundation, the four craft specialists (animation, motion, parallax, interaction) build their sections in parallel from the designer's tokens, and the QA reviewer gates the result. Every role consults the grounded references and never invents an API, so the zero-hallucination guarantee holds across the whole team.
For a single effect, the skill is used directly without the team.
claude plugin validate . # validates marketplace.json
claude plugin validate ./plugins/antislopui # validates the plugin and its frontmatterSee PUBLISH.md for releasing to GitHub, the Claude Code marketplace, and npm.
AntiSlopUI by brian (Ade Febrian). GitHub @Adefebrian | Instagram @artificial.brian
Built from primary documentation and real awwwards source for zero-hallucination accuracy.