PTContact us

Case Study - An esports brand site with Motion-powered presence

The official Low Profile FC site for the Streammers League, built in Next.js with Motion and Motion+, and a foil creator card for every athlete. Live at lowprofilefc.mellofattura.com.

Client
Low Profile FC
Year
Service
Web Development, Motion Design, Brand Experience
Low Profile FC hero: Onde só jogam animais

Overview

Onde só jogam animais

Low Profile FC is the public home for a Streammers League side in Group C: captain Renato Vicente, best-of-five nights at 22:00, debut on 31/08. We built the whole brand experience. Cinematic hero, roster with hover sound, league calendar, Group C board, scroll finale, and a foil linktree for every creator.
  • Onde só jogam animais
  • Low Profile FC
  • Motion + Next.js

Process

How we shipped it

Five chapters in one composition: structure first, Motion polish last.
01

Brand & structure

Single-page season story: hero → roster → fixtures → group → finale. First viewport stays brand-first.

02

Data & media

Typed roster + creators. Images and video on Vercel Blob with a hashed manifest outside git.

03

Motion pass

Motion+ for Ticker, splitText, ScrambleText, AnimateNumber, Cursor. Motion springs for tabs, foil, finale.

04

Creator engine

Static /creators/[slug] routes with holographic foil cards for every athlete: tilt, glare, and flip.

05

Polish & ship

Reduced-motion guards, MotionScore A, live on lowprofilefc.mellofattura.com.

Product

The site, frame by frame

Hero, elenco video, roster tabs, foil creator cards, and the scroll finale, composed as a Motion UI style bento.
Low Profile FC hero: the slogan Onde só jogam animais over the squad

Hero

Foil creator card for captain Renato Vicente, with his Kick link below

Foil creator

Elenco section with the squad video

Elenco · video

Roster tabs filtered to the atacantes grid

Roster tabs

Scroll finale resolving on the slogan above the footer

Scroll finale

Stack & proof

Motion where it earns its keep

Next.js for the shell. Motion and Motion+ for presence: marquee, scramble, numbers, cursor, and foil tilt. Each one is load-bearing.
Static pages
14

Generated at build, including creator routes

Creator foils
11

/creators/[slug] with tilt, glare, flip

MotionScore

A

Official Motion+ audit after the animation pass

Live
Visit site →

lowprofilefc.mellofattura.com

Technologies

  • Next.js 16
  • React 19
  • Motion
  • Motion+
  • Tailwind 4
  • Headless UI
  • TypeScript
  • Vercel Blob

Motion+ powers the slogan ticker, section reveals, and number odometers. Motion handles layoutId roster tabs, foil springs, and the scroll-scrubbed finale, with explicit reduced-motion guards on the parallax and the loops.

More case studies

A course platform for building with AI, still in the studio

Mellofattura’s course platform: build real digital products with AI, from prototype to publication, lesson by lesson. Two courses are live; more are in production.

Read more

Curated agent skills for iOS UX and accessibility

A research-led skills framework that started as a Mackenzie TCC, shipped as an open agent plugin, and is now a Springer-accepted workshop paper, with Camera Ready underway for JIIHC 2026 in Chile.

Read more

Tell us about your project

Say hello

Where we are

  • São Paulo
    São Paulo, SP
    Brazil