ColorsMineral + cobalt

TypeEditorial

Headings
Body
Captions

Maikon MirandaMotion designer

Based in Brazil.
Working across screens.

Let’s talk ↗

UI/UX Motion

Interfaces in motion.

Icons, loops and interactions.
56 animations across nine collections.

Lottie

56 animations, nine collectionsOpen the wall

Drag to explore. Pinch or Ctrl + scroll to zoom.

Wall settings
Loading the collectionInfinite in every direction / Pinch or Ctrl + scroll to zoom

Parametric Hero Tool

Compose, adjust and exportOpen the tool

This very site itself

GSAP, Rive and LottieOpen the site

Variable lens

Weight and optical size follow your cursor.

practice.
f = exp(-(d / R) ** 2)
wght = 500 + 300 * f
opsz = 72 - 60 * f

Keyframes

Drag a diamond. Each hit follows the dot’s speed.

scale = 1 + .196 * max(.25, v / vMax)

Rive switch

The theme switch as a working mock-up: hover it, pick a mode.

vm.number('expandedDark').value = 100
vm.color('inkColor').rgb(r, g, b)
vm.trigger('darkPress').trigger()

Cheat console

There’s a secret console (F4 or Cmd+Shift+C). Send the right cheat and have fun!

Hint: think about stairless pools, top view crime, being born from a dragon and a few more.

Stack

No framework, no build step.

  • HTML, CSS, JavaScript
  • GSAP 3.15
  • Rive 2.44
  • lottie-web 5.12
  • View Transitions
  • Vercel