Motion that earns every single
rendered frame
Senior product designers -every brief, 5+ years building real SaaS at scale.
Activation, trial-topaid, MRR- we designe for the metric that move ARR.
Figma to React, automated — your dev team install the work built, not rebuilds it.
30 Motion five categories
we know cold.
Five page types. One conversation bench.
A brand is a system, not a folder of assets. We design all six surfaces together — so the mark survives the social post, the type survives the pitch deck, and the voice survives the email-from-legal.
Five phases.
Seven days
The exact timeline for a typical SaaS engagement. Same senior pair from brief through deploy — no handoff between PLG specialist, pricing strategist, and dev lead. The bench does all three. Bigger scope (full product design, multi-surface) expands the windows; the phases don't change.
Audit your SaaS Sign in 4 hours.
Slack kickoff, competitive scan, audience mapping, reference review. We come back with a positioning brief and an honest go/no-go.
Full visual design. tokenized.
3 visual directions, each with mark, palette, and type pairing. 30-minute call to pick one. No "Frankenstein this with that."
Full identity. All surfaces.
Mark refined, lockup matrix built, type pair locked, palette tokenized. Daily Slack reviews. Async-first.
Brand book. Ship-ready.
Brand guidelines compiled, application templates packaged, tokens exported for design + dev. B
30 days. Brand in the wild.
Rollout support across business cards, social, deck, web, packaging, email. Refinements based on first-30-days usage — not your designer's preferences.
Aura CRM Dashboard
Aura — a modern all-in-one CRM & Sales Analytics dashboard built to help businesses streamline customer management, visualize sales performance, and make smarter decisions with real-time insights. The platform centralizes leads, opportunities, accounts, and reports into a clean, intuitive interface while empowering teams to collaborate seamlessly and stay productive.
%201.svg)
.svg)
Recent Branding works
Frequently asked, questions
What's the difference between brand motion and product motion?
Brand motion is marketing-led — hero animations, scroll-driven storytelling, founder-led brand intros. Watched once, remembered, doesn't run constantly. Product motion is product-led — microinteractions, state transitions, loading states, success animations. Runs constantly, in front of users 8 hours a day.
Different design constraints. Brand motion can be 4 seconds long and Lottie-heavy; product motion is 200-400ms tops and runs at 60fps without blocking input. We do both. The Product + Brand Suite tier covers both in one engagement.
How do you decide what should animate and what shouldn't?
Three filters. (1) Does it communicate state change? (button press, item added to cart, validation passing). If yes, animate. (2) Does it reduce perceived loading time? (skeleton screens, progress, streaming). If yes, animate. (3) Does it earn the frame rate? (i.e., does the user benefit more than the CPU loses?). If no, don't.
Most product motion fails because it animates things that don't pass filter 3 — 'beautiful' animations on every click that just make the app feel slow. We're aggressive about deleting motion that doesn't earn its place.
25% Of motion engagements start with deletion. Cutting before adding.
We design differently for each. On the same app, the analyst dashboard and the customer-facing report use different patterns by design.
Do you do animated logos and brand intros?
Yes — included on the Product + Brand Motion Suite tier. Animated logos shipped as Lottie + MP4 + GIF for every use case (web header, social, email signature, splash screen). Brand intro sequences for marketing sites (typically 1.4-2.8s, scroll-locked or auto-play, with reduced-motion fallback).
For just-logo work we recommend the Logo Design + Brand Identity engagement and add motion as a small follow-on, rather than a full motion engagement.
We work with TanStack Table, AG Grid, Recharts, Visx, and ECharts depending on your stack. Always with keyboard navigation, column resizing, saved views, and CSV/Excel export designed in from day one.
Tools Lottie, Rive, or Framer Motion — which do you use?
Depends on the use case. Lottie for export-once-play-everywhere animations (mostly brand, icons, intros). Rive for interactive runtime motion (state machines, user-input-driven). Framer Motion (React) for product UI motion that needs to respond to component state. CSS animations + transitions for the smallest microinteractions.
We don't have one favorite tool — we pick the right one for the constraint. About 50% of our motion ships as Framer Motion, 30% Lottie, 15% Rive, 5% CSS.
What's a 'motion token'?
Same idea as a color or spacing token, but for motion. A motion token defines a duration (200ms), an easing curve (cubic-bezier(0.2, 0.8, 0.2, 1)), and a usage context (button-press, modal-enter, success-confirmation). Codified in JSON, compiled into your codebase as CSS variables or Framer Motion props.
The benefit: every button on every surface uses the same press animation, automatically. No drift, no one-off cubic-beziers in random files. A healthy motion library has 8-14 named tokens — not 200.
Do you write the React code or just hand off the animation file?
Both options. Default is: we ship motion specs + Lottie/Rive exports + Framer Motion code snippets your engineers integrate. If you want full integration (we write the React components with motion baked in), we pair with our Frontend Development engagement — about 40% of clients do both.
For brand motion (one-off heroes, scroll sequences) we always ship runnable code; for product motion in your codebase, we prefer pairing with your eng team rather than throwing files over the wall.
Average across our last 14 web app sprints: 4.2 weeks.
Do you handle reduced-motion preferences?
Yes — every motion we ship respects prefers-reduced-motion. We design a 'reduced' variant for every primary motion (typically a fade instead of a transform, no parallax, no auto-play). Tested in macOS and iOS reduced-motion modes before shipping.
For users with vestibular disorders this is a hard accessibility requirement, not a nice-to-have. About 6-8% of users have it enabled, and they should still have a working product.
Can you really build a Motion Library in 4 weeks?
For a Motion Library tier on defined scope (existing design system or design tokens to anchor against, 24-40 motions across primary product surfaces, your team handling integration) — yes. 4 weeks: Week 1 motion audit + curve library + token system. Week 2 the 12 most-used motions. Week 3 the rest + animation specs. Week 4 prototypes + Framer Motion code + handoff workshop.
Average across our last 9 Motion Library sprints: 4.3 weeks.
What if our motion makes the app feel slow?
Almost always means too much motion, too long, or the wrong easing. We measure INP (Interaction to Next Paint) before and after motion ships, on real devices. If a motion adds more than 50ms to INP it gets cut or shortened.
We have a rule: if a motion is longer than 400ms it needs to be either (a) reduced to under 400ms or (b) deferred to background (after the user can interact). Speed is a feature; motion that breaks speed is a bug.
What if scope changes mid-sprint?
Small adjustments (a motion variant, additional state, refined easing) are absorbed within the sprint. Material expansion (adding 10+ new motions, switching from Lottie to Rive mid-build, full brand motion suite added to product engagement) we flag in writing within 24 hours.
Options: extend at the same weekly rate, close current and book follow-on, or defer. We don't surprise-bill mid-sprint.
Bring us the brief, We bring back the scope
Skip the call. Drop a one-pager — what your client needs, the metric you’d move, the timeline. Within 4 business hours we send back a tailored package quote, the 3 cases closest to your client’s problem, and the next available slot.
.avif)
.avif)
.avif)
.avif)
.avif)
.avif)
.avif)
.avif)
.svg)
.svg)
.svg)
.svg)
.svg)
.svg)
.svg)
