Start a project
  • Work 10 / 10
  • Micro-interactions
  • 7 loops · 1:1 + 4:5 · Lottie + 24.5 s showcase
  • US$390 · Feature Clip tier

Dewly

In-app micro-interaction packConsumer iOS app, plant care

Seven app interactions with one motion character, water, shipped as Lottie, seamless loops and a spec developers can build from.

Concept — fictional brand by Glint Studio

A The showcase · 16:9, and the 9:16 cut on phonesThe showcase · 9:16, rebuilt for vertical

Showcase · 16:9, with soundShowcase · 9:16, rebuilt for vertical0:00 / 0:250:19

B Seven seamless loops, played from the same Lottie files

01 · Onboarding carousel01 · Onboarding carousel · in-phone 4:50:00 / 0:06 · loop
02 · Button states0:00 / 0:04 · loop
03 · Toggle · Segmented0:00 / 0:04 · loop
04 · Pull to refresh0:00 / 0:04 · loop
05 · Day complete0:00 / 0:04 · loop
06 · Empty state0:00 / 0:04 · loop
07 · Tab bar0:00 / 0:04 · loop
01The caseDewly, Consumer iOS app, plant care

Brand

Dewly is a consumer iOS app for houseplant owners. It works out when and how much to water each plant from its pot, its light and the season, and tells you on the day. Tagline: Water on the right day.

  • Look: bright-flat. Orchid #A8329F and blush #F6E7F2 fields, white cards, warm ink #231A22. Sage, sun and sand appear only inside the illustrations.
  • Motion character: water. Things that arrive fall with gravity and settle once; switches snap; fills rise from the bottom; a ripple marks each landing; nothing wobbles twice. Water lives in the motion, not the colour.
  • Type: Rethink Sans. Mark: a water drop resting in the curve of a leaf.

Brief

Ship the motion a product team actually implements, for one app:

  • 7 component-level micro-interactions as seamless loops, each authored once as Lottie (the source of truth) and rendered to MP4 from that same file.
  • A motion spec devs can build from.
  • A showcase film and sheet for the portfolio.

It must look like a top product team's design-system motion, not a Dribbble bounce reel.

Format

  • 7 loops, 1080×1080, 60 fps, silent, seamless. 01 Onboarding (6 s), 02 Button states, 03 Toggle + segmented, 04 Pull to refresh, 05 Day complete, 06 Empty state, 07 Tab bar (4 s each).
  • In-phone 4:5 versions (1080×1350) for the three screen-level interactions: 01, 04, 07.
  • 7 Lottie JSON: shape layers only, no images, no expressions, no text layers (labels outlined from the font where they morph with the shape), fr: 60, 12.5–57.4 KB minified, with state markers.
  • Showcase 16:9: 1920×1080, 24.5 s, with sound.
  • Showcase 9:16: 1080×1920, 18.5 s, with sound, rebuilt for vertical (label block on top, a 9:16-specific stage per hero, inside the Reels/TikTok safe zones).
  • Showcase sheet: 2280×3870, every interaction's 4 key states, labelled with number, name, loop length, Lottie size and timings.

What makes it work

  • One source of truth. Each interaction is a TypeScript builder that emits the Lottie. The MP4 plays that same Lottie, and native layers (copy, lists) read the same timing constants, so the video and the JSON can't drift. Parity against lottie-web is 0.97–0.999 on Lottie-only regions.
  • Checked outside the tool that made it. Every JSON is rendered in plain lottie-web and in an independent renderer (python-lottie). That surfaced five cross-player pitfalls: mask origin, ellipse trim start, closed-path trims, zero-length strokes and multi-shape trims. All five are fixed and written into the spec as rules.
  • Every motion explains a state.
    • The pressed button contracts into the circle that the water fills.
    • The pull-to-refresh drop is the spinner.
    • The day's last tick closes the ring and the plant perks up. No confetti.
  • Tuned springs. Controls overshoot ≤ 4 %, the one celebratory pop ≤ 8 %, everything settles in ≤ 300 ms, and nothing swings twice.
  • A spec a dev can use. Numbers in ms and bezier, spring parameters converted for SwiftUI and Compose, state tables, a reduced-motion fallback for every interaction, and which text is native vs outlined.
  • Data that reconciles. Inês's 9 plants: 1,850 ml today (650 + 500 + 300 + 250 + 150), 3.29 L across 9 waterings this week, and every next-watering date on the real 2026 calendar.
Production notesStructure · Deliverables · Audio

Structure (16:9; 120 BPM, one 5/4 bar = 75 f per hero, cuts on downbeats)

timebeat
0.0–1.2Hook: 05 at full size. The last plant is ticked on 0.17 s and the ring closes with the chime on 0.83 s.
1.2–2.5Pull out to the grid: 7 live tiles and "In-app motion. 7 interactions, one system." 03 lights on the beat.
2.5–3.5Push into 02's tile.
3.5–20.0Seven hero close-ups, one per bar. Each has the file number, name, a state chain and two timing chips, and lands with the cut: 02 Button states, 03 Toggle · Segmented, 04 Pull to refresh (camera pushes onto the drop), 05 Day complete, 07 Tab bar, 01 Onboarding, 06 Empty state.
20.0–21.0Pull back to the grid, every tile playing.
22.0–24.5End card: the mark lands on the hit, "dewly", Water on the right day., then a 2.5 s hold.

9:16 (18.5 s): 05 close-up 0–1.5 s → grid → heroes 02 · 05 · 03 · 04 · 07 every 2.5 s from 2.5 s → grid 15.0 s → end card 16.5 s, held 2 s.

Deliverables (deliverables/)

  • dewly-micro-showcase-16x9.mp4 and dewly-micro-showcase-9x16.mp4, plus -web copies (< 15 MB).
  • dewly-micro-sheet.png.

Audio

Music & sound design: original, Glint Studio (synthesized in-house).

  • A light 120 BPM bed in B major. Every hero is one 5/4 bar.
  • UI sounds pitched to B major pentatonic sit on the exact frame of each state change: press, water fill, chime, toggle, checkbox, drop plip, pull stretch/release, tab switch, page swipe. The frames come from the same timing constants that drive the Lottie files.
  • The 9:16 bed ducks its mids under the cue list. Both cuts land at −14 LUFS (16:9 −13.9) with TP ≤ −2.6 dBTP, as delivered and after AAC re-encode.
  • The loops and Lottie files are silent.
02Frames8 posters and stills
Dewly: 16:9 · 0:00 · the hook: the day’s last tick
16:9 · 0:00 · the hook: the day’s last tick
Dewly: 9:16 · 0:00 · the hook, rebuilt for vertical
9:16 · 0:00 · the hook, rebuilt for vertical
Dewly: 16:9 · 0:04 · the pressed button contracts into the circle
16:9 · 0:04 · the pressed button contracts into the circle
Dewly: 16:9 · 0:09 · the pull-to-refresh drop is the spinner
16:9 · 0:09 · the pull-to-refresh drop is the spinner
Dewly: 16:9 · 0:12 · Day complete, with its timing chips
16:9 · 0:12 · Day complete, with its timing chips
Dewly: 07 · Tab bar · in-phone 4:5
07 · Tab bar · in-phone 4:5
Dewly: 04 · Pull to refresh · in-phone 4:5
04 · Pull to refresh · in-phone 4:5
Dewly: 16:9 · end card · Water on the right day.
16:9 · end card · Water on the right day.
03CreditsConcept work, 2026
Concept

Brand and data are fictional (Concept). Dewly, Inês Albuquerque, her nine plants, every watering amount, date, temperature and humidity value were invented by Glint Studio for this portfolio piece. They reconcile with each other.

Design, motion, code

Glint Studio. Every component and illustration is built in code. The 7 Lottie files are generated by TypeScript builders. The MP4 loops and showcases play those same Lottie files in Remotion 4 via lottie-web, with the native-UI layers (copy, lists) in React/SVG. No screen recordings, no stock or AI imagery, no images inside the Lottie files. Text inside the Lottie files is outlined from Rethink Sans with fontTools. Validation: lottie-web 5.13.0 (headless Chrome) and python-lottie (an independent renderer), used only as test tools.

Fonts (SIL Open Font License 1.1, from the google/fonts repository)
  • Rethink Sans (UI, labels, wordmark, outlined Lottie text): OFL-1.1, © The Rethink Sans Project Authors.
  • Status-bar clock in the in-phone loops: Inter (kit phone frame), OFL-1.1.
Audio

Music & sound design: original, Glint Studio (synthesized in-house). The loops and the Lottie files are silent.

Third-party marks

None. The phone frame and iOS-style status bar are drawn in code by the kit (no Apple assets). Plant names are common species names.

A piece like Dewly is the Feature Clip package: US$390, fixed. It is also the add-on on every app job: we’ll ship your in-app motion too.

See the packages