Built a playful kindergarten experience with motion at its heart.

For this project, I wanted to create more than just a website I wanted to build a digital space that feels alive, friendly, and magical for kids and parents.

I explored: • Rive animations for interactive characters and micro-interactions • Smooth motion design to create a storytelling experience • A minimal, colorful UI that feels playful without being overwhelming • Responsive design with performance in mind

The goal was to make every interaction feel joyful from the first scroll to every small animation detail.

A small reminder that good design is not only about how something looks, but also about how it feels. 🌈

#WebDesign #FrontendDevelopment #Rive #MotionDesign #UIDesign #CreativeDevelopment #React #WebAnimation

what an adorable webpage, fun for folks browsing no matter the age!

Cadence - A Motion Design System Explorer

The goal

Motion design dies in translation. A curve shaped in After Effects leaves the building as a reference video and a duration guess, and the feel is gone by the time it ships. Cadence closes that gap: a motion design system explorer where design tokens drive real UI components in real time, and a tuned motion system exports as the artifact an engineering pipeline consumes.

My role

Sole designer and developer: product design, motion design, token architecture, the React build, Rive animation, deployment. I planned the system in Claude and built it in Claude Code, and every architectural decision in the codebase is documented in a dated record. The rigor is part of the deliverable; a motion system an engineer can trust is one whose reasoning is written down.

Deliverables

The live tool at cadence.davidpreli.com: Token Lab, a live token editor; a Principles Library running 18 animation principles on real components; Motion Tiles, a Rive field where three named motion personalities retime the whole grid at once

The token architecture: CSS custom properties read at runtime by Framer Motion, with export to DTCG, CSS, JSON, and Framer Motion formats, and import with a validation report

Twenty custom token-driven components, four themes with WCAG AA contrast throughout, reduced motion as a first-class state

Production deployment on a Cloudflare Worker, verified by an end-to-end suite that runs against built output

A written case study and the full decision record

Links

Tool: cadence.davidpreli.com

Case study: cadence.davidpreli.com/cs

I'm open to design systems, motion systems, and creative technology engagements: defining a motion language, building the tools that make it usable, and documenting it so the decisions hold up after I leave.

what a neat exploration! saving this to read up on when time's more merciful, you surely sparked my curiosity!