3D para web con Spline y Three.js: escenas interactivas

Escenas 3D en tiempo real: Spline (diseño 3D sin código) y piezas originales en Three.js.

Cuándo usarlas: Para el momento “wow” de un hero o una presentación de producto. Una escena por página y carga diferida.

  • CubeWave — Suelo de cubos que ondula y crea una onda donde pasas el ratón.
  • FloatingShapes — Formas brillantes flotando con parallax: el hero 3D clásico, listo para usar.
  • GlassCards — Abanico de tarjetas de cristal que se abre al pasar el ratón.
  • GlassKnot — Nudo de cristal real que refracta las formas de color que tiene detrás.
  • Gyroscope — Giroscopio de anillos metálicos alrededor de un núcleo de luz; acelera al hover.
  • Helix — Doble hélice de ADN en esferas: ciencia, salud, biotech.
  • JellyCube — Cubo de gelatina que tiembla con el cursor y salta al hacer clic.
  • LiquidBlob — Gota líquida iridiscente que se deforma, sigue al cursor y tiembla al hacer clic.
  • OrbitSystem — Sistema de órbitas: esferas de colores en planos inclinados.
  • ParticleSphere — 6.000 partículas en esfera que respiran y se apartan de tu cursor. Shader propio.
  • PillRain — Lluvia de cápsulas con física de rebote. Clic para lanzarlas.
  • Planet — Planeta con anillos y una luna en órbita que se inclina hacia ti.
  • PressKey — Tecla 3D que se hunde con un muelle al pulsarla y cuenta tus clics.
  • RoddMonogram — Monograma 3D metálico que sigue al cursor. Original de RODD, hecho con Three.js.
  • SplineCube — El “hola mundo” de Spline: un cubo que puedes girar. Ideal para aprender la integración.
  • SplineDesign — Tipografía 3D inflada con formas flotantes. Escena de ejemplo oficial de Spline.
  • SplinePlayground — Pega la URL de tu escena de Spline y mírala en vivo con su código listo para copiar.
  • SynthGrid — Paisaje synthwave: montañas de malla y sol retro que avanzan hacia ti.
  • ToggleSwitch — Interruptor 3D con muelle y squash & stretch. Haz clic.
  • WavePlane — Tela iridiscente que ondula y forma olas donde pasas el ratón.