The details that make a product feel alive.
Motion in UI is not decoration — it's communication. A transition that shows where a new screen came from helps users build a mental model of your product. A loading animation that looks like progress (instead of spinning) makes waits feel shorter. A microinteraction that confirms a save or a delete tells users their action worked. When motion is designed well, it's invisible: users experience a product that feels responsive and confident, not a product full of animations. When it's designed badly — transitions that delay rather than inform, animations that fight the user's intent, motion that draws attention to itself — it's actively harmful. We design motion at the level of intent: what is this motion communicating, and does it do that job efficiently?
Interaction and motion design at Origin Softwares treats every animation as a communication decision — what information does this motion convey, and does it convey it efficiently? We design microinteractions, transition systems, and loading states that confirm actions, communicate spatial relationships, and reduce perceived wait time — then deliver developer-ready outputs that remove the guesswork from implementation. Clients choose us because we audit motion against function, not aesthetics, and we deliver easing tokens, Lottie files, and prototypes developers can match exactly.
What is interaction and motion design and why does it matter for digital products?
Interaction design covers the micro-level feedback loops in a product — the visual, haptic, and audio responses that confirm an action happened, a state changed, or a process is under way. Motion design covers larger-scale transitions and animations that communicate spatial relationships between screens, progress during a wait, or the physical metaphor that makes an action feel intuitive. When these are designed well, users experience a product that responds confidently to them. When they are absent or generic, the product feels unresponsive regardless of how well everything else is designed. Origin Softwares designs both layers systematically, not ad-hoc. Designed loading states reduce perceived wait time by an average of 40% compared to generic spinners, based on user testing measurements.
The problems this solves
- The product looks visually polished in static screenshots but feels flat and unresponsive when used on a real device
- Default platform transitions are used throughout because motion was never part of the design specification, producing an app that feels generic
- Loading states were designed as an afterthought and feel disconnected from the content that follows them, making waits feel longer than they are
- Motion has been added ad-hoc by different developers using different easing values and durations, creating an inconsistent sensory experience across the product
- Accessibility has not been considered in motion design — the product has no reduced-motion variant and triggers vestibular issues for some users
- Complex animations were described to developers in words rather than specified with timing values, producing implementations that do not match the design intent
Business outcomes
- 40% reduction in perceived wait time when loading states are designed as progress-communicating animations rather than generic spinners
- Higher App Store review scores when micro-interactions give the product a premium, responsive feel that users notice and comment on
- Reduced developer iteration cycles when easing tokens and Lottie files remove the guesswork from animation implementation
- Consistent motion across the product when a motion principles document and easing token library govern all future animation decisions
- WCAG 2.2 compliance achieved for motion-sensitive users when every animation has a specified reduced-motion variant
- Onboarding illustration animations produced as Lottie files render at higher quality and smaller file size than video alternatives
Who is this for?
Consumer mobile app teams
Products competing on perceived quality and premium feel where micro-interactions and transitions are the difference between average and memorable.
SaaS products with frequent feedback-requiring actions
Tools where users perform many actions per session and need confident, immediate confirmation that each action was registered.
Fintech products requiring trust signals
Financial products where transaction confirmations, balance updates, and security actions need to communicate reliability through their motion behaviour.
Products undergoing a design system build
Teams establishing a design system who need motion tokens and interaction specifications as part of the system architecture, not added later.
Products with complex onboarding or empty states
Applications with onboarding flows or empty states that need animated illustrations to maintain engagement and communicate context.
Teams that have launched with generic motion
Products that are post-launch and want to elevate the interaction quality as a specific product improvement initiative.
When Interaction & Motion Design may not be the right fit
We'd rather tell you upfront than waste your time and budget.
- Your product has fundamental structural or usability problems — motion design on a product that does not work well is cosmetic and will not improve metrics
- Your development team is not able to implement custom animations — Lottie, CSS animations, and Framer Motion all require implementation effort and some level of technical familiarity
- Your user base is primarily on low-end devices where complex animations create performance problems — motion should be designed for the actual device performance profile of your users
- You are looking for decorative animation that does not serve a communication function — motion that exists for aesthetic reasons without a functional purpose is what we audit out, not design in
What's included
- Microinteraction design (hover, press, toggle, scroll)
- Page & screen transition system
- Loading & skeleton screen animations
- Gesture animation design (swipe, pinch, drag)
- Spring-physics & easing library for developers
- Lottie animation production for complex states
How we deliver
Motion Audit
Identify which interaction moments need motion and which are adding friction without purpose.
- Product walkthrough cataloguing all existing and missing motion
- Functional audit: does each existing animation communicate something the static design cannot
- Opportunity identification: which interaction moments would benefit from motion
- Competitive motion analysis of analogous products
Motion Principles
Define the motion language before any animation is produced.
- Easing curve selection: which curves reflect the product personality
- Duration range definition for different interaction types
- Functional criteria: the standard an animation must meet to be included
- Motion principles document production
Interaction Design
Design all microinteractions and transitions against the principles.
- Microinteraction design for all core action types
- Page and screen transition system design
- Loading and skeleton screen animation design
- Gesture animation design for touch-based interactions
Production & Handoff
Produce developer-ready outputs for every animation.
- Framer or ProtoPie prototype for transitions and gesture interactions
- After Effects production and Lottie export for complex animations
- Easing and duration token library formatted for target framework
- Implementation guide with reduced-motion variants for all animations
How long does an interaction and motion design engagement take?
A motion audit and principles document for an existing product takes one to two weeks. A full microinteraction system for a mobile app — covering all core actions, transitions, and loading states — takes four to six weeks. Complex Lottie animation production for specific product moments (empty states, success confirmations, onboarding illustrations) adds one to two weeks per animation set depending on complexity. We scope the engagement based on the number of interaction moments requiring design and the fidelity of developer outputs required. We provide a project-specific estimate after a discovery call. The motion principles document is delivered at the end of week one and approved before any microinteraction production begins.
Technologies we use
- Figma
- Framer
- ProtoPie
- Principle
- After Effects
- Lottie
- GSAP
- Framer Motion
- CSS animations
Architecture & scalability
- Motion token architecture should mirror the design token structure — duration and easing values defined as semantic tokens (e.g., `--motion-duration-interaction`, `--motion-easing-spring`) rather than hard-coded values in individual components
- The prefers-reduced-motion media query must be implemented at the token level — semantic motion tokens should resolve to zero-duration or instant variants when the user preference is active
- GPU-compositable CSS properties (transform, opacity) should be the default animation target — animating layout properties (width, height, margin) triggers expensive browser reflow cycles
- Spring physics values (stiffness, damping, mass) should be specified as named presets that match the product's motion personality — not tuned individually per animation
- Lottie animation architecture benefits from separated composition layers — UI chrome, data, and illustration layers structured to allow programmatic control from the host application
- Motion budget per screen should be a defined constraint — too many simultaneous animations compete for user attention and degrade perceived performance even at 60fps
Motion Specification Methods Compared
| Criterion | Lottie JSON (complex animations) | CSS animations + easing tokens | Video/GIF animations |
|---|---|---|---|
| Developer implementation clarity | Exact — JSON file rendered natively | High — values map directly to CSS properties | High — file played back directly |
| Animation quality | High — vector-based, resolution-independent | Good for UI transitions | Variable — lossy compression |
| File size | Small — typically 10–50KB | Zero overhead — code-only | Large — typically 200KB–2MB+ |
| Accessibility support | Reduced-motion variant required as separate file | prefers-reduced-motion media query built in | No accessibility support — muted autoplay required |
Why choose Origin Softwares
Our approach
- Every animation is audited against a functional criterion — what information does this motion communicate — before being approved
- Reduced-motion variants are specified for every animation as standard, not as an optional accessibility addition
- Developer outputs are production-ready: easing tokens, Lottie JSON files, and Framer prototypes — not design file descriptions that require interpretation
- Motion principles document delivered as part of every engagement so the system governs future motion decisions rather than ad-hoc additions
- 60fps is the target frame rate on all motion specifications — we flag any proposed animation that is unlikely to hit that target on low-end hardware
Delivery standards
- Motion audit completed before any new animation is designed to identify high-value interaction moments and remove motion that does not serve a purpose
- Motion principles document defining easing curves, duration ranges, and the functional criteria for motion inclusion delivered before production begins
- Every microinteraction specified with trigger condition, duration, easing curve, and reduced-motion variant
- Lottie files produced from structured After Effects compositions with consistent layer naming conventions
- Easing and duration values delivered as named design tokens that map directly to CSS custom properties or Framer Motion config
Quality assurance
- Motion audit reviewed by a second designer before principles document is finalised
- All animations reviewed at 60fps on target devices — Framer or ProtoPie prototypes tested on physical hardware
- Reduced-motion variants reviewed to confirm they communicate the same information through non-motion means
- Lottie files reviewed for render performance on low-end device profiles before delivery
- Final developer handoff reviewed to confirm all timing and easing values are formatted correctly for the target implementation framework
Security practices
- All motion design files and Lottie assets handled under NDA
- Figma files and Lottie assets shared via access-controlled links
- No client motion assets or brand animations referenced in public portfolios without written consent
- Animation production files (After Effects projects) delivered to the client and not retained after project completion
Performance
- 60fps target frame rate validated on physical devices for all motion specifications
- Lottie file size reviewed — animations exceeding 100KB are flagged for optimisation before delivery
- GPU-compositable properties (transform, opacity) preferred over layout-triggering properties in CSS animation specifications
- Animation duration ranges calibrated against platform motion standards — iOS spring physics values and Android Material motion easing curves are the reference points
What you receive
- Motion audit and principles document
- Microinteraction specifications (Figma with video references)
- Easing and duration token library formatted for the target implementation framework
- Lottie JSON files for complex animations
- Framer or ProtoPie prototype with all transitions and gesture interactions
- Developer implementation guide with all specifications and reduced-motion variants
Support tiers
- Post-delivery support: two-week availability for developer questions on animation implementation
- Implementation review: a review session to verify animations are rendering at the specified quality and frame rate
- Motion system extension: follow-on engagement to add new interaction moments as the product grows
Why Origin for Interaction & Motion Design
Motion as communication, not decoration
Every animation we design has a job: communicating spatial relationships, confirming actions, or making waits feel shorter. Motion that doesn't do a job gets removed.
Reduced motion designed as standard — not an afterthought
Every animation we specify has a `prefers-reduced-motion` variant. Accessibility is built into the motion system from day one.
Developer-ready outputs: tokens, Lottie files, and prototypes
We don't describe animations in words and hope for the best. Easing tokens, Lottie JSON, and Framer prototypes give developers exact references — no interpretation required.
Industries we serve
Typical delivery timeline
| Phase | Duration | What happens |
|---|---|---|
| Motion Audit | 3–5 days | Product walkthrough, functional audit, opportunity identification, and competitive analysis. |
| Motion Principles | 3–5 days | Easing curve selection, duration ranges, functional criteria, and principles document. |
| Interaction Design | 2–3 weeks | Microinteractions, transitions, loading states, and gesture animations. |
| Production & Handoff | 1–2 weeks | Framer prototypes, Lottie production, token library, and implementation guide. |
Before you start — a checklist
Use this to prepare for your first conversation with us.
- Does your product feel flat or unresponsive despite having good visual design? This is the clearest signal that interaction and motion design would improve perceived quality.
- Does your development team have the capability to implement custom animations using CSS animations, Framer Motion, or Lottie?
- Are loading states currently generic spinners with no relationship to the content that follows? Designed loading states are one of the highest-ROI motion investments.
- Does your product have onboarding or empty states where animated illustrations would communicate context more effectively than static images?
- Is motion currently added ad-hoc by different team members without a governing principles document? A motion system produces consistency; ad-hoc motion produces distraction.
- Are reduced-motion variants currently designed for any of your animations? If not, there is likely an accessibility gap that needs addressing.
Maintenance & support
- Post-delivery support window for developer questions on animation implementation and timing values
- Implementation review to verify animations render at the specified quality and frame rate in production
- Motion system extension engagement to add new interaction moments when new features are added
- Annual motion audit to review accumulated ad-hoc animation additions against the motion principles
- Platform compliance review when major iOS or Android motion convention changes require updates
“We knew our app looked polished but felt flat. Origin ran a motion audit, designed a system of microinteractions, and handed our developers Lottie files and token specs. The next App Store review mentioned the UI specifically — in the right way.”
Frequently asked questions
Planning & scope
- How do you scope an interaction and motion design engagement?
- Scoping starts with a motion audit that identifies the number of distinct interaction moments requiring design work, the complexity of each animation, and the types of developer outputs required. A mobile app with twenty microinteractions and five Lottie animations is a different scope from a web product requiring a CSS transition system and loading state library. We provide a fixed-price proposal after the audit is complete.
- What is the typical cost of a motion design engagement?
- A motion audit and principles document runs ₹1–2 lakh. A full microinteraction system for a mobile app runs ₹3–7 lakh. Lottie animation production for complex illustrations or onboarding sequences runs ₹1.5–4 lakh per animation set depending on complexity. We provide fixed-price proposals after scoping.
- Can you add motion design to an existing product without a full redesign?
- Yes — motion design is an additive layer that can be applied to an existing product. The motion audit identifies which interaction moments are the highest-priority candidates, and we design and specify those first. The motion principles document then governs all future additions so the system grows consistently.
- How do we decide between Lottie, CSS animations, and JavaScript-based animations?
- Lottie is the right choice for complex vector illustrations, multi-step sequences, and animations that need to render at high quality across platforms. CSS animations are the right choice for UI transitions, hover states, and simple feedback loops — they are zero-cost, GPU-optimised, and natively support prefers-reduced-motion. JavaScript-based animations (Framer Motion, GSAP) are the right choice for spring-physics interactions, gesture-driven animations, and anything that needs to respond to real-time data.
Technical
- What format are easing tokens delivered in?
- Easing tokens are delivered as CSS custom property definitions (e.g., `--motion-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1)`) and as Framer Motion config objects for React implementations. Spring-physics values are delivered as stiffness, damping, and mass parameters compatible with react-spring and Framer Motion. We confirm the target framework before formatting.
- Can Lottie animations be controlled programmatically from the host application?
- Yes — Lottie animations support programmatic control of playback speed, direction, segment looping, and frame-level state. We structure After Effects compositions to expose these control points, and we document the segment frame ranges in the implementation guide so developers can trigger specific animation states from application logic.
- How do you handle animation performance on low-end Android devices?
- Low-end Android devices are the most challenging target for motion — they have limited GPU resources and inconsistent frame timing. We prioritise GPU-compositable properties, avoid simultaneous layout-triggering animations, and test Lottie file performance on a reference low-end device profile. Animations that cannot reach 60fps on the target device profile are redesigned or simplified.
- Do you design for reduced motion accessibility on web and mobile?
- Yes — reduced-motion variants are specified for every animation as standard. On web, we use the prefers-reduced-motion CSS media query to substitute instant transitions or opacity changes for motion-based transitions. On iOS and Android, we check the accessibility setting programmatically and deliver implementation documentation for both platforms.
Engagement & process
- Who owns the After Effects source files for Lottie animations?
- All production files — After Effects projects, Lottie JSON, Figma files — become the client's property upon full payment. We deliver the source files alongside the exported assets so the client can modify animations in future without engaging us for every change.
- Can you work within our existing design system?
- Yes — motion design engagements frequently involve adding a motion token layer and interaction specifications to an existing design system. We review the existing system architecture and add motion tokens in a way that is consistent with the existing token naming conventions.
- How do you coordinate with our development team during the engagement?
- We share the motion principles document and early interaction specifications with the development team before production begins, so they can raise implementation concerns before the work is finalised. We also conduct a developer walkthrough of the implementation guide and stay available for questions during the implementation sprint.
- Can you produce motion for web and mobile simultaneously?
- Yes — most motion tokens and Lottie files are platform-agnostic. Platform-specific work arises primarily in the implementation format — CSS custom properties for web, UIViewPropertyAnimator or ValueAnimator for native mobile. We specify both in the implementation guide when the engagement covers both platforms.
What developer outputs does an interaction and motion design engagement produce?
Origin Softwares delivers three types of output depending on the interaction type. Simple microinteractions get easing and duration tokens formatted as CSS custom properties or Framer Motion values, with trigger conditions and state transition specifications. Complex animations get Lottie JSON files produced directly from After Effects, which render at native quality in any React Native, iOS, Android, or web implementation. Transitions and gesture interactions get Framer or ProtoPie prototype references that developers can match exactly, with spring-physics values specified. Every output is designed to be consumed directly by engineers — no interpretation required. All animations are also delivered with a reduced-motion variant specifying the equivalent state change using opacity or instantaneous transitions.
Related services
Custom Software Development
Custom software builds benefit from a motion token library and interaction specifications that production developers can implement without interpretation.
Web Development
Web development projects incorporating a CSS animation system and motion token layer produce a more polished user experience without significant additional development effort.
Mobile App Development
Mobile app development implementations with Lottie file references and spring-physics specifications produce higher-quality interaction feel than implementations working from verbal descriptions.
Digital Marketing
Animated landing page elements and onboarding illustrations produced as Lottie files can be reused in digital marketing assets at high quality.
E-Commerce Development
Add-to-cart animations, checkout progress indicators, and product visualisation interactions directly improve conversion when designed as part of the e-commerce UX.
Not sure where to start?
Book a motion audit and get a prioritised list of your highest-value interaction design opportunities within three business days.
Get a free consultation