Our Work
Case Study - Agency - Website

elele.

Built in-house.

The Elele Group website - designed, built, and shipped by our own team. A showcase of everything we believe about design and motion.

Next.jsFramer MotionTailwind CSSTypeScriptSupabase
Colors

Design with intent.

Every pixel placed with purpose. Every animation triggered by meaning.

Next.jsTailwind CSSFramer MotionTypeScriptLive

/ Overview

We built
the thing
you're reading.

This site is built and maintained entirely in-house by the Elele team. Every component, every animation, and every design decision was made by us - no templates, no themes, no shortcuts. It is the clearest demonstration of how we work.

/ Design System

Tokens & Typography

A small, intentional set of design decisions that scale across every page and component.

Color Palette

Accent

#5BC8FF

Background

#080808

Surface

#0C0C0C

Text

#F0EFE9

Muted

#444444

Selection

#AEFF00

Type Scale

Display

font-display

Build things.

Headlines, hero copy, section titles

Body

font-body

Designed and built entirely in-house.

Paragraphs, descriptions, prose

Mono

font-mono

CASE STUDY / 01

Labels, tags, eyebrows, data

Motion Tokens

Primary ease[0.21, 0.47, 0.32, 0.98]
Spring - UIstiffness 400 / damping 20
Spring - smoothstiffness 100 / damping 30
FadeUp duration0.65s
Stagger step0.06 - 0.10s

/ Motion Design

Animation Philosophy

Every motion is purposeful - scroll-triggered reveals for content, spring physics for interactive elements, and continuous ambient animation for atmosphere. Nothing moves without intent.

FadeUp

Scroll-triggered opacity + Y translate. Used on every section entrance.

Stagger

Sequential delays across siblings. Used on tags, grid cards, and stat items.

Case Study

Slide In

X translate + opacity. Used on back-nav links and eyebrow labels.

hover me

Spring

Physics-based spring for interactive elements. Hover to feel the tension.

/ The Pages

Five pages.

Each page is a standalone component set, built to load fast, scroll smooth, and represent the work accurately.

01

Home

Hero, animated marquee, WhyUs cards, and CTA. First and only first impression.

HeroMarqueeCTA
02

About

Studio story, team structure, and the principles behind how we work.

StoryTeam
03

Services

What we build, how we build it, and why it matters for the people we work with.

OfferingsProcess
04

Work

Every product we have shipped - listed, linked, and studied. You are here.

PortfolioCase Studies
05

Brand

Design system documentation, identity guidelines, and visual language reference.

Design SystemIdentity

/ By the Numbers

The numbers.

0Pages
0+Components
0k+Lines of Code
0Lighthouse

/ Built With

Tech Stack

Next.jsTypeScriptTailwind CSSFramer MotionSupabaseVercel

/ Get started

Ready to build
something?

Tell us what you're building. We'll get back to you within 24 hours.

No commitment. No spam. Just a conversation.