New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Awwwards-Level React Animations

by Hainrixz in Hainrixz/editor-pro-max

Guides React animation work with GSAP, Motion, Anime.js and Lenis for scroll effects, page transitions, text effects and generative visuals, with a library decision table.

Custom licenceAuto-check passedFrontend & Design

Install Awwwards-Level React Animations

skills CLI
$ npx skills add Hainrixz/editor-pro-max --skill awwwards-animations -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install Hainrixz/editor-pro-max awwwards-animations --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/Hainrixz/editor-pro-max.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/awwwards-animations .claude/skills/awwwards-animations && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
awwwards-animations
GitHub stars
264
Token cost
~4.4k tokens
SKILL.md length
585 words
Files
15 (incl. references)
Skills in repo
6
Repo updated
First seen
Licence
Custom licence

At a glance

Guides React animation work with GSAP, Motion, Anime.js and Lenis for scroll effects, page transitions, text effects and generative visuals, with a library decision table.

  • Works in 11 steps: GSAP Configuration (app-wide) → Lenis + GSAP ScrollTrigger Integration… → Magnetic Cursor (GSAP + useGSAP) → …
  • Building scroll-driven animations with GSAP ScrollTrigger in React
  • SKILL.md covers Decision Matrix, Installation (Latest Stable -…, React Setup and Core Patterns (React), plus 9 more sections
  • Calls npm

What it does

React-first and strict about 60fps, this skill opens with a decision matrix that maps each task to a library: GSAP with ScrollTrigger and useGSAP for scroll-driven work and complex timelines, Lenis with ReactLenis for smooth scrolling, Motion (Framer Motion) for React-native animation with useScroll and useTransform, Anime.js for light effects, and Three.js with GSAP for 3D. Canvas 2D, p5.js, Zdog, Tone.js and Matter.js cover generative, pseudo-3D, audio-reactive and 2D physics work.

It gives install commands, an app-wide GSAP configuration marked for the Next.js App Router, and the Lenis plus ScrollTrigger integration that it calls critical. Reference files go deeper on GSAP, Motion, Anime.js and Lenis in React, performance, text effects, algorithmic art, geometric puzzles and shapes, audio-reactive visuals, 2D physics and design philosophy. The description also lists triggers such as magnetic effects, horizontal scroll, pinned sections, kinetic typography, glitch effects and fractals.

When your agent uses it

  • Building scroll-driven animations with GSAP ScrollTrigger in React
  • Adding smooth scrolling with Lenis alongside ScrollTrigger
  • Creating page transitions, text reveals and parallax effects
  • Making generative or kinetic typography visuals on a canvas
  • Choosing between GSAP, Motion and Anime.js for a given animation

Example prompts

  • “Add a pinned horizontal scroll section to our Next.js homepage using GSAP and useGSAP.”
  • “Set up Lenis smooth scrolling that stays in sync with ScrollTrigger.”
  • “Build a magnetic cursor and page transitions with Motion's AnimatePresence.”
  • “Create a flow-field generative background on a canvas for the hero section.”

Requirements

  • A React project, ideally Next.js with the App Router
  • npm packages such as gsap and @gsap/react

Workflow steps

11 steps, taken from the step headings in SKILL.md.

  1. GSAP Configuration (app-wide)
  2. Lenis + GSAP ScrollTrigger Integration (Critical)
  3. Magnetic Cursor (GSAP + useGSAP)
  4. Magnetic Button (Motion)
  5. Parallax Hero (GSAP + useGSAP)
  6. Text Character Reveal (Motion)
  7. Image Reveal (GSAP)
  8. Glitch Text Effect (CSS + GSAP)
  9. Fractal Tree (Canvas 2D)
  10. Geometric Dissection (SVG + GSAP)
  11. Brutalist Grid (Motion)

What it can do on your machine

Read from SKILL.md and the folder at commit 743f46c. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Awwwards-Level React Animations loads about 4.4k tokens when it runs, and up to ~58k if it reads all its reference files. Until then it costs about 244 tokens; SKILL.md has 585 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~244
When it runs · the whole SKILL.md, loaded when a task matches
~4.4k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~58k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 585 words (~4,431 tokens).

“Create premium web animations at Awwwards/FWA quality level. React-first approach. 60fps non-negotiable.”

— opening of SKILL.md by Hainrixz, Custom licence
name
awwwards-animations

Read the full SKILL.md on GitHub

Files

SKILL.md and 14 other files (references) in .agents/skills/awwwards-animations of Hainrixz/editor-pro-max.

  • SKILL.md
  • README.md
  • references/advanced-patterns.md
  • references/algorithmic-art.md
  • references/animejs-react.md
  • references/audio-reactive.md
  • references/design-philosophy.md
  • references/geometric-puzzles.md
  • references/geometric-shapes.md
  • references/gsap-react.md
  • references/lenis-react.md
  • references/motion-patterns.md
  • references/performance.md
  • references/physics-2d.md
  • references/text-effects.md

Open the folder on GitHubat commit 743f46c

Compare with similar skills

Awwwards-Level React Animations next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Awwwards-Level React Animations compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Awwwards-Level React Animations this skillHainrixz/editor-pro-max264—~4.4kAutomated safety check: PassCustom licence
GSAP for Reactgreensock/gsap-skills16k3 repos~1.6kAutomated safety check: PassMIT
Animatedelphi-ai/animate-skill113—~1.3kAutomated safety check: PassNone
Gsap Framer Scroll Animationgithub/awesome-copilot40k1 repos~1.6kAutomated safety check: PassMIT
Modern Web Designfreshtechbro/claudedesignskills1k—~6.6kAutomated safety check: PassMIT
Lottie Animation Integrationfreshtechbro/claudedesignskills1k—~4.5kAutomated safety check: PassMIT

Similar skills

  • GSAP for React

    greensock/gsap-skills

    Shows how to run GSAP animations in React and Next.js with the useGSAP hook, refs, scoped selectors and automatic cleanup on unmount.

    16k GitHub starsUsed in 3 repos~1.6k tokens
    Frontend & DesignAuto-check passed

  • Animate

    delphi-ai/animate-skill

    Animation patterns and best practices for Next.js/React applications.

    113 GitHub stars~1.3k tokensUpdated 8 mo ago
    Frontend & DesignAuto-check passed

  • Gsap Framer Scroll Animation

    github/awesome-copilot

    Official

    A skill your agent uses whenever the user wants to build scroll animations, scroll effects, parallax, scroll-triggered reveals, pinned sections, horizontal scroll, text animations, or any motion…

    40k GitHub starsUsed in 1 repo~1.6k tokens
    Frontend & DesignAuto-check passed

  • Modern Web Design

    freshtechbro/claudedesignskills

    Modern web design trends, principles, and implementation patterns for 2024-2025.

    1k GitHub stars~6.6k tokensUpdated 10 mo ago
    Frontend & DesignAuto-check passed

  • Lottie Animation Integration

    freshtechbro/claudedesignskills

    Implements After Effects Lottie animations in web and React apps: picking JSON or dotLottie format, a rendering library, and a data source, with an optimizer script.

    1k GitHub stars~4.5k tokensUpdated 10 mo ago
    Frontend & DesignAuto-check passed

  • Motion Dev Animations

    199-biotechnologies/motion-dev-animations-skill

    Creates 120fps GPU-accelerated animations with Motion.dev (Framer Motion successor) for React, Next.js, Svelte, and Astro projects.

    133 GitHub starsUsed in 1 repo~2.8k tokens
    Frontend & DesignAuto-check: notes

More from Hainrixz/editor-pro-max

  • Animated React Component Libraries

    Hainrixz/editor-pro-max

    Helps choose and drop in animated React components from Magic UI and React Bits for landing pages, marketing sites and dashboards, instead of hand-coding animations.

    264 GitHub starsUsed in 1 repo~5.7k tokens
    Auto-check passed

  • Remotion Render via inference.sh

    Hainrixz/editor-pro-max

    Renders MP4 videos from React and Remotion TSX code through the inference.sh CLI, with settings for resolution, frame rate, duration and codec.

    264 GitHub starsUsed in 2 repos~2k tokens
    Auto-check passed

  • Explainer Video Guide

    Hainrixz/editor-pro-max

    Guides explainer video production from script formulas and pacing rules to scene generation with the inference.sh command line.

    264 GitHub starsUsed in 1 repo~2.2k tokens
    Auto-check passed

  • Motion Designer

    Hainrixz/editor-pro-max

    Advanced motion designer with decades of After Effects and motion graphics experience, specialized in creating engaging video specifications for Remotion.

    264 GitHub stars~2.3k tokensUpdated 6 mo ago
    Auto-check passed

  • Playwright MCP Browser Control

    Hainrixz/editor-pro-max

    Drives a live browser through the Playwright MCP server to navigate, inspect, fill forms and screenshot pages, with snapshot-first habits and output-size care.

    264 GitHub stars~2k tokensUpdated 6 mo ago
    Auto-check passed

Works with

Categories

Questions about Awwwards-Level React Animations

What does Awwwards-Level React Animations do?

Guides React animation work with GSAP, Motion, Anime.js and Lenis for scroll effects, page transitions, text effects and generative visuals, with a library decision table. js with GSAP for 3D.js cover generative, pseudo-3D, audio-reactive and 2D physics work.

When should I use Awwwards-Level React Animations?

Awwwards-Level React Animations fits situations like: building scroll-driven animations with GSAP ScrollTrigger in React; adding smooth scrolling with Lenis alongside ScrollTrigger; creating page transitions, text reveals and parallax effects; making generative or kinetic typography visuals on a canvas.

How do I install Awwwards-Level React Animations in Claude Code?

Run `npx skills add Hainrixz/editor-pro-max --skill awwwards-animations -a claude-code`. Or copy the skill folder (.agents/skills/awwwards-animations in Hainrixz/editor-pro-max) into .claude/skills/awwwards-animations in your project. Claude Code loads it when a task matches its description.

How do I install Awwwards-Level React Animations in Codex?

Run `npx skills add Hainrixz/editor-pro-max --skill awwwards-animations -a codex`. Or copy the skill folder (.agents/skills/awwwards-animations in Hainrixz/editor-pro-max) into .agents/skills/awwwards-animations in your project. Codex loads it when a task matches its description.

Can I use Awwwards-Level React Animations in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Hainrixz/editor-pro-max --skill awwwards-animations -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/awwwards-animations, .gemini/skills/awwwards-animations, .github/skills/awwwards-animations and .opencode/skills/awwwards-animations in your project.

What does Awwwards-Level React Animations need to run?

Going by SKILL.md and its folder, Awwwards-Level React Animations needs the command-line tools its instructions call (npm). Our summary lists: A React project, ideally Next.js with the App Router; npm packages such as gsap and @gsap/react.

Does Awwwards-Level React Animations access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Awwwards-Level React Animations safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Awwwards-Level React Animations use?

Awwwards-Level React Animations has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.

How many tokens does Awwwards-Level React Animations use?

About 4.4k tokens (SKILL.md is roughly 18k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 54k tokens, read only when the agent opens those files.

What are the alternatives to Awwwards-Level React Animations?

Skills that share tags, products or a category with Awwwards-Level React Animations: GSAP for React (greensock/gsap-skills, 16k stars), Animate (delphi-ai/animate-skill, 113 stars), Gsap Framer Scroll Animation (github/awesome-copilot, 40k stars) and Modern Web Design (freshtechbro/claudedesignskills, 1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Awwwards-Level React Animations?

Hainrixz (a GitHub user) maintains it in Hainrixz/editor-pro-max, which has 264 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on March 26, 2026.

Source: Hainrixz/editor-pro-max on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.