Carrusel de cuboides
Cuboides biselados y redondeados que transportan contenido de tarjetas vuelan desde la derecha como un grupo rígido, navegan con un desfase de rotación por cuboide, deceleran hasta una pausa destacada (hero hold), y luego salen por la izquierda. El espaciado se deriva de las dimensiones del cuboide y la mitad del alcance máximo en X alcanzable, por lo que los cuboides nunca se superponen. Cuarenta variables heredan el esquema original de DialKit: geometría, materiales, luces, sombras, fondo, cámara y cada duración y easing de segmento. Las tarjetas provienen de la lista integrada o de una variable JSON.
ID de composición: cuboid-carousel. Duración 6.666666666666667 s a 30 fps, 1920×1080.
Archivos
cuboid-carousel.html(38 KB)assets/Three-LICENSE.txt(1 KB)assets/addons/environments/RoomEnvironment.js(5 KB)assets/addons/utils/BufferGeometryUtils.js(36 KB)assets/cuboid-motion.js(593 KB)assets/gsap-3.14.2.min.js(128 KB)assets/GSAP-NOTICE.txt(1 KB)assets/three.core.min.js(554 KB)assets/three.module.min.js(468 KB)
Instalación
Instala con npx hyperframes add cuboid-carousel; por defecto los archivos anteriores se guardan en compositions/cuboid-carousel/. Luego monta el bloque desde el index.html anfitrión:
<div
data-composition-id="cuboid-carousel"
data-composition-src="compositions/cuboid-carousel/cuboid-carousel.html"
data-start="0"
data-duration="6.666666666666667"
data-track-index="1"
data-width="1920"
data-height="1080"
></div>
Renderiza con valores personalizados apuntando directamente al archivo de composición:
npx --yes [email protected] render 'compositions/cuboid-carousel/cuboid-carousel.html' --variables '{"cardsJson":"","heroCard":4}'
Variables
Se leen en tiempo de ejecución mediante window.__hyperframes.getVariables(); se declaran en la raíz de la composición como data-composition-variables (atributo entre comillas simples, JSON plano).
| id | tipo | predeterminado | etiqueta / rango |
|---|---|---|---|
cardsJson | cadena | "" | Contenido · JSON de tarjetas (opcional, ver CARDS en la fuente) |
heroCard | número | 4 | Contenido · Tarjeta destacada (basada en 1) 1–12 paso 1 |
count | número | 8 | Contenido · Número de tarjetas repetidas 1–12 paso 1 |
gap | número | 0.01 | Diseño · Espacio extra entre cuboides 0–1.5 paso 0.005 |
cuboidWidth | número | 1.7 | Cuboide · Ancho 0.3–5 paso 0.01 |
cuboidHeight | número | 2.4 | Cuboide · Alto 0.3–6 paso 0.01 |
cuboidDepth | número | 0.14 | Cuboide · Grosor (profundidad) 0.02–2 paso 0.01 |
cornerRadius | número | 0.105 | Cuboide · Radio de esquina 0–0.6 paso 0.005 |
bevelSize | número | 0.03 | Cuboide · Tamaño del bisel (chaflán de borde) 0–0.3 paso 0.001 |
bevelThickness | número | 0.04 | Cuboide · Grosor del bisel 0–0.3 paso 0.001 |
smoothness | número | 32 | Cuboide · Suavizado (segmentos) 1–32 paso 1 |
bodyColor | color | "#242424" | Cuboide · Color del cuerpo |
roughness | número | 0.6 | Cuboide · Rugosidad 0–1 paso 0.01 |
metalness | número | 0.4 | Cuboide · Metalicidad 0–1 paso 0.01 |
heroScale | número | 1 | Destacado · Escala aislada 1–1.6 paso 0.01 |
heroFillIntensity | número | 0.55 | Destacado · Intensidad de luz frontal 0–2 paso 0.05 |
heroExitX | número | 288 | Destacado · Rotación X de salida grados -720–720 paso 1 |
heroExitY | número | -234 | Destacado · Rotación Y de salida grados -720–720 paso 1 |
heroExitZ | número | 198 | Destacado · Rotación Z de salida grados -720–720 paso 1 |
ambientIntensity | número | 0.35 | Luces · Intensidad ambiental 0–4 paso 0.01 |
ambientColor | color | "#ffffff" | Luces · Color ambiental |
topIntensity | número | 3.1 | Luces · Intensidad del rig superior 0–12 paso 0.05 |
topColor | color | "#ffffff" | Luces · Color del rig superior |
bottomIntensity | número | 2.15 | Luces · Intensidad del rig inferior 0–12 paso 0.05 |
bottomColor | color | "#ffcaad" | Luces · Color del rig inferior |
keyIntensity | número | 5 | Luces · Intensidad del rig principal 0–12 paso 0.05 |
keyColor | color | "#ffe9d6" | Luces · Color del rig principal |
shadowRadius | número | 44.5 | Sombras · Suavizado en tamaño de mapa 2048 0–50 paso 0.5 |
shadowMapSize | número | 2048 | Sombras · Tamaño del mapa 512–4096 paso 256 |
backdrop | color | "#0b0d13" | Fondo · Color |
cameraFov | número | 11 | Cámara · Campo de visión inicial 10–90 paso 0.5 |
cameraX | número | -1.65 | Cámara · X inicial -20–20 paso 0.05 |
cameraY | número | 8.5 | Cámara · Y inicial -20–20 paso 0.05 |
cameraZ | número | -8.508708 | Cámara · Z inicial (distancia) -20–50 paso 0.1 |
cameraSettleFrame | número | 70 | Cámara · Fotograma de estabilización (30 fps) 20–90 paso 1 |
handheldStrength | número | 1 | Cámara · Intensidad de sujeción manual 0–1 paso 0.05 |
cameraTargetFov | número | 34 | Destino de cámara · Campo de visión 10–90 paso 0.5 |
cameraTargetX | número | -7.25 | Destino de cámara · X -20–20 paso 0.05 |
cameraTargetY | número | 1.15 | Destino de cámara · Y -20–20 paso 0.05 |
cameraTargetZ | número | 6.2 | Destino de cámara · Z 2–50 paso 0.1 |
Contrato de tiempo de ejecución
- Una línea de tiempo de GSAP pausada registrada como
window.__timelines["cuboid-carousel"]. - Se resincroniza con el evento personalizado
hf-seek; cada fotograma es una función de forma cerrada del tiempo (solo PRNG con semilla, sin bucles rAF, sin Date.now). - Renderizador: WebGL, GSAP, Canvas 2D, PMREM, Mapas de sombra. Presupuesto aproximado de 350 MB por instancia activa; ejecutar una a la vez.
- Dependencias externas de tiempo de ejecución:
./assets/three.module.min.js,./assets/addons/. - Fuentes web de Google Fonts: Inter.
Reglas de edición (del proyecto fuente)
- Mantener
data-composition-variablescomo un atributo entre comillas simples con JSON plano". Nunca guardarlo a través del panel de diseño de Studio. - No colocar
<canvas>en el marcado estático; crearlo en tiempo de ejecución. - Mantener cada estado visual como una función de t; la seguridad de búsqueda (seek-safety) es lo que hace que el bloque sea renderizable.