ColorsMineral + cobalt

TypeEditorial

Headings
Body
Captions

Maikon MirandaMotion designer

Based in Brazil.
Working across screens.

Let’s talk ↗

Venture capital · 2024 · Motion

Tamarind
Hill

One build, three canvases.

Client
Tamarind Hill
Visual identity
Carthagos
Motion
Maikon Miranda
Scope
Branding Logo animation Social media UI/UX Motion
// 16:9 on desktop, portrait on mobile, two renders not one crop

Two readers arrive at this identity with opposite expectations. Founders want a partner who will sit in the trenches. Investors want a track record and a steady hand. The static system answered that by splitting one palette into a warm range and a deep one, with white as the ground they share.

Motion could not split the same way without splitting the brand in two. So the mark assembles from its own parts, and that sequence stays identical everywhere it lands. Timing, easing and order do not change between a pitch deck, a feed and a story. What changes is the frame the mark grows into and how the composition reflows around it.

// colour system, 1:1 seamless loop
// social set, 1:1 loops

Four Lottie files for the site. Colour is rewritten at runtime from one token rather than baked into the file, so the same asset works on either ground. Each one scales without resampling, and can be interrupted mid‑play when someone navigates away.

Every file runs at 60fps and every duration is a multiple of twenty frames, the same twenty-frame unit the staggered layers step on, so an eight-second build and a 2.7-second banner stay on the same grid. The set ships as .lottie rather than raw JSON, which is identical output at just over a quarter of the weight. Reduced motion holds the resolved state and cross-fades only.

// payload is the .lottie file as served on this page
Asset Trigger Duration Payload Reduced motion
Outline buildtrigger480f · 8.000s1.8 KBResolved frame
Icontrigger300f · 5.000s2.0 KBStatic mark
Join linestrigger240f · 4.000s1.5 KBResolved frame
CTA linestrigger160f · 2.667s19.7 KBResolved frame

// rendered at runtime, not video, right-click to inspect

Outline build480f · 8.000s · 1.8 KB
Icon300f · 5.000s · 2.0 KB
Join lines240f · 4.000s · 1.5 KB
CTA lines160f · 2.667s · 19.7 KB · 3549×964

A token set and a folder of runtime files, not a folder of renders. Durations, easing and reduced-motion behaviour are written down, so the next person to touch this extends it instead of guessing.

  • 4Lottie files, 25.0 KB for the whole set
  • 3Delivery formats from one build
  • 20fTiming unit every duration divides by, at 60fps
  • 3.6×Lighter as .lottie than as raw JSON