Spline Effects Hub — WebGL Recreations

WebGL recreations of Spline Community effects — Zero dependencies, 60fps, single HTML files

Liquid Metal

Mercury-like surface distortion with ripple waves, chromatic aberration, and iridescence. Move mouse to disturb.

Fluid Distortion Mouse Tracking

Tick Tock

Interactive 3D cubes that float, rotate, and respond to cursor proximity. Inspired by kennyK's landing page.

3D Cubes Interactive

Retrofuturistic Circuit

Animated circuit board with traveling light pulses, chip processor, and mouse-reactive glow. Retro tech aesthetic.

Tech Neon Animation

Boxes Hover

Dynamic cube grid that spawns from cursor position. Each box has depth, shadow, and staggered animation.

Grid Hover Depth

🧬 Spline Research Pipeline

Un sistema que, según el tema y estilo de cada web, busca efectos Spline en la comunidad, los analiza visualmente, y los recrea en WebGL puro adaptados al diseño. No son efectos fijos — son un proceso.

STEP 1

Analyze Web Theme

Detectar tema, mood, colores, audiencia. Ej: "fintech dark" vs "organic wellness"

STEP 2

Search Spline Community

Buscar efectos por tags relevantes: #tech, #organic, #minimal, #hero, #interactive

STEP 3

Visual Analysis

Screenshot + visión AI para extraer: movimiento, interacción, paleta, sensación

STEP 4

WebGL Recreation

Recrear el efecto en WebGL vanilla. Adaptar colores, timing, interacción al design system

STEP 5

Integration & Deploy

Integrar como hero/background/section. Deploy con el resto de la web