Tres playgrounds reales. Calculator-Kit pattern.
Mueve un control · la app muta. Como Apple.
Inspirado en Claude Design Gallery. State real mutable + mouse interactivity + export al clipboard.
5 variants × 3 sizes × 4 states × 4 icons × 3 shapes. Click cualquier control · el botón muta. Exporta JSX listo.
Partículas físicas. Ocean, Sand, Gold, Navy, Cream. Mové el mouse · reaccionan.
char-pop · weight-in · fade · typewriter · blur · slide · wave · glitch · gradient · bounce · flip · expand
Tipografía · spacing · motion. Capturado del DOM real de apple.com/cl/mac-mini.
SF Pro stack. Letter-spacing -0.022em en body. Line-height 1.0625 en heroes. Spacing 160px entre secciones.
Warm cream, Navy, Gold, Accent. Picker live + WCAG ratios + Apple Blue.
SF Pro Display (heroes). SF Pro Text (body 17px). SF Mono.
4 px base. 160px section padding (Apple capturado real).
12px md. 22px cards. 980px pill (Apple CTA canon).
Pill total. Apple blue #0066CC. Magnetic hover.
cubic-bezier(.22,1,.36,1). 180ms · 280ms · 480ms.
6 componentes base · cada uno con playground Calculator-Kit pattern. Buttons LIVE · Inputs LIVE · resto en cola.
5 variants × 3 sizes × 4 states × 4 icons × 3 shapes. JSX export.
RUT chileno DV · Token Bsale · SMC SpA · estados real-time · live JSON state.
Conectado · Sync pendiente · Token expirado · Plan Pro · Free + filter pill rows
Glass · Bento · Stat · Pricing · 4 variantes que cubren 90% de uso real.
Compact (56px) · Expanded (220px) · Floating · ⌘K command palette.
Success · Warning · Error · Info · auto-dismiss 4s + manual close.
Lucide stroke 1.75 cross-projects. 5 mesh backgrounds reactivos. Wordmark editorial.
4 patterns estructurales que se aplican en múltiples proyectos. Hero Reveals · Scroll Stories · Hover Magic · Bento Grids. Cada uno con playground motion-driven.
Pinch Zoom · Card Stack · Mask Wipe · Mirror Split · Crystallize.
Scroll-Snap · Pinned Reveal · Parallax 2-layer · Reels · Concentric.
3D Tilt · Text Reveal · Magnetic Button · Cursor Follow · Border Glow.
Apple Vision · 2×3 Asymmetric · Stat Hero · Feature Showcase · Pricing.
Arrastrá efectos desde la biblioteca al canvas · mezclalos en vivo · guardá tu combinación · si funciona, promoveda a producción.
Propios, socios, clientes. Cada uno con live preview iframe del último deploy.
streetwear B2C · 21 maquetas
cotizador multi-step + PDF
dashboard interno · 24 agentes
smconnection.cl · HTML + S3
Bsale + Jumpseller + Tsukai IA
SF ↔ SAP · 4 integraciones
MeLi + B2G + B2B
SAP PI 7.5
mentor IA · Opus 4.7 Reflexion
CPI ETL · Groovy · SFTP TS4
iFlows · Integration Suite
transcript → SPIN/BANT
Inteligencia externa curada. Devs cloud, motion designers, educators. Para no quedarnos atrás.
Stripe · Linear · Vercel · Apple · Anthropic · 11 feeds switcheables
@kinetictype · @motiondesign · 10 designers
Tina Huang · Thu Vu · Fireship · Lex
Thoughtworks · Deloitte · Accenture
Anthropic · Stripe · Linear · Vercel
Pieter Levels · Marc Lou
Sidebar · The Tilt · Refind
Lex Fridman · Acquired · Latent Space
Matt Wolfe · AI Explained · Fireship
shadcn/ui · awesome-claude
r/ClaudeAI · Discord · @AnthropicAI