PTContact us

Case study: Low Profile FC - 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.

Project
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 menu scanner that picks what to order, with the math done on the phone

An iOS app that reads a restaurant menu from one photo, checks it against what you logged in Apple Health today and ranks the dishes. A language model reads the menu; Swift does the math.

Read more

Language lessons from the game on your screen

Looté is an iOS app for people learning a language from the games they already play. It reads a game screen, explains each line in the context of the scene, and turns what you save into spaced-repetition flashcards.

Read more

Made to order - Bring the problem to the bench.

A rough idea is enough to start. You’ll talk directly with the person who will build it.

Start a conversation

Bench

São Paulo