KPU coursework
Musify: Motion System
A brand identity and motion system for a live-music platform, built on a “live stage” metaphor with five signature interactions.
- Role
- Motion and brand designer
- Timeline
- November 2025
- Tools
- Figma, GSAP, ScrollTrigger, Lenis, HTML, CSS, JS
- Type
- KPU coursework
The problem
Musify is a music-event platform, but flat screens don’t capture the energy of a live venue. The brief: a brand identity and a motion language that make a dark UI feel alive.
My role and constraints
I owned the identity and the motion system: colour, type, a three-rule “motion recipe”, and five signature interactions coded in GSAP, all documented as a style guide.
Process
- Staggered entry: elements never appear at once; staggers of 0.1 to 0.2s guide the eye.
- Heavy physics: motion has mass; back and elastic easings replace linear fades.
- Ambient life: orbs and visualizers loop so the UI never feels dead.
The solution
The coded site, running live:
Live interactions
Ambient life · repeat -1
Ambient
Motion
Motion
Aura orbs breathe continuously so the interface is never dead.
Affordance · magnetic
The button tracks the cursor (×0.35), tactile before the click.
Curtain reveal · preloader
Musify
The stage is set.
Tuning in…
A stage curtain masks load, then slides up on power4.inOut.
Staggered entry · 0.1s
“The soundcheck”, elements enter in sequence, never at once.
Content card · choreography
Live Set 001
Hover to preview
Hover: image scales, overlay fades, play icon springs (back.out).
What I learned
A motion system is only as good as its constraints. Writing timing and easing rules down first is what made five interactions feel like one brand.