Mode:
Duration:
1
Coding works best on desktop or with an external keyboard.
Simple Fade In - Preact-motion Typing CST Test
Simple Fade In — Preact-motion Code
Fades a div in on mount
# preact_motion/demo/App1.jsx
import { h } from 'preact'
import { Motion } from 'preact-motion'
export default function App() {
return (
<Motion defaultStyle={{ opacity: 0 }} style={{ opacity: 1 }}>
{style => (
<div style={{ width: 100, height: 100, background: 'red', opacity: style.opacity }} />
)}
</Motion>
)
}Preact-motion Language Guide
Preact Motion is a lightweight animation library for Preact that provides physics-based, spring-driven animations similar to React-Motion. It brings declarative motion primitives such as springs, presets, transitions, and dynamic interpolation tailored for Preact’s small footprint and high performance.
Primary Use Cases
- ▸Smooth, spring-based UI animations
- ▸Element transitions without CSS keyframes
- ▸Animated toggles and switches
- ▸Layout-based motion between states
- ▸Declarative dynamic value interpolation
Notable Features
- ▸Physics-based springs
- ▸Declarative Motion component
- ▸StaggeredMotion for chained animations
- ▸TransitionMotion for dynamic lists
- ▸Automatic value interpolation
Origin & Creator
Preact Motion was inspired by React-Motion and built by Preact community members to provide a native physics-based animation library optimized for Preact’s small size.
Industrial Note
Highly relevant for ultra-lightweight dashboards, embedded UIs, IoT interfaces, static sites, WASM/Preact projects, and performance-critical mobile web apps where bundle size must remain extremely small.
Quick Explain
- ▸Uses spring physics for natural movement.
- ▸Designed specifically for Preact’s lightweight component model.
- ▸Declarative motion components like Motion, StaggeredMotion, and TransitionMotion.
- ▸Automatically interpolates animated values.
- ▸Great for smooth UI animations without heavy dependencies.
Core Features
- ▸Motion - animate single style object
- ▸StaggeredMotion - sequential motion
- ▸TransitionMotion - animate mounting lists
- ▸Spring - physics engine wrapper
- ▸Presets - gentle, wobbly, stiff springs
Learning Path
- ▸Learn Motion basics
- ▸Understand spring physics
- ▸Build toggle-based animations
- ▸Use StaggeredMotion
- ▸Master TransitionMotion for lists
Practical Examples
- ▸Spring-based fade-in box
- ▸Expand/collapse card
- ▸Follow-the-mouse spring effect
- ▸Animating list additions/removals
- ▸Staggered menu item entrances
Comparisons
- ▸Preact Motion vs React-Motion: nearly identical API, Preact-optimized.
- ▸Preact Motion vs Framer Motion: PM is lighter, FM has more features.
- ▸Preact Motion vs React Spring: PM simpler, smaller.
- ▸Preact Motion vs CSS: PM allows physics-based interpolation.
- ▸Preact Motion vs GSAP: GSAP for timelines, PM for UI springs.
Strengths
- ▸Very lightweight compared to Framer Motion or React Spring
- ▸Natural spring physics
- ▸Perfect for micro-interactions
- ▸Minimal API surface - easy to learn
- ▸Optimized for Preact performance
Limitations
- ▸Not a full animation engine (no timeline or gestures)
- ▸Less feature-rich than React Spring or Framer Motion
- ▸Limited third-party ecosystem
- ▸Requires Preact - not directly usable in React
- ▸Cannot handle complex animation choreography
When NOT to Use
- ▸Highly choreographed sequences
- ▸Full gesture-driven apps
- ▸Heavy SVG animations
- ▸3D animations
- ▸Complex timelines
Cheat Sheet
- ▸import { Motion, spring } from 'preact-motion'
- ▸spring(100, { stiffness: 120 })
- ▸<Motion style={{ x: spring(0) }}>{style => ...}</Motion>
- ▸Use TransitionMotion for lists
- ▸Presets: presets.gentle / presets.wobbly / presets.stiff
FAQ
- ▸Does it support timelines? -> No.
- ▸Is it lightweight? -> Extremely.
- ▸Does it replace CSS transitions? -> For springs, yes.
- ▸Does it work in React? -> No, only Preact.
- ▸Does it handle enter/exit? -> Yes via TransitionMotion.
30-Day Skill Plan
- ▸Week 1: springs + Motion
- ▸Week 2: gestures + interactions
- ▸Week 3: multi-element layouts
- ▸Week 4: transitioning lists
- ▸Week 5: production-level motion system
Final Summary
- ▸Preact Motion brings physics-based animations to Preact.
- ▸It provides Motion, StaggeredMotion, and TransitionMotion components.
- ▸Extremely lightweight, ideal for performance-sensitive apps.
- ▸Perfect for UI micro-interactions and smooth spring effects.
- ▸A minimal but powerful animation solution.
Project Structure
- ▸components/ - animated UI parts
- ▸motion/ - spring presets
- ▸styles/ - optional CSS
- ▸hooks/ - interaction handlers
- ▸App.jsx - root animations
Monetization
- ▸Lightweight UI component kits
- ▸Interactive embedded widgets
- ▸Premium templates for Preact
- ▸Animated SaaS dashboards
- ▸Motion-first landing pages
Productivity Tips
- ▸Use presets for reusable springs
- ▸Combine with Preact Signals
- ▸Tune stiffness/damping carefully
- ▸Preview animations early
- ▸Keep motion logic centralized
Basic Concepts
- ▸Springs: natural motion vs linear
- ▸Motion component controls interpolation
- ▸StaggeredMotion chains multiple animations
- ▸TransitionMotion handles dynamic lists
- ▸Presets for common spring behaviors