PromptsCSS
Exploration

Motion

AllContinuousEntrance / ExitMicro-interactionsState change

Filter by tag (one at a time).

Fade in
01

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

02

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

03

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

04

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

05

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

06

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

07

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

08

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

FreeEntrance / Exit

Fade in

Fade elements in when they appear.

Slide in
01

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

02

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

03

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

04

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

05

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

06

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

07

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

08

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

FreeEntrance / Exit

Slide in

Slide elements into view from an offset position.

Toggle transitions
State change

Quick settings

FreeState change

Toggle transitions

Animate smooth transitions between toggle states.

Animate button

Micro-interaction

FreeMicro-interactions

Animate button

Animate a button on hover and press.

Animate state changes
State change

Like toggle

State change

Segmented status

Current
Idle

Ready to record.

Idle

FreeState change

Animate state changes

Animate state changes with micro-interactions.

Locked prompt
01

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

02

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

03

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

04

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

05

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

06

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

07

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

08

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

PremiumEntrance / Exit

Locked prompt

Lifetime access – $19.99

Locked prompt
Continuous

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

PremiumContinuous

Locked prompt

Lifetime access – $19.99

Locked prompt
Continuous

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

PremiumContinuous

Locked prompt

Lifetime access – $19.99

Locked prompt
State change

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
PremiumState change

Locked prompt

Lifetime access – $19.99

Locked prompt

Click feedback

PremiumMicro-interactions

Locked prompt

Lifetime access – $19.99