Motion

Motion is how Base breathes. It bridges utility and emotion, turning static screens into living spaces that react to every tap. Our animation system is lightweight, snappy, and purpose-driven; every keyframe either guides attention or rewards action. Shared easing curves create family resemblance across product, social, and event screens, while duration and scale flex to fit context. Think of motion as a friendly handshake-quick, confident, and memorable-never a magic trick that steals focus.
Motion
Motion is essential to Base's identity. It reflects the speed and fluidity of the onchain world while reinforcing hierarchy, interaction, and personality.Our motion language is intentional, from subtle easing to bold transitions.By owning how we move, Base stays distinct across product, social, and live experiences.Movement should always feel unmistakably ours.

Principle

Intention first:Each animation communicates a specific state change or hierarchy cue.Playful restraint:Small bounces and subtle overshoot add warmth without novelty-wear.Consistency with flexibility:One cubic-bezier curve (0.4, 0, 0.2, 1) adapts across sizes; extend duration rather than change timing.Snappy pace:Most UI feedback lands between 120 and 240 ms so interactions feel instant.Square-led choreography:Motion often begins or ends with the Square to anchor brand recall.Tech-positive polish:Transitions should feel like upgraded performance, not decorative flair.

Type

Our “tech scramble” animation reveals text by cascading vertical glyph swaps that resolve into the final message. Use it for product headlines, social teasers, or keynotes—never body copy. Reserve Medium weight for clarity and keep sequences under 800 ms to hold attention. Pair with a quick fade-in of supporting content so hierarchy stays clear.
Standard - 1
Standard - 2
Simple/Lower thirds
Doto
The Square

Logotype

The logotype can flex like our community—letters can scramble, rotate, or momentarily morph into icons before snapping back to "base."Keep tracking and baseline constant so the mark always lands crisp. Use expressive variants for launches, live streams, and social teasers; default to the simpler slide-in for routine UI. Never distort letterforms beyond 10 degrees or exceed one second total runtime.
Interactive - Hover
Website
Scramble
Simple

Intro / Outro

We maintain a toolkit of intro and outro patterns so motion can flex to context without feeling random. Pick one of four presets:
  1. Square-wipe — content slides on as the Square travels left to right.
  2. Center-burst — the Square expands to full bleed then collapses to reveal the next scene.
  3. Grid-mosaic — nine mini Squares flip to expose new artwork.
  4. Type-scramble — the headline resolves first, UI elements follow with a fade.
Keep any sequence under 800 ms, limit to one transition style per story, and ensure every move lands on the baseline grid before interaction resumes.
Intro - Simple
Outro - Simple
Outro - Standard
Intro - Standard

Misuse

In order to maintain brand consistency and integrity, please adhere to all usage guidelines outlined in this document, and avoid any distortions of any kind.
Do not use motion blur
Wrong curves & wrong speed
Do not distort square
Do not 3D rotate

More Sections