Volver a la guía

Paso 3: Personalización y Posicionamiento

Domina el arte de posicionar y personalizar tus escenas de Spline

Nota: Esta página usa 'use client' para habilitar la interactividad de los botones de copiar código.

Posicionamiento con CSS

Usa CSS para mover y ajustar la posición de las escenas

/* Posicionamiento básico */
.spline-container {
  position: relative;
  width: 100%;
  height: 100vh;
}


.spline-scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* Desplazamiento específico */
.spline-desplazado {
  transform: translate(100px, -50px);
  top: -25px;
  left: 50px;
}

Posicionamiento Responsive

Usa clamp() para posicionamiento adaptativo

/* Posicionamiento responsive con clamp() */
canvas {
  transform: translate(
    clamp(50px, 8vw, 150px), 
    clamp(-150px, -12vh, -50px)
  );
  position: relative;
  top: clamp(-80px, -6vh, -30px);
  left: clamp(100px, 15vw, 400px);
}


/* Media queries para control específico */
@media (max-width: 768px) {
  canvas {
    transform: translate(20px, -30px);
    top: -20px;
    left: 20px;
  }
}

Contenedores Personalizados

Crea contenedores específicos para diferentes layouts

/* Contenedor de fondo completo */
.spline-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}


.spline-background canvas {
  width: 120%;
  height: 120%;
  transform: translate(-10%, -10%);
}


/* Contenedor centrado */
.spline-centered {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}


/* Contenedor sidebar */
.spline-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100vh;
  z-index: 10;
}

Ejemplos Avanzados de Implementación

Escena como Fondo con Contenido

import Spline from '@splinetool/react-spline/next';


export default function PaginaConFondo3D() {
  return (
    <div className="relative min-h-screen">
      {/* Fondo Spline */}
      <div className="fixed inset-0 z-0 overflow-hidden">
        <div className="absolute w-[150%] h-[150%] -top-[25%] -right-[25%]">
          <Spline scene="/fondo-3d.splinecode" />
        </div>
      </div>
      
      {/* Contenido superpuesto */}
      <div className="relative z-10 min-h-screen flex items-center justify-center">
        <div className="bg-white/90 dark:bg-black/90 backdrop-blur-md rounded-3xl p-12 max-w-4xl mx-4 shadow-2xl">
          <h1 className="text-5xl font-bold mb-6 bg-gradient-to-r from-pink-500 to-cyan-500 bg-clip-text text-transparent">
            Mi Contenido
          </h1>
          <p className="text-xl text-gray-600 dark:text-gray-300">
            Este contenido se superpone perfectamente sobre la escena 3D
          </p>
        </div>
      </div>
    </div>
  );
}

Escena Interactiva en Modal

import { useState } from 'react';
import Spline from '@splinetool/react-spline/next';


export default function Modal3D() {
  const [isOpen, setIsOpen] = useState(false);


  return (
    <>
      <button 
        onClick={() => setIsOpen(true)}
        className="px-6 py-3 bg-gradient-to-r from-pink-500 to-cyan-500 text-white rounded-lg hover:shadow-lg transition-all"
      >
        Abrir Experiencia 3D
      </button>


      {isOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
          <div className="relative w-[90vw] h-[90vh] bg-white dark:bg-gray-800 rounded-2xl overflow-hidden">
            <button 
              onClick={() => setIsOpen(false)}
              className="absolute top-4 right-4 z-10 w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
            >
              ×
            </button>
            <Spline scene="/escena-interactiva.splinecode" />
          </div>
        </div>
      )}
    </>
  );
}

Consejos de Diseño y UX

Posicionamiento Efectivo

  • • Usa z-index para controlar capas
  • • Implementa overflow: hidden para contener escenas
  • • Considera el rendimiento en dispositivos móviles
  • • Prueba en diferentes tamaños de pantalla

Optimización Visual

  • • Usa backdrop-blur para efectos glassmorphism
  • • Implementa transiciones suaves
  • • Mantén contraste adecuado con el contenido
  • • Considera la accesibilidad

Sistema Unificado de Estilos Spline

Usa el nuevo sistema centralizado para mantener consistencia y facilitar el mantenimiento

✨ Nuevo: Desplazamiento responsive automático hacia la derecha según el tamaño de pantalla

Uso con Presets (Recomendado)

import SplineBackground from '@/components/SplineBackground';


// Fondo de pantalla completa
<SplineBackground preset="BACKGROUND" />


// Fondo responsive (se desplaza hacia la derecha según el tamaño de pantalla)
<SplineBackground preset="BACKGROUND_RESPONSIVE" />


// Hero section centrado
<SplineBackground preset="HERO" />


// Sidebar pequeño
<SplineBackground preset="SIDEBAR" />


// Modal centrado
<SplineBackground preset="MODAL" />

Configuración Personalizada

// Cambiar solo la posición
<SplineBackground 
  preset="BACKGROUND"
  position="RESPONSIVE_RIGHT"  // Nueva posición responsive
/>


// Cambiar tamaño y escala
<SplineBackground 
  preset="BACKGROUND"
  size="EXTRA_LARGE"
  scale="EXTRA_LARGE"
/>


// Posición completamente personalizada con valores actualizados
<SplineBackground 
  preset="BACKGROUND"
  customPosition={{
    top: '-30%',  // Mejorado desde -25%
    right: 'clamp(-35%, -8vw, -38%)',  // Desplazamiento responsive optimizado
    transform: 'translate(clamp(50px, 10vw, 200px), -50px)'
  }}
/>

Desplazamiento Responsive (Nuevo)

// Usar el preset responsive (Recomendado)
<SplineBackground preset="BACKGROUND_RESPONSIVE" />


// Comportamiento por pantalla:
// 📱 Móvil: right: -35%, translate(50px, -50px)
// 📱 Tablet: right: -8vw, translate(10vw, -50px)  
// 💻 Desktop: right: -38%, translate(200px, -50px)


// Personalización avanzada responsive
<SplineBackground 
  preset="BACKGROUND"
  customPosition={{
    top: '-30%',  // Posición vertical optimizada
    right: 'clamp(-35%, -8vw, -38%)',  // Desplazamiento responsive
    transform: 'translate(clamp(50px, 10vw, 200px), -50px)'
  }}
/>

Ventajas del Sistema Unificado

  • Consistencia: Todos los estilos Spline siguen el mismo patrón
  • Mantenibilidad: Cambios centralizados en un solo archivo
  • Flexibilidad: Presets + overrides + customización
  • Responsive: Desplazamiento automático según el tamaño de pantalla
  • TypeScript: Tipado completo para todas las opciones
  • Reutilización: Un componente para todos los casos de uso
  • Documentación: Ejemplos claros y casos de uso comunes
Anterior: ImplementaciónSiguiente: Mejores Prácticas