globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

.masked-text {
  background-image: url('/robot.jpg');
  -webkit-background-clip: text;
  color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Add this to your global styles */
@keyframes zoom-out {
  from { transform: scale(10); }
  to { transform: scale(1); }
}

.masked-text {
  background-image: url('/robot.jpg');
  -webkit-background-clip: text;
  color: transparent;
  animation: zoom-out 2s forwards;
}

Home.tsx

"use client"

import React from 'react';

const Home = () => {
  return (
    <div className="w-screen min-h-screen bg-black flex items-center justify-center relative overflow-hidden">
    <div className="absolute inset-0 z-10">
      {/* <img src="/robot.jpg" alt="Background" className="w-full h-full object-cover" /> */}
    </div>
    <div className="relative z-20 space-x-2">
      {['Z', 'A', 'A', 'V', 'G'].map((letter, index) => (
        <div key={index} className={`inline-block transform scale-${100-index*10}`} style={{ animationDelay: `${index * 0.2}s` }}>
          <h1 className="text-[300px] animate-zoom-out font-bold masked-text">{letter}</h1>
        </div>
      ))}
    </div>
  </div>
  
  );
};

export default Home;