Pavlo Zhydkykh

Product Designer & Developer

Case study 01 · 2026

Case study 01 · Lottie animation set

Case study 01 · Lottie animation set

Four features,

Four features,

Four features,

one motion language.

one motion language.

one motion language.

Four feature animations for Fieldnote, an AI note-taker for meetings. Each one explains a single feature on the marketing site, and all four share one window, one type family and one accent, so the set reads as one product.

Four feature animations for Fieldnote, an AI note-taker for meetings. Each one explains a single feature on the marketing site, and all four share one window, one type family and one accent, so the set reads as one product.

Client

Fieldnote (concept)

Fieldnote (concept)

Scope

4 feature animations for the website

4 feature animations for the website

Tools

Figma, Lottie

Figma, Lottie

Deliverables

.lottie, JSON, MP4

.lottie, JSON, MP4

The set

The set

Fieldnote, Record & transcribe
Fieldnote, AI summary
Fieldnote, Action items
Fieldnote, Ask Fieldnote

Palette

Canvas

#F3F1EC

Card

#FFFFFF

Ink

#17171C

Accent

#FF5B2E

AI

#EEEAFF

Done

#DDF4E7

Type

Aa

Aa

Geist + Geist Mono

Motion rules

01

Cards rise 12 px on a 0.4 s ease-out

Cards rise 12 px on a 0.4 s ease-out

02

The accent marks only what just changed

The accent marks only what just changed

03

Every loop ends on its first frame

Every loop ends on its first frame

0 / 0

01 / 04

Record & transcribe

Record & transcribe

Feature 1, Meetings

Feature 1, Meetings

Fieldnote joins the call, the waveform starts and the transcript writes itself line by line, with the key phrase picked out in the accent.

Fieldnote joins the call, the waveform starts and the transcript writes itself line by line, with the key phrase picked out in the accent.

Canvas

800 × 600

Duration

10.0 s

File size

44 KB

Frame rate

60 fps

Type

Geist, Geist Mono

Key states

Record & transcribe, key state 1
Record & transcribe, key state 2
Record & transcribe, key state 3

02 / 04

AI summary

AI summary

Feature 2, Summaries

Feature 2, Summaries

One click on Summarize. The transcript steps back, the summary card writes itself and lands with three decisions and one open question.

One click on Summarize. The transcript steps back, the summary card writes itself and lands with three decisions and one open question.

Canvas

800 × 600

Duration

10.0 s

File size

42 KB

Frame rate

60 fps

Type

Geist, Geist Mono

Key states

AI summary, key state 1
AI summary, key state 2
AI summary, key state 3
0 / 0
0 / 0

03 / 04

Action items

Action items

Feature 3, Tasks

Feature 3, Tasks

The sentences that hold an action light up, slide across as tasks with an owner and a due date, then sync to the team’s tracker.

The sentences that hold an action light up, slide across as tasks with an owner and a due date, then sync to the team’s tracker.

Canvas

800 × 600

Duration

10.0 s

File size

37 KB

Frame rate

60 fps

Type

Geist, Geist Mono

Key states

Action items, key state 1
Action items, key state 2
Action items, key state 3

04 / 04

Ask Fieldnote

Ask Fieldnote

Feature 4, Search

Feature 4, Search

A question typed once searches every meeting of the quarter and comes back as one answer with the exact moments it came from.

A question typed once searches every meeting of the quarter and comes back as one answer with the exact moments it came from.

Canvas

800 × 600

Duration

10.0 s

File size

45 KB

Frame rate

60 fps

Type

Geist, Geist Mono

Key states

Ask Fieldnote, key state 1
Ask Fieldnote, key state 2
Ask Fieldnote, key state 3
0 / 0

How the set was made

01

Style frame first

Style frame first

One window, one type family and one accent, fixed before any motion.

One window, one type family and one accent, fixed before any motion.

02

Key states

Key states

Three states per feature, every layer named the same way in each.

Three states per feature, every layer named the same way in each.

03

One motion language

One motion language

Shared timing and easing rules, then one seamless Lottie per feature.

Shared timing and easing rules, then one seamless Lottie per feature.

Thanks for watching.

Thanks for watching.

Thanks for watching.

Pavlo Zhydkykh · Product & Motion Designer · 2026

Pavlo Zhydkykh · Product & Motion Designer · 2026

Create a free website with Framer, the website builder loved by startups, designers and agencies.