Secuencia de Cámara Orbital Frost
Una secuencia de hielo completa de 22.5 segundos: logotipo, primer texto, segundo texto, ruptura y desvanecimiento. La cámara orbita los objetos fijos con pases frontales más lentos para facilitar la lectura. El mismo campo de partículas transporta cada transición. Personaliza los dos momentos de texto y el logotipo SVG; la fuente incluye tiempos de cámara y ensamblaje editables.
ID de composición: frost-sequence-rig. Duración 22.5 s a 30 fps, 1920×1080.
Archivos
frost-sequence-camera-orbit.html(131 KB)assets/example-logo.svg(1 KB)assets/fonts/Geist-Bold.ttf(65 KB)assets/fonts/Geist-OFL.txt(4 KB)assets/fonts/Geist-Regular.ttf(65 KB)assets/fonts/Geist-SemiBold.ttf(65 KB)assets/frost.js(1.5 MB)assets/Three-LICENSE.txt(1 KB)assets/ThreeMeshBVH-LICENSE.txt(1 KB)assets/OpentypeJS-LICENSE.txt(1 KB)assets/Clipper-LICENSE.txt(3 KB)assets/gsap-3.14.2.min.js(128 KB)assets/GSAP-NOTICE.txt(1 KB)assets/logo.svg(1 KB)assets/shards-atlas.png(obtenido del CDN en la instalación)assets/test-mark.svg(1 KB)assets/textures/bluenoise64.png(12 KB)assets/textures/ice-inclusions-generated.png(obtenido del CDN en la instalación)
Instalación
Instala con npx hyperframes add frost-sequence-camera-orbit; por defecto, los archivos anteriores se colocan en compositions/frost-sequence-camera-orbit/. Luego monta el bloque desde el index.html del anfitrión:
<div
data-composition-id="frost-sequence-rig"
data-composition-src="compositions/frost-sequence-camera-orbit/frost-sequence-camera-orbit.html"
data-start="0"
data-duration="22.5"
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/frost-sequence-camera-orbit/frost-sequence-camera-orbit.html' --variables '{"headline1":"Duro de|romper.","headline2":"Fácil de|recordar."}'
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 |
|---|---|---|---|
headline1 | string | `"Duro de | romper."` |
headline2 | string | `"Fácil de | recordar."` |
logoUrl | string | "assets/logo.svg" | Ruta del asset SVG del logotipo (sube en Assets, luego pega la ruta) máx. 200 caracteres |
assemblyMode | enum | "híbrido" | Respuesta de ensamblaje (física |
materialBaseColor | color | "#ffffff" | Color base |
baseRoughness | number | 0.31 | Rugosidad base 0–0.5 paso 0.005 |
materialTransmission | boolean | true | Transmisión |
materialBacklight | number | 0.27 | Retroiluminación a través del hielo 0–2 paso 0.01 |
ior | number | 1.675 | Índice de refracción 1–2 paso 0.005 |
thicknessScale | number | 2.04 | Escala de grosor 0.1–3 paso 0.01 |
materialAbsorption | boolean | true | Absorción / tinte |
attenuationColor | color | "#d5f4ff" | Color de atenuación (blanco = sin absorción, vidrio claro) |
attenuationDistance | number | 6.54 | Distancia de atenuación 0.05–12 paso 0.01 |
materialDispersion | boolean | false | Dispersión |
dispersion | number | 0.12 | Dispersión (0 = desactivado; activar/desactivar recarga) 0–0.3 paso 0.005 |
materialReflections | boolean | true | Reflexiones |
envIntensity | number | 2.04 | Intensidad del entorno 0–3 paso 0.01 |
specularIntensity | number | 1.44 | Intensidad especular 0–2 paso 0.01 |
materialFrost | boolean | true | Escarcha |
materialInteriorFrost | number | 0 | Escarcha uniforme 0–1 paso 0.01 |
frostScale | number | 0.7 | Escala 0.2–6 paso 0.05 |
frostThreshold | number | 0.62 | Umbral (1 = sin escarcha, vidrio claro) 0–1 paso 0.01 |
frostSoftness | number | 0.24 | Suavidad 0.01–1 paso 0.01 |
frostRoughness | number | 0.73 | Rugosidad 0–1 paso 0.01 |
frostDiffuse | number | 0.11 | Difuso (cuánta luz captan las áreas escarchadas) 0–1 paso 0.01 |
materialSurfaceBumps | boolean | false | Protuberancias superficiales / muescas de grietas |
materialCrystals | boolean | true | Protuberancias de cristal |
crystalBump | number | 0.01 | Protuberancia de cristal 0–1 paso 0.01 |
crystalScale | number | 4 | Escala de cristal 4–80 paso 1 |
materialGrain | boolean | true | Protuberancias de grano |
materialGrainAmount | number | 0.47 | Fuerza del grano 0–2 paso 0.01 |
materialGrainScale | number | 150 | Escala del grano 1–150 paso 1 |
materialCutNormals | boolean | true | Normales de fractura |
materialMicro | boolean | true | Micro protuberancias |
microBump | number | 0.445 | Micro protuberancia 0–1 paso 0.005 |
microScale | number | 10 | Micro escala 10–200 paso 1 |
microCoverage | number | 0.25 | Micro cobertura 0–1 paso 0.01 |
bumpMaskScale | number | 1.45 | Escala de máscara 0.1–6 paso 0.05 |
materialRipples | boolean | true | Ondulaciones |
rippleBump | number | 0.22 | Protuberancia de ondulación 0–1 paso 0.01 |
rippleScale | number | 23 | Escala de ondulación 2–30 paso 0.5 |
materialSmudges | boolean | true | Manchas |
smudgeAmount | number | 0.78 | Cantidad 0–1 paso 0.01 |
smudgeCoverage | number | 0.58 | Cobertura 0–1 paso 0.01 |
smudgeMaskScale | number | 1.85 | Escala de máscara 0.1–6 paso 0.05 |
smudgeAnisotropy | number | 16.5 | Anisotropía 1–20 paso 0.5 |
smudgeRoughness | number | 0.75 | Rugosidad 0–1 paso 0.01 |
smudgeWhiteness | number | 0.035 | Blancura 0–0.5 paso 0.005 |
smudgeScale | number | 1.3 | Escala 0.5–10 paso 0.1 |
materialCracks | boolean | true | Grietas |
crackLargeScale | number | 2.45 | Escala grande 0.3–8 paso 0.05 |
crackWarp | number | 0.22 | Deformación 0–1.5 paso 0.01 |
crackCoverage | number | 0.19 | Cobertura 0–1 paso 0.01 |
crackRegionScale | number | 1.8 | Escala de región 0.1–4 paso 0.05 |
crackRegionCoverage | number | 0.6 | Cobertura de región 0–1 paso 0.01 |
veinScale | number | 8 | Escala de vena 1–20 paso 0.25 |
veinContrast | number | 0.55 | Contraste de vena 0–1 paso 0.01 |
crackWidth | number | 0.0025 | Ancho 0.0005–0.02 paso 0.0005 |
crackBrightness | number | 0.65 | Brillo 0–3 paso 0.01 |
crackDarkness | number | 0.69 | Oscuridad 0–1 paso 0.01 |
crackRefraction | number | 0.076 | Refracción 0–0.1 paso 0.001 |
crackSurfaceStrength | number | 0.16 | Fuerza superficial 0–1 paso 0.01 |
fineScale | number | 18.4 | Escala fina 2–20 paso 0.1 |
fineAmount | number | 0.52 | Cantidad fina 0–1 paso 0.01 |
fineCoverage | number | 1 | Cobertura fina 0–1 paso 0.01 |
materialScatter | boolean | true | Dispersión interna |
materialInclusionScale | number | 0.05 | Escala de inclusión 0.05–3 paso 0.01 |
materialInclusionAmount | number | 2 | Inclusions fotográficas 0–2 paso 0.01 |
interiorScatter | number | 0.09 | Dispersión interior 0–1 paso 0.01 |
materialClearcoat | boolean | true | Barniz transparente |
clearcoat | number | 0 | Barniz transparente 0–1 paso 0.01 |
clearcoatRoughness | number | 0.06 | Rugosidad del barniz 0–1 paso 0.01 |
materialShards | boolean | true | Fragmentos |
shardsAtlas | string | "assets/shards-atlas.png" | Ruta del atlas de fragmentos (sube en Assets, luego pega la ruta) máx. 200 caracteres |
shardCount | number | 750 | Cantidad de fragmentos 20–2000 paso 10 |
shardScale | number | 2.3 | Escala de fragmentos 0.3–6 paso 0.1 |
shardOpacity | number | 0.12 | Opacidad de fragmentos 0–1 paso 0.01 |
shardSpeed | number | 0.8 | Velocidad de fragmentos 0.1–3 paso 0.1 |
shardTurbulence | number | 0.47 | Turbulencia de fragmentos 0–1 paso 0.01 |
shardRotation | number | 0.43 | Rotación de fragmentos 0–2 paso 0.01 |
shardLighting | number | 0.81 | Iluminación de fragmentos 0–2 paso 0.01 |
shardEmit | number | 0 | Emisión de fragmentos 0–2 paso 0.01 |
shardMatte | number | 0.34 | Mate de fragmentos 0–1 paso 0.01 |
particleField | boolean | true | Campo de partículas |
particleCount | number | 0 | Recuento de partículas (0 = automático según delta entre logotipo y texto) 0–800 paso 10 |
particleScale | number | 0.8 | Escala de partículas 0.1–2 paso 0.05 |
particleSpeed | number | 0.23 | Velocidad de partículas 0.01–1 paso 0.01 |
particleOpacity | number | 0.15 | Opacidad de partículas 0–1 paso 0.01 |
particleLife | number | 2.83 | Vida de partículas 0.5–5 paso 0.05 |
particleSpread | number | 1.13 | Propagación de partículas 0.1–3 paso 0.05 |
particleColor1 | color | "#d5f4ff" | Color 1 de partículas |
particleColor2 | color | "#ffffff" | Color 2 de partículas |
particleColor3 | color | "#b8e1ff" | Color 3 de partículas |
particleGlow | number | 0.12 | Resplandor de partículas 0–1 paso 0.01 |
environment | enum | "estudio" | Entorno HDR (estudio |
environmentRotation | number | 0.3 | Rotación del entorno 0–1 paso 0.01 |
environmentExposure | number | 4.2 | Exposición del entorno 0.5–10 paso 0.1 |
cameraOrbit | number | 0.7 | Órbita de cámara – rotación Y (globo ocular) 0–1 paso 0.005 |
cameraHeight | number | 0 | Altura de cámara – elevación en Y 0–1 paso 0.01 |
cameraDistance | number | 7 | Distancia de cámara desde el centro de la escena 1–20 paso 0.1 |
cameraFov | number | 15 | Campo de visión de cámara 5–30 paso 0.5 |
cameraDamping | number | 0.18 | Amortiguación de cámara (orbitar con facilidad) 0–1 paso 0.01 |
cameraKeyPositions | string | "5.6,7.1,15.9,20" | Posiciones clave de cámara en segundos (separadas por comas) máx. 200 caracteres |
cameraKeyOrbit | string | "0,0.4,1,0" | Valores clave de órbita en cada posición (separados por comas) máx. 200 caracteres |
cameraKeyHeight | string | "0,0.3,0,0" | Valores clave de altura en cada posición (separados por comas) máx. 200 caracteres |
cameraKeyDistance | string | "6.3,7,6,8.2" | Valores clave de distancia en cada posición (separados por comas) máx. 200 caracteres |
cameraKeyFov | string | "15,15,15,15" | Valores clave de FOV en cada posición (separados por comas) máx. 200 caracteres |
cameraKeyEase | string | "power2.inOut,elastic.inOut,power3.in" | Tipos de easing para cada transición (separados por comas) máx. 200 caracteres |
textDepth | number | 0.18 | Profundidad del texto 0.05–0.5 paso 0.01 |
textBevel | number | 0.025 | Bisel del texto 0–0.1 paso 0.005 |
textAlign | enum | "centro" | Alineación del texto (izquierda |
textSpacing | number | 0.13 | Espaciado del texto – tracking 0–0.5 paso 0.01 |
textLeading | number | 0.19 | Interlineado del texto – leading –0.1–0.5 paso 0.01 |
textBreakAnim | number | 0.2 | Animación de salto de línea – altura del morfing 0–1 paso 0.01 |
textReveal | number | 0.5 | Revelado del texto 0–1 paso 0.01 |
textSlideIn | number | 0.28 | Deslizamiento de entrada del texto 0–1 paso 0.01 |
textSlideOut | number | 0.17 | Deslizamiento de salida del texto 0–1 paso 0.01 |
textScaleIn | number | 0.32 | Escalado de entrada del texto 0–1 paso 0.01 |
textScaleOut | number | 0.13 | Escalado de salida del texto 0–1 paso 0.01 |
textFadeIn | number | 0.2 | Fundido de entrada del texto 0–1 paso 0.01 |
textFadeOut | number | 0.12 | Fundido de salida del texto 0–1 paso 0.01 |
typefaceRegular | string | "Geist-Regular" | Tipo de letra regular (nombre del archivo de fuente en assets/fonts/) máx. 60 caracteres |
typefaceBold | string | "Geist-Bold" | Tipo de letra negrita (nombre del archivo de fuente en assets/fonts/) máx. 60 caracteres |
typefaceSemibold | string | "Geist-SemiBold" | Tipo de letra seminegrita (nombre del archivo de fuente en assets/fonts/) máx. 60 caracteres |
logoScale | number | 1.96 | Escala del logotipo 0.1–4 paso 0.01 |
logoDepth | number | 0.2 | Profundidad del logotipo 0.01–0.5 paso 0.01 |
logoBevel | number | 0.012 | Bisel del logotipo 0–0.1 paso 0.001 |
logoSegments | number | 6 | Segmentos del logotipo 1–20 paso 1 |
logoRounded | boolean | true | Logotipo redondeado |
logoRoundedDetail | number | 4 | Detalle redondeado del logotipo 1–10 paso 1 |
logoExtrudeBevel | enum | "suave" | Tipo de bisel de extrusión del logotipo (ninguno |
logoColor | color | "#d5f4ff" | Color del logotipo |
logoOpacity | number | 0.88 | Opacidad del logotipo 0–1 paso 0.01 |
logoScaleIn | number | 0.3 | Escalado de entrada del logotipo 0–1 paso 0.01 |
logoShatter | number | 0.37 | Fragmentación del logotipo 0–1 paso 0.01 |
logoShatterDir | number | 0.74 | Dirección de fragmentación del logotipo 0–1 paso 0.01 |
logoExplode | number | 0.2 | Explosión del logotipo 0–1 paso 0.01 |
logoShatterSpeed | number | 0.18 | Velocidad de fragmentación del logotipo 0–1 paso 0.01 |
logoShatterEnd | number | 0.47 | Fin de fragmentación del logotipo 0–1 paso 0.01 |
logoWobble | number | 0.22 | Bamboleo del logotipo 0–1 paso 0.01 |
logoWobbleFreq | number | 0.8 | Frecuencia de bamboleo del logotipo 0–2 paso 0.05 |
logoRotate | number | 0 | Rotación del logotipo – grados 0–360 paso 1 |
logoRotateX | number | 0 | Rotación X del logotipo – grados –30–30 paso 1 |
logoRotateY | number | 0 | Rotación Y del logotipo – grados –30–30 paso 1 |
textEntryHold | number | 1.08 | Retención de entrada de texto 0–3 paso 0.01 |
textExitHold | number | 0 | Retención de salida de texto 0–3 paso 0.01 |
textPause | number | 1.08 | Pausa de texto entre primer y segundo texto 0–3 paso 0.01 |
textFadeHold | number | 0.08 | Retención de fundido de texto 0–3 paso 0.01 |
logoEntryHold | number | 0 | Retención de entrada del logotipo 0–3 paso 0.01 |
logoPause | number | 1.74 | Pausa del logotipo antes de la fragmentación 0–3 paso 0.01 |
assemblyTime | number | 0.76 | Tiempo de ensamblaje para la ruptura 0.2–3 paso 0.01 |
assemblyDelay | number | 0.08 | Retardo de ensamblaje entre fragmentos 0–0.5 paso 0.01 |
fractureComplexity | number | 0.8 | Complejidad de fractura 0–2 paso 0.01 |
fractureTurbulence | number | 0.35 | Turbulencia de fractura 0–1 paso 0.01 |
fractureDistance | number | 0.64 | Distancia de fractura 0–3 paso 0.01 |
fractureScale | number | 0.86 | Escala de fractura 0.1–2 paso 0.01 |
fractureRotation | number | 90 | Rotación de fractura – grados 0–360 paso 1 |
fractureAlign | number | 0.15 | Alineación de fractura 0–1 paso 0.01 |
fractureRandomness | number | 0.35 | Aleatoriedad de fractura 0–1 paso 0.01 |
fractureGaps | number | 0.19 | Huecos de fractura 0–1 paso 0.01 |
fractureGapSize | number | 0.72 | Tamaño de hueco de fractura 0–1 paso 0.01 |
fractureGapDistance | number | 0.33 | Distancia de hueco de fractura 0–2 paso 0.01 |
fractureEdges | number | 0.64 | Bordes de fractura 0–1 paso 0.01 |
fractureEdgeWidth | number | 0.07 | Ancho de borde de fractura 0–1 paso 0.01 |
fractureEdgeStrength | number | 0.48 | Fuerza de borde de fractura 0–1 paso 0.01 |
fractureEdgeColor | color | "#ffffff" | Color de borde de fractura |
fractureEdgeOpacity | number | 0.35 | Opacidad de borde de fractura 0–1 paso 0.01 |
fractureEdgeGlow | number | 0.11 | Resplandor de borde de fractura 0–1 paso 0.01 |
breakSound | boolean | true | Sonido de ruptura |
soundVolume | number | 0.42 | Volumen del sonido 0–1 paso 0.01 |
soundPitch | number | 0.91 | Tono del sonido 0–2 paso 0.01 |
soundDelay | number | 0.13 | Retardo del sonido 0–1 paso 0.01 |
soundReverb | number | 0.58 | Reverberación del sonido 0–1 paso 0.01 |
soundThrottle | number | 0.07 | Estrangulamiento del sonido 0–1 paso 0.01 |
soundStart | number | 0.05 | Inicio del sonido 0–1 paso 0.01 |
soundEnd | number | 0.95 | Fin del sonido 0–1 paso 0.01 |
soundFadeIn | number | 0.04 | Fundido de entrada del sonido 0–1 paso 0.01 |
soundFadeOut | number | 0.11 | Fundido de salida del sonido 0–1 paso 0.01 |
soundLoop | boolean | false | Bucle de sonido |
soundLoopStart | number | 0 | Inicio del bucle de sonido 0–1 paso 0.01 |
soundLoopEnd | number | 1 | Fin del bucle de sonido 0–1 paso 0.01 |
soundLoopCrossfade | number | 0.27 | Fundido cruzado del bucle de sonido 0–1 paso 0.01 |
soundLoopCount | number | 0 | Recuento de bucles de sonido (0 = infinito) 0–10 paso 1 |
soundRandom | number | 0 | Aleatoriedad del sonido 0–1 paso 0.01 |
soundRandomSeed | number | 0 | Semilla aleatoria del sonido 0–1 paso 0.01 |
soundRandomVolume | number | 0 | Volumen aleatorio del sonido 0–1 paso 0.01 |
soundRandomPitch | number | 0 | Tono aleatorio del sonido 0–1 paso 0.01 |
soundRandomDelay | number | 0 | Retardo aleatorio del sonido 0–1 paso 0.01 |
soundRandomReverb | number | 0 | Reverberación aleatoria del sonido 0–1 paso 0.01 |
soundRandomThrottle | number | 0 | Estrangulamiento aleatorio del sonido 0–1 paso 0.01 |
soundRandomStart | number | 0 | Inicio aleatorio del sonido 0–1 paso 0.01 |
soundRandomEnd | number | 0 | Fin aleatorio del sonido 0–1 paso 0.01 |
soundRandomFadeIn | number | 0 | Fundido de entrada aleatorio del sonido 0–1 paso 0.01 |
soundRandomFadeOut | number | 0 | Fundido de salida aleatorio del sonido 0–1 paso 0.01 |
soundRandomLoop | number | 0 | Bucle aleatorio del sonido 0–1 paso 0.01 |
soundRandomLoopStart | number | 0 | Inicio de bucle aleatorio del sonido 0–1 paso 0.01 |
soundRandomLoopEnd | number | 0 | Fin de bucle aleatorio del sonido 0–1 paso 0.01 |
soundRandomLoopCrossfade | number | 0 | Fundido cruzado de bucle aleatorio del sonido 0–1 paso 0.01 |
soundRandomLoopCount | number | 0 | Recuento de bucle aleatorio del sonido 0–10 paso 1 |
Licencia
Consulte los archivos LICENSE o NOTICE correspondientes para cada biblioteca de terceros en el directorio assets/. La composición en sí y sus archivos de origen (.html, .js, .svg) se proporcionan bajo los términos de la licencia del repositorio hyperframes-registry.