Benito Pedro Xavier

Full stack, concept to cloud

Interfaces, APIs, and the infrastructure underneath them.

Loading experience000
All case studies
In developmentProduct2026

ART'hur

Motion-led portfolio and living archive for a visual director

In plain English

A portfolio site that behaves like a sequence of film scenes instead of a scrollable page — one project fills the screen at a time, and a single scroll notch cuts to the next one like an edit, not a swipe.

My role

Solo full stack developer

Timeline

Ongoing

Team

Solo

Status

In development

Next.jsTypeScriptPayload CMSPostgreSQLTailwind CSSGSAPOGL (WebGL)Vercel Blob

Design

Product tour

ART'hur's centered archive stage with the dashed route and walker glyph
ART'hur project case study header for Casa 264
ART'hur contact-sheet index of every project
ART'hur about page running the Living Tag at display scale
ART'hur contact page with direct paths first

Section 01

The problem

The starting point was a Next.js and Payload CMS foundation wearing a literal macOS desktop skin — wallpaper, dock, icons, window chrome. It behaved like software demoing itself, not like an archive of a director's actual work, and a generic template grid could never carry the specific rhythm of motion-forward, culturally fluent work.

Section 02

How I approached it

The CMS, data model, and Next.js foundation stayed. Everything public-facing was rebuilt around a studied 'Marked Frequencies' direction, translated from two reference archives rather than copied from either: one fixed, centered project stage where image, atmosphere, title, and metadata morph in place, advanced by a single wheel notch or short touch gesture instead of an open carousel. A dashed white route and a hand-authored 15-frame walking glyph carry the sense of motion instead of a generic loader, and the app cuts between two surfaces — a dark 'room' for media routes and a light 'sheet' for reading — with no cross-fade between them.

Outcome

A live archive at art-hur.vercel.app carrying five real projects, each with production metadata instead of filler copy, where the desktop-simulation shell is gone from every public route, the CMS layer is untouched, and the opening sequence, walker, and morph transition all degrade to a complete, legible page under reduced motion or a failed WebGL context.

Section 03

Going deeper

One stage, not a carousel

The home is a single sticky, centered project stage rather than a horizontal track. A modest wheel notch or short touch-scroll gesture immediately selects the adjacent project and synchronizes the native document anchor to it — the visual transition then completes on its own authored easing rather than being scrubbed frame-by-frame off scroll distance, so the experience reads as a cut between scenes instead of a dragged carousel.

A route and a walker instead of a spinner

A single dashed Newsprint-white line exits both screen edges and breathes as one slow seesaw about a fixed center anchor. An original 15-frame '芸' glyph, capped at 82×82 CSS pixels, rides that anchor: it plays its gait only during the entrance and project transitions, flips when navigating backward, and holds a neutral frame while idle. Neither is decorative chrome borrowed from a template — both are bespoke marks tied to this one archive.

Two surfaces, cut not faded

The site declares exactly two surfaces and cuts between them with no cross-route fade: the 'room' (Vinyl Black) for media-led routes, the 'sheet' (Newsprint) for reading. Each interior route stamps `data-surface` on its root element and the global stylesheet paints the canvas to match, so overscroll never bleeds the wrong background color into view.

Section 04

The build process

1

Strip the shell, keep the foundation

Next.js App Router, Payload CMS, PostgreSQL, and Vercel Blob stayed exactly as inherited. Every literal macOS desktop simulation — wallpaper, lock screen, dock, icons, window chrome — was removed from the public experience before any new visual direction was authored on top.

2

Build the one-stage navigation

The centered project stage, the wheel/touch-to-anchor gesture sync, and a controlled WebGL morph transition adapted from React Bits' MorphSlider — running on its own easing instead of being tied directly to scroll position.

3

Author the motion signature

The continuously breathing dashed route, the hand-drawn 15-frame walking glyph, and a restrained WebGL ripple hover layer over the stable active image — suppressed during transitions, reduced motion, and touch-only use.

4

Interior routes, opening, and SEO

The work case study, contact-sheet index, about, and contact routes; the two-surface room/sheet system; a resilient CSS-only opening sequence; and per-route Open Graph images and JSON-LD generated from the same brand language.

Section 05

How the pieces fit together

Each layer has one job. Read it top to bottom — that's roughly the path a request takes through the system.

Client

Next.js App Router

Public archive routes sharing one app with the Payload admin route group, plus localized routing.

CMS

Payload CMS 3

Projects, media, and site settings, publication-gated the way the inherited foundation intended.

Data

PostgreSQL + Vercel Blob

Relational content plus S3-compatible object storage for project imagery.

Motion

OGL (WebGL) + GSAP / motion

The centered morph transition and ripple hover run on a controlled OGL renderer; DOM-level choreography runs on GSAP and motion.

Section 06

What it does

One-stage project navigation

A single wheel notch or short touch gesture selects the adjacent project and syncs the document anchor; the transition then completes on its own authored easing instead of being scrubbed by scroll distance.

Dashed route and walker glyph

A continuously breathing dashed line and a hand-authored 15-frame '芸' glyph carry direction and motion instead of a generic spinner or carousel arrow.

Two-surface cut system

Media routes render on a dark 'room' and reading routes on a light 'sheet', with the surface stamped on the route root so overscroll never reveals the wrong canvas color.

Resilient opening sequence

A full-screen CSS-only animation that fills backward from its final visible state, so a failed or skipped animation still renders a complete page rather than a blank one.

Section 07

The hard parts

Decoupling gesture from animation

The wheel/touch input had to commit to the adjacent project on one modest gesture rather than scrubbing shader progress directly off scroll distance, so the transition reads as an edit rather than a scroll-linked effect.

Keeping data and shell separable

The Payload CMS foundation and its data model had to survive completely intact while every public-facing macOS-simulation layer built on top of it was removed.

An overlay that can't fail blank

The full-screen opening sequence is CSS-only and fills backward from a complete final state, so a bug in the animation still renders the finished site instead of hiding it entirely.

Section 08

What I took away

  • Studying two reference archives for confidence and pacing, then translating rather than cloning, produces a stronger identity than either source alone.
  • An authored motion signature — one specific glyph, one specific line — reads as intentional in a way a generic spinner or carousel never does.
  • Building the reduced-motion and WebGL-failure paths alongside the primary experience, not after it, is what keeps the hierarchy legible when the flashy parts are off.

Direction

Marked Frequencies

Navigation

One centered project stage

CMS

Payload 3 + Vercel Blob

Motion

WebGL morph + dashed route

Contact

Let's build something worth shipping

Available for freelance projects, full-time roles, and technical consulting. Tell me what you're building and I'll tell you honestly whether I'm the right person for it.

Based in Rio de Janeiro, Brazil · Working with teams in any timezone · Fluent in English and Portuguese