Product UI motion
Micro-interactions, transitions, and empty states specified as tokens and implemented in Lottie, Rive, or CSS/engine, with reduced-motion variants.
2D Animations
Animate the interface and the story in a format your product can run.
We design 2D motion for real runtimes, Lottie, Rive, Spine, or engine sprites, with performance budgets, localization, and a pipeline from storyboard to shipped asset.
lifecycle
IdeaValidatePrototypeMVPLaunchLearn01The work
Motion that ships in the product, not a render that dies in a slide deck.
2D animation on a product team is a delivery problem as much as an art problem. A beautiful After Effects file that cannot loop, localize, or stay under a kilobyte budget will be replaced with a static PNG. Codeaxes starts with where the motion lives: onboarding, empty states, game characters, or a short explainer inside the app. We pick a runtime the client can actually ship, then animate to that constraint. Timing, easing, and reduced-motion fallbacks are specified. Marketing-only films can be produced with Kuroaxe when the work is campaign, not product.
02Problems
What this service is for.
01
Designers deliver video files that cannot be themed, localized, or paused in the UI.
02
Lottie exports are huge, drop frames on mid-tier phones, or break when copy changes.
03
Game 2D characters have no consistent rig, so every new action is a one-off.
04
Motion is inconsistent across the product because there is no token or duration system.
05
Engineering re-creates animations in code from a silent screen recording.
06
There is no reduced-motion path, so accessibility review fails late.
03Capabilities
What we actually deliver.
Character and 2D game art motion
Rigs, cycles, and attack or emote sets for Spine, DragonBones, or Unity 2D, with naming that a designer can extend.
Explainer and onboarding sequences
Short narrative clips that still export as interactive or segmented assets, not a 40MB MP4 that blocks first paint.
Runtime engineering
Integration of Lottie, Rive, or sprite atlases into web, iOS, Android, or Unity, including theming, localization slots, and fallbacks.
Pipeline and versioning
Source files, export presets, and review gates so a copy change does not require a full re-composite from memory.
Performance and accessibility
Frame budgets, file-size targets, and prefers-reduced-motion behavior tested on the devices your users actually have.
- ▹ Motion principles and duration tokens aligned to your UI kit
- ▹ Storyboards and animatics for the sequences in scope
- ▹ Production 2D assets in the agreed runtime, Lottie, Rive, Spine, or sprites
- ▹ Engineering integration or a drop-in package with usage notes
- ▹ Reduced-motion and localization variants
- ▹ Source project files and export presets for later edits
04Workflow
How this engagement runs.
01
Where motion earns its keep
We pick the surfaces that change comprehension or delight, and we kill decorative motion that would only slow the app.
02
Runtime and budget
File size, FPS, and platform constraints are set before illustration style locks, so we do not animate a film the device cannot play.
03
Boards and rigs
Boards, timing, and character rigs are approved as stills and loops before full color production.
04
Produce and integrate
Final assets land in the product or game with engineering pairing, not a zip file emailed on Friday.
05
Tune on device
We test on target hardware, fix jank, and document how to swap copy or theme without opening the original composition blindly.
05Fit
Industries and stack.
Industries
7 sectors
- SaaS
- Education
- Media
- Ecommerce
- Healthcare
- Fintech
- Real estate
Typical stack
Tools we actually operate
06Use cases
Where this shows up in production.
SaaS onboarding without a video player
Segmented Lottie or Rive scenes that pause on user input and swap copy per locale without re-exporting the whole film.
2D game character set
Idle, walk, and action cycles on a shared rig so a new skin does not require re-animating every clip.
Empty and success states
Lightweight loops that explain the next action, with an instant static fallback when the user prefers reduced motion.
In-product explainer
A 20-second sequence that plays inside the app, themed to the design system, instead of a YouTube embed.
- Motion that runs in the product runtime, not only in After Effects
- File-size and FPS budgets decided before production
- Rigs and presets your team can edit later
- Reduced-motion and localization treated as requirements
- Engineering handoff that does not rely on screen recordings
07Work
Related case studies.
Education and EdTech
Lumen Learn
Lumen Learn launched a cohort-paced learning platform with instructor analytics and LMS integrations for corporate training programs that outgrew generic tools.
- TypeScript
- React
- Node.js
Admin onboardingNew cohorts launched without manual roster CSVs
Open study
Ecommerce and Retail
Harbor Commerce
Harbor Commerce needed a headless storefront and inventory layer that kept web, mobile, and marketplace channels aligned through peak promotional periods.
- TypeScript
- Next.js
- Shopify Hydrogen
Catalog consistencySingle source across web, app, and marketplace feeds
Open study
Healthcare
CareLoop Health
CareLoop unified patient intake, messaging, and appointment status in a portal patients could trust on mobile, while giving care teams a console aligned to their workflow.
- TypeScript
- Next.js
- PostgreSQL
Intake completionHigher same-day form completion on mobile
Open study
Fintech and Financial Services
LedgerKit
LedgerKit required onboarding that felt fast to applicants while giving risk and ops teams defensible case files, not screenshots scattered across email.
- TypeScript
- Node.js
- PostgreSQL
Applicant clarityStatus page aligned to actual pipeline stage
Open study
08FAQ
Questions about 2D Animation.
Is this marketing animation?
Product and game motion lives here. Campaign films and brand spots are a Kuroaxe conversation when they are not shipping inside the product. We will route that honestly rather than force a product studio to act like an ad house.
Lottie, Rive, or video?
Lottie for simple vector UI. Rive when state machines and interactivity matter. Sprites or Spine for games. Video only when the sequence is non-interactive and the weight is acceptable. We choose from the surface, not from a favorite tool.
Can you match our existing illustration style?
Yes, if you provide the kit. If the style cannot hold up as a rigged character or a looping UI asset, we will flag that before production, not after.
Do you implement the animation in code as well?
Usually yes. The point of this service is a shipped runtime, not a render sitting in Drive. Implementation can be web, mobile, or Unity depending on the product.
Do 2D animations ship inside the product?
That is the point. We deliver Lottie, Rive, Spine, or sprites with runtime integration, performance budgets, and reduced-motion fallbacks. Campaign films that never enter the product are a Kuroaxe conversation.
Can our artists keep working in After Effects?
Yes, with export presets into a runtime the app can play. If the composition cannot loop, localize, or stay under budget, we flag that before a full production pass.