A canvas that behaves like a design tool
Infinite pan and zoom, marquee and multi-select, drag, resize and rotate handles, smart snapping guides, and Figma-style group drilling — one click selects the group, the next selects the member inside it.
All products
MotionCraft
Status: LiveThe CSS animation studio.
- Category
- Developer tools
- Platforms
- Web
- Since
- 2026
- Domain
- motioncraft.bahukhandi-labs.com
Features
What MotionCraft does.
Each of these exists because something was broken without it. Nothing here is on the list to fill out a comparison table.
A timeline that behaves like a motion tool
Per-property tracks, keyframe diamonds, a draggable playhead, loop, speed and frame stepping. Groups appear as parent rows with their members nested beneath them.
Groups that are themselves animatable
A group has its own base properties and keyframe tracks, and its transform-origin is computed from the bounding box of everything inside it. Groups nest to any depth and export as nested markup, so transforms cascade exactly as they did on the canvas.
Physics easings, baked
The full preset set including bounce, elastic and spring, plus a draggable cubic-bezier editor. Easings that CSS cannot express directly are baked into extra keyframes at export, so the output is still plain CSS.
Motion paths and SVG drawing
Path elements normalise to pathLength 100, so animating Draw from 100 to 0 strokes the line as a percentage. Separately, offset-path and offset-distance send any element travelling along a curve.
Clip, mask and CSS variables
Eight clip-path shapes and gradient masks, all parameterised by interpolatable numbers so they animate in pure CSS. Bind colours to tokens and the export emits a :root block with var() references.
Device preview that tells the truth
The generated stylesheet runs inside a sandboxed iframe at phone, tablet, laptop or custom size. What you see is what the exported CSS does in a real browser, not an approximation of it.
Accessibility built into the output
An optional prefers-reduced-motion guard is written into exports, and the inspector raises WCAG 2.3.1 warnings when an animation flashes fast enough to be a seizure risk.