Skip to content
Iranpeyma Brand

Expression

Motion

Motion is structural, not decorative. It guides attention, signals state, and never demands more than a glance.

Easing

Defaults to a single “out” cubic-bezier.

cubic-bezier(0.22, 1, 0.36, 1)
Durations

Three tiers — never longer than 600ms.

  • fast — 0.2s
  • base — 0.35s
  • slow — 0.6s
Distance

Travel stays small so layout never “jumps”.

  • sm — 8px
  • md — 16px
  • lg — 32px

Live demos

Every demo respects prefers-reduced-motion.

Reveal · fadeUp

Generic in-view reveal. Swap the variant prop to use any preset.

Scroll into view to see this reveal.
TextReveal

Token-by-token entrance.

Stagger

Children animate in sequence.

1
2
3
4
5
6
7
8
Tilt

Hover to see the gentle 3D tilt response.

Hover me
Marquee

Continuous loop. Pauses on hover by default.

CinnabarDerbyInter TightInterfadeUpTextRevealCinnabarDerbyInter TightInterfadeUpTextReveal