What Is the awwwards-animations Skill? Installation, Is It Free, License and What It Does

You copy the skill into Claude Code; when you ask the agent for a scroll, parallax, cursor or text animation, it writes the code in React with GSAP, Motion (Framer Motion), Lenis and Anime.js. It's a community skill made up only of Markdown files: it doesn't produce a ready-made site or Lottie file, it gives the agent instructions and sample code. It's free and needs no account or key. The README says "MIT License," but there's no LICENSE file in the repository. It's a one-person project: 2 commits, last updated February 9, 2026, 15 stars. The npx install line in the README contains a placeholder, so you need to use the manual copy method.

What it does: Teaches Claude Code to write scroll and text animations in React
Type: Skill (Markdown instructions only)
Developer: Community (personal GitHub account)
License: The README says MIT; no LICENSE file
Where: Claude Code (README)
Last updated: February 9, 2026
Cost: Free, no account

What Is awwwards-animations Used For?

A skill is a package of instructions that teaches an agent how to work on a topic. This skill lets Claude Code write scroll-triggered animations (parallax, sticky sections, horizontal scrolling), smooth scrolling and cursor effects on React sites using ready-made patterns. The Awwwards in its name is a site that lists award-winning websites; the skill isn't a service connected to that site, just instructions aiming for that level.

Having it write scroll animations for a siteWhat you get: React animation code written by the agentNeeds a separate setup Wiring smooth scrolling to ScrollTriggerWhat you get: SmoothScroll component and ScrollTrigger hookupNeeds a separate setup

The skill doesn't produce a ready-made site or Lottie file. All 16 files in the repository are Markdown and sample code; there are no scripts, hooks or MCP. Claude Code writes the site, and the quality of the output depends on the agent and your project. The "60fps guaranteed" line in the README is the project's own promise.

Who it's for: developers building React landing sites with Claude Code who don't want to explain scroll animations from scratch.

What's Inside awwwards-animations?

File	Contents
SKILL.md	A table matching tasks to libraries, React setup, 9 quick patterns, easing and duration values, accessibility, performance rules, common mistakes, a testing checklist
references/ (13 files)	GSAP, Motion, Anime.js and Lenis patterns; Three.js and WebGL; Matter.js physics; Tone.js audio; SVG, Canvas and p5.js shapes; generative art; text effects; geometric puzzles; design philosophy; performance

The README's structure list counts 9 reference files, but the repository has 13 (the ones added later weren't written into the README). There are no network calls in SKILL.md or the reference files; only sample npm commands and documentation links.

The reference files mark plugins such as SplitText and MorphSVG as "Club GSAP." Check the current license terms for these plugins at gsap.com.

How Do You Install awwwards-animations?

Requirements: Claude Code and a React project where the animation will be written. No account, API key or plan is needed. Here's the manual copy method from the README; pick one of the two.

For all projects (README)› cp -r awwwards-animations ~/.claude/.agents/skills/

For this project only (README)› cp -r awwwards-animations .claude/skills/

These commands assume you already have the folder; the README doesn't explain how to download the repository. Download the repository from GitHub and rename the folder to awwwards-animations (the repository name is awwwards-animations-skill). The npx line in the README (npx skills add YOUR_USERNAME/awwwards-animations) contains a placeholder and won't work as is.

The README gives ~/.claude/.agents/skills/ as the global path, while the catalog lists ~/.claude/skills/. The README doesn't make clear which one is Claude Code's current skills folder; check the Claude Code documentation.

A new project also needs the animation packages. The commands the README recommends:

Project packages (README)› npm install gsap @gsap/react lenis motion animejs

Optional: physics and audio (README)› npm install matter-js tone

How Do You Use awwwards-animations?

You don't need to call it separately; the README says Claude uses the skill on its own when you ask for an animation. Write your request normally. Example prompts from the README:

Parallax hero section (README)"Create a hero section with parallax and smooth scroll"

Physics and audio (README)"Make a grid of blocks that fall with physics and play sounds on collision"

Magnetic cursor (README)"Build a magnetic cursor with blend mode difference"

To respect the reduced motion preference, add "turn off the animation if prefers-reduced-motion is on" to your prompt. SKILL.md includes this rule in its accessibility section, but check the code the agent writes.

Which Programs Does awwwards-animations Work With?

Claude CodeYes	The README says "A comprehensive Claude Code skill" and describes installation only with its folders.
Cursor, Codex and other agentsUnclear	The README doesn't say anything.
Claude.ai (web chat)Unclear	The README doesn't say anything.

The instructions are in English; you can write your prompt in Turkish if you like, but Turkish reply support isn't stated in the documentation and depends on the agent's language.

What Does awwwards-animations Access?

Reads

Nothing on its own: it only gives the agent instructions.

Writes

The skill doesn't write anything. The README recommends installing the animation packages in a new project; the agent writes them and the animation code into your project under its own permissions, and the approval rules apply.

Deletes

The skill doesn't delete anything.

Data

There are no network calls in the skill files.

The GitHub Security Advisories list is empty (October 15, 2026). An OSV check doesn't apply: the repository isn't an npm or PyPI package. Advisories for the project packages it has you install should be checked separately. This doesn't mean "safe."

Is awwwards-animations Free, and What's Its License?

Using the skill is free: there's no paid plan, account or key, and no price. The terms of the agent you use (Claude Code) and of the packages installed in your project are separate.

What the README says

At the end it says "MIT License" and states that it can be used in personal or commercial projects.

What's missing from the repository

There's no LICENSE file and the GitHub license field is empty: the statement is only in the README.

Since there's no license file, you may want to ask the repository owner for confirmation before using it in a commercial project. This is not legal advice.

Common Problems

What's happening	What to do
The npx command doesn't work with "YOUR_USERNAME"	The line in the README is a placeholder. Use the manual copy method.
There's an open issue in the repository (#1, "false positive alert")	Its body is two images and there's no reply; which alert it refers to isn't written. Before installing, read SKILL.md and the references/ files yourself; they're all plain Markdown.

How Do You Uninstall awwwards-animations?

Delete the folder: Delete the awwwards-animations folder where you copied it (~/.claude/.agents/skills/ or your project's .claude/skills/ folder). The README doesn't explain uninstalling.
Remove the packages separately: If you're not using the animation packages installed in your project, remove them separately with npm uninstall.

Frequently asked questions

Does awwwards-animations produce a ready-made animated site?

No. It's Markdown files that give the agent instructions and sample code; Claude Code writes the site.

Is awwwards-animations free, and what's its license?

It's free; no account or key. The README says "MIT License," but there's no LICENSE file in the repository and GitHub doesn't show a license. For commercial use, it's wise to ask the repository owner for confirmation.

Which programs does awwwards-animations work with?

The README says "Claude Code skill" and only gives installation steps for Claude Code. The documentation says nothing about other agents or Claude.ai.

Is awwwards-animations up to date?

The last commit was February 9, 2026, with 2 commits in total; there are no tags or releases. The README makes no maintenance promise.

Related guides

Sources

Not clear in the official sources: Whether it works in Cursor, Codex and Claude.ai web chat · Claude Code's current skills folder (README ~/.claude/.agents/skills/, catalog ~/.claude/skills/) · whether the MIT statement holds without a LICENSE file · what the alert in issue #1 is · the current license of GSAP plugins such as SplitText and MorphSVG · OSV advisories (it isn't a package) · Turkish replies. Each one is covered in its section.