Pavlo Zhydkykh
Product Designer & Developer
Lottie Motion Collection · 2026
2026
Portfolio project · 12 Lottie animations
Portfolio project · 12 Lotties
Twelve interfaces,
Twelve interfaces,
Twelve interfaces,
in motion.
in motion.
in motion.
A collection of twelve UI animations: ten personal concepts and two pieces shipped for Stotles. Each one explores a different kind of interface, from a banking app to a pocket recorder, and is delivered as a lightweight Lottie that loops without a seam.
A collection of twelve UI animations: ten personal concepts and two pieces shipped for Stotles. Each one explores a different kind of interface, from a banking app to a pocket recorder, and is delivered as a lightweight Lottie that loops without a seam.
Role
UI design, motion design
UI design, motion design
Tools
Figma, Lottie, lottie-web
Figma, Lottie, lottie-web
Deliverables
.lottie, JSON, HTML previews
.lottie, JSON, HTML previews
Year
2026
2026
0 / 001 / 12
Dunnit
Dunnit
Neo-brutalism, Mobile app
Neo-brutalism, Mobile app
A to-do app with thick outlines and hard shadows. A tap checks a task, the title strikes through and a sticker stamps in; then the list folds into a stack and the day ends with confetti.
A to-do app with thick outlines and hard shadows. A tap checks a task, the title strikes through and a sticker stamps in; then the list folds into a stack and the day ends with confetti.
Canvas
640 × 800
Duration
10.0 s
File size
36 KB
Frame rate
60 fps
Type
Archivo Black, Space Grotesk, Space Mono
Key states
02 / 12
Nova
Nova
Dark fintech, Mobile app
Dark fintech, Mobile app
Sending money in a dark banking app. The amount is typed key by key, the slide-to-send thumb leaves a lime trail, the ring spins while sending and the summary grows into a receipt.
Sending money in a dark banking app. The amount is typed key by key, the slide-to-send thumb leaves a lime trail, the ring spins while sending and the summary grows into a receipt.
Canvas
640 × 800
Duration
9.8 s
File size
42 KB
Frame rate
60 fps
Type
Geist, Geist Mono
Key states
0 / 00 / 003 / 12 · STOTLES
Integrations MCP
Integrations MCP
AI assistant integration
AI assistant integration
Stotles data inside AI assistants. Claude is picked, the question is asked, the integration runs and a ranked table of government software suppliers builds itself row by row.
Stotles data inside AI assistants. Claude is picked, the question is asked, the integration runs and a ranked table of government software suppliers builds itself row by row.
Canvas
588 × 510
Duration
15.1 s
File size
75 KB
Frame rate
60 fps
Type
Inter
Key states
04 / 12 · STOTLES
Email & Slack Alerts
Email & Slack Alerts
Alert channels and daily digest
Alert channels and daily digest
Tender alerts wherever the team works. A saved search switches on Slack, Gmail and Teams in turn, then the daily digest lands with fresh opportunities and their status.
Tender alerts wherever the team works. A saved search switches on Slack, Gmail and Teams in turn, then the daily digest lands with fresh opportunities and their status.
Canvas
455 × 357
Duration
12.8 s
File size
83 KB
Frame rate
60 fps
Type
Inter
Key states
0 / 00 / 005 / 12
shipit
shipit
Developer tool, Desktop terminal
Developer tool, Desktop terminal
A one-command deploy in a terminal window. The command types itself and autocomplete opens, then the pipeline prints and runs step by step until the deploy lands with a live URL.
A one-command deploy in a terminal window. The command types itself and autocomplete opens, then the pipeline prints and runs step by step until the deploy lands with a live URL.
Canvas
800 × 600
Duration
11.5 s
File size
55 KB
Frame rate
60 fps
Type
JetBrains Mono
Key states
06 / 12
Folio FM
Folio FM
Swiss style, Web player
Swiss style, Web player
A music player set in the International Typographic Style. A pointer opens track 03, the waveform rises bar by bar as it plays, and Next swaps the cover and rolls 03 into 04.
A music player set in the International Typographic Style. A pointer opens track 03, the waveform rises bar by bar as it plays, and Next swaps the cover and rolls 03 into 04.
Canvas
640 × 640
Duration
10.3 s
File size
50 KB
Frame rate
60 fps
Type
Helvetica Neue
Key states
0 / 00 / 007 / 12
Hush
Hush
Soft clay, Home-screen widget
Soft clay, Home-screen widget
A breathing exercise in a soft, pastel widget. The orb swells on a four-count inhale, turns peach for the exhale and settles into a check with the week’s streak.
A breathing exercise in a soft, pastel widget. The orb swells on a four-count inhale, turns peach for the exhale and settles into a check with the week’s streak.
Canvas
640 × 640
Duration
10.7 s
File size
31 KB
Frame rate
60 fps
Type
Fraunces, Nunito
Key states
08 / 12
Hearth
Hearth
Warm bento, Tablet dashboard
Warm bento, Tablet dashboard
A smart home dashboard. A tap turns on warm light, the thermostat knob travels round its dial, and the Movie scene spreads dark mode across the screen like a ripple.
A smart home dashboard. A tap turns on warm light, the thermostat knob travels round its dial, and the Movie scene spreads dark mode across the screen like a ripple.
Canvas
800 × 600
Duration
10.2 s
File size
48 KB
Frame rate
60 fps
Type
Plus Jakarta Sans
Key states
0 / 00 / 009 / 12
MEMO-3
MEMO-3
Industrial hardware, Device UI
Industrial hardware, Device UI
The screen and controls of a pocket recorder. REC lights up, the timer counts, the waveform writes itself and the level meters move; STOP saves the take.
The screen and controls of a pocket recorder. REC lights up, the timer counts, the waveform writes itself and the level meters move; STOP saves the take.
Canvas
640 × 640
Duration
10.5 s
File size
22 KB
Frame rate
60 fps
Type
DM Mono, Barlow Condensed
Key states
10 / 12
Alba Stays
Alba Stays
Quiet luxury, Booking modal
Quiet luxury, Booking modal
A hotel booking flow. Check availability, pick a range of dates, reserve and receive a ticket, while the terrace illustration drifts from midday to sunset.
A hotel booking flow. Check availability, pick a range of dates, reserve and receive a ticket, while the terrace illustration drifts from midday to sunset.
Canvas
800 × 600
Duration
9.8 s
File size
74 KB
Frame rate
60 fps
Type
Instrument Serif, Hanken Grotesk
Key states
0 / 00 / 011 / 12
Pulse
Pulse
Sport wearable, Smartwatch
Sport wearable, Smartwatch
A run on a smartwatch. A 3-2-1 countdown drains the ring, live metrics roll in with a beating heart, and the activity rings draw themselves closed at the finish.
A run on a smartwatch. A 3-2-1 countdown drains the ring, live metrics roll in with a beating heart, and the activity rings draw themselves closed at the finish.
Canvas
640 × 640
Duration
10.7 s
File size
16 KB
Frame rate
60 fps
Type
SF Pro Rounded
Key states
12 / 12
Munch
Munch
Playful, iOS Live Activity
Playful, iOS Live Activity
Food delivery on the lock screen. The token rides the progress track from the kitchen to the door while the Dynamic Island keeps the ETA, then everything turns teal on arrival.
Food delivery on the lock screen. The token rides the progress track from the kitchen to the door while the Dynamic Island keeps the ETA, then everything turns teal on arrival.
Canvas
640 × 800
Duration
10.7 s
File size
36 KB
Frame rate
60 fps
Type
Baloo 2, SF Pro
Key states
0 / 0
01
02
03
04
05
06
07
08
09
10
11
12
Overview
Twelve small interfaces, each in its own visual language and each with one clear interaction. Every one was designed as a handful of key frames in Figma, then turned into a single Lottie that plays on any site and loops without a seam.
Twelve small interfaces, each in its own visual language and each with one clear interaction. Every one was designed as a handful of key frames in Figma, then turned into a single Lottie that plays on any site and loops without a seam.
12
12
Lottie animations
Lottie animations
16–83 KB
16–83 KB
per .lottie file
per .lottie file
60 fps
60 fps
frame rate
frame rate
100%
100%
vector, editable
vector, editable
Contents
Contents
01
01
Dunnit
Dunnit
Neo-brutalism, Mobile app
Neo-brutalism, Mobile app
Neo-brutalism, Mobile app
640 × 800
10.0 s
36 KB
36 KB
02
02
Nova
Nova
Dark fintech, Mobile app
Dark fintech, Mobile app
Dark fintech, Mobile app
640 × 800
9.8 s
42 KB
42 KB
03
03
Integrations MCP
Integrations MCP
Stotles, AI assistant integration
Stotles, AI assistant integration
Stotles, AI assistant integration
588 × 510
15.1 s
75 KB
75 KB
04
04
Email & Slack Alerts
Email & Slack Alerts
Stotles, Alert channels and daily digest
Stotles, Alert channels and daily digest
Stotles, Alert channels and daily digest
455 × 357
12.8 s
83 KB
83 KB
05
05
shipit
shipit
Developer tool, Desktop terminal
Developer tool, Desktop terminal
Developer tool, Desktop terminal
800 × 600
11.5 s
55 KB
55 KB
06
06
Folio FM
Folio FM
Swiss style, Web player
Swiss style, Web player
Swiss style, Web player
640 × 640
10.3 s
50 KB
50 KB
07
07
Hush
Hush
Soft clay, Home-screen widget
Soft clay, Home-screen widget
Soft clay, Home-screen widget
640 × 640
10.7 s
31 KB
31 KB
08
08
Hearth
Hearth
Warm bento, Tablet dashboard
Warm bento, Tablet dashboard
Warm bento, Tablet dashboard
800 × 600
10.2 s
48 KB
48 KB
09
09
MEMO-3
MEMO-3
Industrial hardware, Device UI
Industrial hardware, Device UI
Industrial hardware, Device UI
640 × 640
10.5 s
22 KB
22 KB
10
10
Alba Stays
Alba Stays
Quiet luxury, Booking modal
Quiet luxury, Booking modal
Quiet luxury, Booking modal
800 × 600
9.8 s
74 KB
74 KB
11
11
Pulse
Pulse
Sport wearable, Smartwatch
Sport wearable, Smartwatch
Sport wearable, Smartwatch
640 × 640
10.7 s
16 KB
16 KB
12
12
Munch
Munch
Playful, iOS Live Activity
Playful, iOS Live Activity
Playful, iOS Live Activity
640 × 800
10.7 s
36 KB
36 KB
How it was made
01
Key states in Figma
Key states in Figma
Three to ten frames per concept, with every layer named the same way in each frame.
Three to ten frames per concept, with every layer named the same way in each frame.
02
Motion rules
Motion rules
Timing, easing and entrances set per layer: what morphs, what pops, what types itself.
Timing, easing and entrances set per layer: what morphs, what pops, what types itself.
03
Lottie output
Lottie output
One file per concept, checked for a seamless loop and played back in lottie-web.
One file per concept, checked for a seamless loop and played back in lottie-web.
Thanks for watching.
Thanks for watching.
Thanks for watching.
Pavlo Zhydkykh · Product & Motion Designer · 2026
Pavlo Zhydkykh · Product & Motion Designer