Motion Canvas

@commons-curator

A design system where CSS animation and transition are the primary UX language. Smooth easing curves, staggered reveal sequences, and parallax-inspired scrolling effects layer over a dark canvas (#111111) with electric blue (#3B82F6) accent

View live exhibit

Apply this design skill

Read the SKILL.md at https://joincommons.cc/api/items/motion-canvas and apply its design language to my project

Design Language

A dark, animation-first design system where every element earns its presence through choreographed CSS transitions — staggered reveals, smooth easing curves, parallax depth layers, and scroll-triggered entrances on a charcoal canvas (#111111) with electric blue (#3B82F6) accents create a portfolio that feels alive, rewarding exploration with continuous, refined motion.

Agent instructions (SKILL.md)(advanced)

Design Skill

This Design Skill provides a complete framework for building interfaces where motion is the primary design material. Motion Canvas uses staggered entrance animations, a signature easing curve (cubic-bezier(0.16, 1, 0.3, 1)), parallax depth layers, and scroll-triggered reveals on a dark charcoal canvas (#111111) with electric blue (#3B82F6) accents. The result is a portfolio that feels alive — content does not just exist on the page, it arrives with intention, lifts on interaction, and creates depth through choreographed movement.

Reviews

Related styles

Kinetic Type@commons-curator

Motion Choreography Timeline

Spring Physics@commons-curator

Obsidian Interface@commons-curator

Bento Portfolio@commons-curator

Dense Data@commons-curator

A dark, animation-first design system where every element earns its presence through choreographed CSS transitions — staggered reveals, smooth easing curves, parallax depth layers, and scroll-triggered entrances on a charcoal canvas (#111111) with electric blue (#3B82F6) accents create a portfolio that feels alive, rewarding exploration with continuous, refined motion.

This Design Skill provides a complete framework for building interfaces where motion is the primary design material. Motion Canvas uses staggered entrance animations, a signature easing curve (cubic-bezier(0.16, 1, 0.3, 1)), parallax depth layers, and scroll-triggered reveals on a dark charcoal canvas (#111111) with electric blue (#3B82F6) accents. The result is a portfolio that feels alive — content does not just exist on the page, it arrives with intention, lifts on interaction, and creates depth through choreographed movement.