Updated 1mo ago
by noahneancy-byte
frontend-ui-motion-skills
Reusable Codex Skills for production-ready React UI motion: particle text and olive silk WebGL backgrounds.
30 GitHub stars (30)
Steady at 30 stars — no new stars in the 20 days since Sep 26.
- 4 skills (4 skills found in its SKILL.md files)
- 0 forks (0 forks)
- 1mo ago last update (Last updated 1mo ago)
Install
Skills CLI
npx skills add noahneancy-byte/frontend-ui-motion-skills
Asks which skills and agents to install. Just one: npx skills add noahneancy-byte/frontend-ui-motion-skills --skill olive-silk-background — add -g for every project.
Claude Code
git clone https://github.com/noahneancy-byte/frontend-ui-motion-skillscp -r "frontend-ui-motion-skills/skills/olive-silk-background" ~/.claude/skills/
Copies the olive-silk-background skill into ~/.claude/skills/ for every project (use .claude/skills/ for one project). Repeat for the other skills listed below.
Plugin
/plugin marketplace add noahneancy-byte/frontend-ui-motion-skills
Run inside Claude Code if the repository ships a plugin marketplace, then pick plugins from /plugin.
Skills can run code on your machine — read the SKILL.md first.
What it does
In the author's own words, from each skill's SKILL.md.
-
olive-silk-background
Add or adapt the signature olive-green animated silk WebGL background in React interfaces. Use when a user asks for the soft diagonal fabric-fold effect, the referenced olive silk look, or wants this exact reusable background applied to a page or component; do not use for unrelated gradients or static image generation.
skills/olive-silk-background/SKILL.md on GitHub (opens in a new tab) -
particle-text-animation
Add or adapt interactive particle-formed text in React interfaces with Canvas, including scatter-to-glyph assembly, pointer repulsion, glow, and responsive text sampling. Use when the user asks for particle text, text made from dots, or the React Bits-style Particle Text effect; do not use for ordinary text transitions or unrelated particle backgrounds.
skills/particle-text-animation/SKILL.md on GitHub (opens in a new tab) -
pixel-swap-html
Build or adapt a reusable pixel-grid content swap in plain HTML, CSS, and JavaScript with the bundled DOM and Web Animations module. Use when two card, hero, image, or text states should exchange through staggered pixel windows without React or a build step; do not use for image pixelation filters, glitch effects, or ordinary fades.
skills/pixel-swap-html/SKILL.md on GitHub (opens in a new tab) -
ripple-distortion-html
Build or adapt a reusable image ripple-distortion interaction in plain HTML, CSS, and JavaScript with the bundled zero-dependency WebGL module. Use when a page needs cursor- or click-driven refractive ripples without React or a build step; do not use for ordinary CSS button ripples, canvas water simulations, or unrelated distortion effects.
skills/ripple-distortion-html/SKILL.md on GitHub (opens in a new tab)
No skill matches that filter.
Review before you install
A skill is a set of instructions and scripts your agent will follow, and it can run code on your machine. Read the SKILL.md and any scripts first — this listing is not a security review.