Premium 3D Websites

I have designed a custom 3D hero section for Aeterna, focusing on a "Timeless Precision" signature where the internal gears of the watch face react to the scroll speed.

Luxury Watch Hero Direction

• Story: The flow of time visualized through material transformation.
• Signature: A floating 3D watch bezel that morphs into the brand's monogram during the final scroll act.
• Materials: Frosted glass (refraction: 0.9), brushed titanium, and high-luminance neon indicators.
• Palette: Deep midnight blue background (#0A0E14) with silver and sapphire accents.

// next-watch-hero.js
import { usePremium3D } from './lib/react.js';
import { materials, createStage, scrollTrack, ss } from './lib/core.js';
import { text3D } from './lib/text3d.js';

export default function Hero3D() {
  const canvasRef = useRef();

  usePremium3D(canvasRef, async (stage) => {
    // 1. Setup Studio Lighting for Metal/Glass
    stage.setEnvironment({ intensity: 1.2, blur: 0.1 });

    // 2. Create the Watch Bezel (Parametric Lathe)
    const metal = materials.metal({ color: "#C0C0C0", roughness: 0.2 });
    const crystal = materials.glass({ thickness: 0.5, ior: 1.5 });
    
    // 3. Scroll Orchestration
    const track = scrollTrack(document.body);
    
    stage.start((dt, t, real) => {
      const p = track.progress();
      // Animate rotation and refraction based on scroll progress
      bezel.rotation.y = ss(p, 0, 1) * Math.PI * 2;
      crystal.refractionRatio = ss(p, 0.8, 1);
    });
  }, { tier: "high" });

  return (
    <section className="relative h-[200vh]">
      <canvas ref={canvasRef} className="fixed inset-0 pointer-events-none" />
      <div className="relative z-10 flex items-center justify-center h-screen">
        <h1 className="text-white text-9xl font-serif">AETERNA</h1>
      </div>
    </section>
  );
}

Next steps

1. Run node tools/brand.mjs with your official logo to extract the exact sapphire blue hex code.
2. Provide the .woff2 font file for the "Aeterna" brand to generate the volume 3D text.
3. Run node tools/check.mjs --full to verify the metal reflections on mobile displays.