He invertido la pirámide completamente. Ahora la punta está hacia abajo y la base hacia arriba. También invertí el gradiente para que el verde esté arriba y el rojo abajo, y ajusté la animación para que se llene desde arriba hacia abajo cuando entre en pantalla.

Voy a convertir la pirámide en 3D usando React Three Fiber y agregar la interacción con el mouse para que rote suavemente.

He convertido la pirámide en 3D usando React Three Fiber con un shader personalizado para el gradiente de verde a rojo. La pirámide se llena suavemente desde arriba cuando carga, rota automáticamente en el eje Y, y cuando pasas el mouse por encima se voltea suavemente 180 grados en el eje X. El gradiente mantiene los mismos colores (verde arriba, amarillo en medio, rojo abajo) y la escena ocupa toda la pantalla.