Web motion library

Skill Sheshiyer/skill-clusters/skills/web-motion-library

Select and implement interactive web animations, 3D elements, and pre-built React/Tailwind/Framer Motion components for landing pages and hero sections. Use when adding hover effects, morphing shapes, hero sections with background video, or choosing from Magic UI's 50+ animated component library.From its SKILL.md

Install

npx -y skills add Sheshiyer/skill-clusters --skill web-motion-library

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.9 KB, 549 tokens by cl100k_base, as published. Nobody here has run it

Web Motion Library

Reference library for interactive web animations and pre-built component systems. Covers hover motion patterns, morphing background shapes, full-screen hero sections, and the Magic UI component library (50+ animated React/Tailwind/Framer Motion components).

When to Use

Adding interactive hover animations to image grids or text rows
Implementing morphing SVG background shapes
Building full-screen hero sections with background video
Selecting pre-built animated components from Magic UI
Choosing between animation approaches for landing pages

Animation Patterns

Pattern	Source	Tech Stack	Best For
Hover Motion Grid	sink.design / Codrops	CSS + JS	Image grids that respond to mouse movement, intro animations
Morphing Shapes	Codrops	SVG + CSS	Organic background transitions, exhibition-style layouts
Hero Section	Viktor Oddy	React + Tailwind CSS	Full-screen hero with background video, Rubik font, SVG CTA
Magic UI Components	magicui.design	React + Tailwind + Framer Motion	50+ pre-built animated components (marquees, borders, cards)

Component Selection Guide

When you need...

Need	Use	Why
Mouse-reactive image grid	Hover Motion pattern	Rows move in sync with cursor, supports intro animation reveal
Organic background animation	Morphing Shapes pattern	SVG shape transitions, exhibition/gallery aesthetic
Full-screen landing hero	Viktor Oddy Hero	Background video, Rubik typography, custom SVG button
Animated marquee/ticker	Magic UI: Marquee	Infinite scroll with pause-on-hover
Glowing card borders	Magic UI: Shine Border	Animated gradient border effect
Notification feed	Magic UI: Notification List	Stacked animated notification cards
Social proof logos	Magic UI: Company Logos	Auto-scrolling logo strip
Concentric circles	Magic UI: Circles	Expanding ring animation
Ripple effects	Magic UI: Ripple	Click/hover ripple animations

Key Technical Notes

Magic UI is a shadcn/ui companion — install components individually, not as a monolithic package
All Magic UI components are open-source (React + TypeScript + Tailwind + Framer Motion)
Hero section uses Rubik font (Google Fonts) with tight line-height (0.98) and negative letter-spacing (-2px to -4px)
SVG CTA buttons use custom path fills instead of standard CSS backgrounds for unique shapes

See references/patterns.md for implementation details and component specifications.

What ships with it: 3 files

3234.7 KB alongside SKILL.md