StudioPulse & Creative Agency Design System
Figma-to-code design system, motion tokens, micro-interactions, and high-conversion UI architecture for creative brands.
StudioPulse Dynamic Schedule & Social Engine
Real-time dance class reservations with fluid Apple bottom sheets and automated branded social promotional assets for Instagram & TikTok.
Urban Choreography & Dynamic Grooves
Instructor: Mateo Morales
Contemporary Floorwork & Expressive Release
Instructor: Sofia Alarcón
Latin Rhythm & Salsa On2 Styling
Instructor: Carlos Estrada
Classical Ballet Technique & Pointe Preparation
Instructor: Elena Velez
Urban Choreography & Dynamic Grooves
with Master Instructor Mateo Morales
THE STORY
Creative performing arts academies and boutique dance studios struggle with fragmented booking tools, messy Instagram DMs, and dated interfaces. StudioPulse provides a tokenized design system, an interactive weekly masterclass schedule with Apple fluid bottom sheets, and an automated branded social promo generator.
MY CONTRIBUTIONS
- Architected complete design system in Figma with semantic color variables, optical typography hierarchy, and spacing tokens.
- Implemented Apple-standard fluid bottom sheet using 1:1 touch tracking and exponential deceleration velocity projection.
- Built dynamic Instagram Story card generator producing 1080x1920 promotional assets in one click.
- Integrated critically damped spring transitions (stiffness 300, damping 25) with zero layout thrashing or stutter.
- Engineered zero-latency micro-interactions on pointerdown with active tactile compression states.
Solution highlights
Transforms chaotic studio registration into a polished, Apple-grade interactive booking and marketing suite that turns Instagram followers into booked students effortlessly.
Artifact 01: Tokenized Design System & Masterclass Schedule
The problem
Dance academies lose up to 40% of class bookings when forced to negotiate schedules through Instagram DMs or slow, unstyled booking forms.
The insight
Combining tokenized design components with velocity-aware Apple bottom sheets removes all registration friction while elevating brand prestige.
Artifact 02: Apple Fluid Bottom Sheet with 1:1 Gesture Tracking
Architecture & technical decisions
Built on Next.js 14 and Tailwind CSS with Framer Motion spring physics. Design tokens are mapped from Figma variables into semantic CSS custom properties.
export const APPLE_SPRING = {
sheet: { type: 'spring', damping: 28, stiffness: 320 },
buttonTap: { scale: 0.96 },
hoverElevation: { y: -3, transition: { stiffness: 350, damping: 25 } }
};Implementation & key milestones
Engineered the weekly masterclass grid with instant category filtering, real-time spot capacity counters, and a dynamic 1080x1920 Instagram Story preview engine.
Artifact 03: Automated 1080x1920 Branded Social Story Card Generator
Edge cases & trade-offs
Addressed mobile touch ergonomics by implementing rubber-band boundary resistance and momentum velocity projection during sheet drag gestures.
Failure modes & guardrails
Implemented atomic capacity decrement locks to prevent overbooking when simultaneous registrations occur for high-demand masterclasses.
Measurable impact
Eliminated manual DM inquiries, delivered 60 FPS mobile interaction fluidity, and generated a 3.4x increase in advance online reservations.
Reflection / what I learned
Design engineering is the intersection of taste and physics: when UI responds instantly on pointerdown and respects physical momentum, conversion follows naturally.