Can I create liquid or organic shapes with this skill?

Yes, the skill includes specific patterns for SVG path morphing to create 'blob' animations and fluid liquid-fill effects.

Are the glitch effects performant?

The glitch effects use optimized CSS clip-paths and hardware-accelerated transforms to ensure high performance without sacrificing visual complexity.

What libraries does this skill primarily use?

This skill focuses on React-based projects using Framer Motion for animation logic and Tailwind CSS for styling and layout.

Does it support interactive physics-like movements?

Yes, it provides implementations for magnetic buttons and elastic containers that respond to mouse movement and clicks with spring physics.

Creative Animation Effects

Name: Creative Animation Effects
Author: Lobbi-Docs

byLobbi-Docs

•

Design Tools

Implements advanced artistic animations including liquid effects, shape morphing, and glitch aesthetics for high-impact React UIs.

The Creative Effects skill empowers Claude to design and implement sophisticated, non-standard visual animations using React and Framer Motion. It specializes in complex techniques like SVG path morphing, fluid simulations, magnetic interactions, and CSS-based glitch effects. This skill is ideal for developers building landing pages, creative portfolios, or interactive dashboards that require a unique visual personality and polished user experience that goes beyond standard transitions.

Key Features

01Seamless integration with Framer Motion and Tailwind CSS

02Interactive magnetic and elastic UI components

03Custom-designed creative loaders and DNA-helix progress indicators

04High-performance glitch and distortion visual effects

053 GitHub stars

06Advanced SVG path morphing and fluid blob animations

Use Cases

01Building immersive landing pages with fluid transitions and liquid buttons

02Creating unique, personality-driven loading states and reveal animations

03Designing experimental interactive elements for portfolios and creative agencies

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add lobbi-docs/claude creative-effects

For use in Claude.ai and ChatGPT

Download Skill