Skip to content

Instantly share code, notes, and snippets.

@zenkodr

zenkodr/Home.tsx

Forked from Mif2006/Home.tsx
Created August 8, 2025 22:51
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save zenkodr/19ddcf395bdc9dde90a742c60f25e1d5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save zenkodr/19ddcf395bdc9dde90a742c60f25e1d5 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @Mif2006 Mif2006 created this gist Aug 20, 2024.
    23 changes: 23 additions & 0 deletions Home.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    "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;
    29 changes: 29 additions & 0 deletions globals.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    @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;
    }