Agile Motion partnered with Sparkly to craft a cohesive motion system: a pixel-smart logo reveal, a product website walkthrough, and a Video Brand Deck that ties visuals, UI, and messaging into one portable brand toolkit. The work focuses on emotional clarity, fast reads on mobile, and reusable assets (MP4, WebM, Lottie) to lift first impressions and guide users through product value.

Sparkly is a platform for creators, coaches, and community builders. They needed:

a sub-1s logo reveal that registers instantly on app open and ad impressions;

a marketing walkthrough to show key site flows and product value;

a video brand deck to standardize tone, visuals, and UI motion for campaigns, influencer promotions, and internal use.

Constraints: mobile-first, low filesize for in-app use, clear UX guidance, and a consistent motion language.

Create an emotion-first brand reveal that reads in ≤1s.

Build animated UI demos that reduce user uncertainty and shorten onboarding time.

Deliver platform-ready exports (Lottie for apps + MP4/WebM for socials/ads).

Produce a Video Brand Deck to guide future creative efforts and maintain consistency.

Lead motion designer — concept → visual system → animation → exports → handoff (Agile Motion). Responsibilities included visual concepting, vector rigging, motion direction, Lottie optimization, and the final packaging of assets and usage notes.

Discovery — Reviewed Sparkly brand colors, typography, UX flows, and product goals. Mapped the critical first-frame moments (app splash, hero, CTA).

Concepting — 3 micro-concepts for the reveal (light reveal, kinetic particles, playful bounce). For the walkthrough, prioritized clarity-first micro-interactions and headline hierarchy.

Video Brand Deck — Composed visual guidelines and sample frames to unify future motion: thumbnails, list patterns, mockups, color swatches, and personality keywords (see uploaded deck /mnt/data/Video Brand Deck done-01.png).

Design & Rigging — Built vector assets in Illustrator; created modular components for reuse across animations.

Animation — Timed reveals for 0.8–1.0s primary read; crafted micro-interactions (button states, tooltips, focus transitions) for the walkthrough.

Optimization — Exported a Lottie JSON (Bodymovin) for in-app usage, plus MP4/WebM/GIF versions for social and hero placements. Tested on low-bandwidth simulations and varied device sizes.

Handoff — Delivered final files, a one-page usage guide, and export presets.

Sparkly_Reveal_1s.mp4 — primary logo reveal (use: app splash & hero). (file available at) /mnt/data/Logo animation done 1.mp4

Sparkly_Loop_6s.mp4 — extended loop for socials

Sparkly_Social_15s.mp4 — promo cut for ads

sparkly_logo_lottie.json — Lottie for lightweight in-app integration

Sparkly_Walkthrough_Full.mp4 — website product walkthrough (cover/video included)

Sparkly_GIF_cta_snippets.gif — micro-interaction snippets (CTA, hover, tooltip)

Sparkly_Video_Brand_Deck.pdf/png — visual guide and examples (image available at) /mnt/data/Video Brand Deck done-01.png

Sparkly_Usage_Guide.pdf — clearspace, timing rules, export presets

Motion branding & micro-timing

UI animation & motion typography

Vector-first rigging (Illustrator → After Effects)

Lottie (Bodymovin) export & optimization

Cross-format deliverables (MP4, WebM, GIF, Lottie, alpha)

UX-aware motion strategy & low-bandwidth testing

App splash (Lottie or short MP4)

On-site hero & explainer sections (MP4/WebM)

Social ads and influencer promos (15s social cuts + GIF loops)

Onboarding flows and tooltips (micro-interaction GIFs/Lottie snippets)

Presentation and investor decks (use the Video Brand Deck visuals)