Frontend · showcase

The visual side.

Renders, captures, motion experiments and the small playgrounds I make to learn or just play. The stuff that doesn't fit a case study.

Featured · 3D Renders 2 Captures 4 Motion 3 Experiments 1

Featured · 3D · Interactive

The Kenworth.

Three.js + DRACO + PBR. Click y arrastra para girar. Pellizca para hacer zoom.

GLB · 3.9 MB DRACO PBR + emissives
Drag to rotate
Auto-rotate

Loading 3D · 3.9 MB

Engine

Three.js r184

Compression

DRACO geometry

Lighting

PBR · 4 spots

Source

Grupo Quique

Featured · Motion · Scroll-mapped

Studio reel.

8 seconds, 192 frames — every pixel of scroll moves one frame.

0 / 192 frames

0001 / 0192

3D · Lighting · Materials

Renders.

02 pieces

Hero render — placeholder

Blender · Cycles

— placeholder —

Hero render — placeholder

Blender · Cycles

01 / Renders

Hero render — placeholder

2026

Drop your 3D renders into /public/frontend/renders/

Material study

Blender

— placeholder —

Material study

Blender

02 / Renders

Material study

2026

Replace with your own

Frontend snapshots

Captures.

04 pieces

Grupo Quique — corporate site

Bedrock · Vite 6 · Tailwind v4 · GSAP · Lenis

— placeholder —

Grupo Quique — corporate site

Bedrock · Vite 6 · Tailwind v4 · GSAP · Lenis

01 / Captures

Grupo Quique — corporate site

2025

Editorial WP theme on Bedrock — capítulos numerados, marquees, Three.js Kenworth

undf.studio — agency site

WordPress · GSAP

— placeholder —

undf.studio — agency site

WordPress · GSAP

02 / Captures

undf.studio — agency site

2026

Custom WP theme with GSAP scroll choreography

Multi-tenant SaaS — dashboard

Laravel · Inertia · Vue

— placeholder —

Multi-tenant SaaS — dashboard

Laravel · Inertia · Vue

03 / Captures

Multi-tenant SaaS — dashboard

2025

Tenant dashboard with realtime updates

Lead-gen — preview generation

Python · Claude · Playwright

— placeholder —

Lead-gen — preview generation

Python · Claude · Playwright

04 / Captures

Lead-gen — preview generation

2026

AI-generated preview pages

Interactions · Transitions

Motion.

03 pieces

Grupo Quique — industrial marquees

CSS @keyframes · GSAP counters

— placeholder —

Grupo Quique — industrial marquees

CSS @keyframes · GSAP counters

01 / Motion

Grupo Quique — industrial marquees

2025

Ticker + marquee de servicios + clientes en doble pista — CSS-only, mask gradient en bordes

Scroll-driven reveal

GSAP 3.12

— placeholder —

Scroll-driven reveal

GSAP 3.12

02 / Motion

Scroll-driven reveal

2026

GSAP ScrollTrigger timeline

Counter ease-out

Vanilla JS

— placeholder —

Counter ease-out

Vanilla JS

03 / Motion

Counter ease-out

2026

Cubic-out interpolation triggered by IntersectionObserver

Toys · Playgrounds

Experiments.

01 piece

Orbital tech chips

CSS · SVG

— placeholder —

Orbital tech chips

CSS · SVG

01 / Experiments

Orbital tech chips

2026

Float-mid + float-slow CSS animations on radial layout

Add new pieces

How to add a new render or capture

  1. 01Drop the asset in /public/frontend/<category>/
  2. 02Add an entry to src/data/showcase.ts
  3. 03Set src, ratio, caption
  4. 04npm run build y listo

// showcase.ts

{
  id: 'render-bedroom',
  title: 'Bedroom render',
  category: 'render',
  src: '/frontend/renders/bedroom.png',
  ratio: 'landscape',
  caption: 'Cycles · 2k samples',
  tool: 'Blender',
  year: '2026',
}