Three.js Parallax
Receta Three.js para tarjetas de paralaje 2.5D de PNG en capas con deriva de ratón + desplazamiento.
Probado · Funciona
Qué hace
Proporciona código Three.js paso a paso para apilar PNG transparentes en planos con paralaje controlado por el ratón y deriva controlada por el desplazamiento, incluida la corrección del espacio de color sRGB y la configuración de orden de profundidad/renderizado que evitan errores comunes de z-fighting y texturas lavadas. Se activa cuando una tarjeta de proyecto o un contenedor multimedia necesita un efecto de paralaje, 2.5D o profundidad de imagen en capas.
Informe de la prueba
Se construyó la misma tarjeta de prueba de 3 capas de dos maneras y se sirvieron ambas a través de un servidor http local: la línea base ingenua apiló todas las capas en el centro sin corrección de colorSpace, mientras que la versión guiada por el skill, siguiendo su propio ejemplo trabajado verbatim, extendió las capas a la composición diagonal documentada con orden de renderizado correcto y cero errores de consola.
Probado el: 2026-07-16 · Claude Code 2.x (agent harness)
Instalación
git clone https://github.com/JudyZZ/threejs-parallax-skill.git mkdir -p ~/.claude/skills cp -r threejs-parallax-skill/threejs-parallax ~/.claude/skills/threejs-parallax
Comandos y prompts de ejemplo
/threejs-parallaxReceta Three.js para tarjetas de paralaje 2.5D de PNG en capas con deriva de ratón + desplazamiento.
Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):
Build a parallax card effect with layered PNGs that drift on scrollHow do I stack transparent images in Three.js for a mouse parallax?My Three.js layers look washed out, fix the colorSpace and z-fighting