Pieces — work in progress

Components and interactions, inspired by my book.

Each piece riffs on a real case — Coltrane, Albo, BloopScore, The Vault. Hover to play, click to read the code.

0component insertions

Adoption Counter

Coltrane DS at Coppel — 956K → 16.7M in one year.

Coppel
✓ A11y AA⚡ Light
Entrega en CULIACÁN, SINALOA
👟Oferta

Nike Airforce 1 Mid

$2,629.00$3,299.00
Código del producto (SKU): 84285Q
Vendido y entregado por Coppel

Coppel Product Card

E-commerce primitive — delivery, oferta, price ladder, social actions, CTA.

Coppel
✓ A11y AA⚙ Medium
DébitoCLABE *8292
$10,000.00

Últimas transacciones

Uber Eats8:09 p. m.
-$535.15
Minerva Food8:09 p. m.
-$267.15
a|criptoTienes 0 criptomonedas
$0.00
a|adelantoOferta disponible
$0.00
Otro productoTienes 0 espacios
$0.00

Albo Product Card

One primitive, every product — Débito, Cripto, Adelanto, drag-state.

Albo 3.0
✓ A11y AA⚙ Medium
VISUALCODESYSTEMSRESEARCHMENTOR

AI Skill Radar

BloopScore — the assessment shape behind designer growth.

BloopScore
✓ A11y AA⚡ Light
AI Priced
◆

Charizard Holo · 1st Edition

$2,840★★★★★

Vault Rarity Tile

Marketplace card with iridescent shimmer + AI-priced badge.

The Vault
⚠ A11y Partial⚙ Medium
🎴Charizard Holo · 1st Editionpending
🎴Blastoise Base Set Shadowlesspending
🎴Venusaur Holo Baseaccepted
🎴Pikachu Illustratoraccepted
🎴Mewtwo GX Promoaccepted
🎴Lugia Neo Genesisaccepted
🎴Gengar VMAX Rainbowpending
🎴Eevee Heroes Promoreceived

Sale Group Header

Marketplace pivot — one dot per item, color by status, urgency by age.

The Vault
✓ A11y AA⚙ Medium
Score
Última actualización: 10/02/2019
730
400500600700850
Score promedio
701
Tu mejor score
800
Santander
Tarjeta de crédito revolvente
Volkswagen Leasing
Crédito Automóvil — Vento 2018

Credit Score Report

Fintech mobile primitive — score gauge, history strip, institution list.

Fintech
✓ A11y AA⚡ Light

Cuentas por cobrar

En esta sección podemos ver las cuentas que nos deben diferentes clientes.

No.NombreTeléfonoEmailProducto
44Maria Patricia K.55-55-33-23[email protected]Cepillos
43Jose Juan Pedro H.55-32-11-33[email protected]Sadas
42Mario Meza T.55-36-98-21[email protected]Colmillos
41Jose Aranda K.55-23-11-88[email protected]Bote plástico
40Andrea Marisol G.44-77-22-88[email protected]Plástica
39Patricia González Y.96-22-56-12[email protected]Cojalilla
CamposEstadoComp.Config.
Fuente
Ventas
No.Id
NombreTexto
TeléfonoTeléfono
EmailMail
ProductoTexto
CostoDinero
Agregar Campo

Configurable Table

B2B SaaS primitive — column visibility, source switcher, persisted config.

SaaS
⚠ A11y Partial⚙ Medium

Wave-to-Rock Button

Idle waves, hover rocks. Yellow → navy with a soft physical lift.

Interaction
✓ A11y AA⚡ Light