Retro Grid

An animated scrolling retro grid effect

Retro Grid

Edit on GitHub

Copy code

Show code

<script setup lang="ts">
import RetroGrid from "@/components/retro-grid/retro-grid.vue";
</script>

<template>
  <div class="grid place-items-center w-full min-h-screen">
    <div
      class="relative flex h-[400px] w-[200px] lg:w-[600px] flex-col items-center justify-center overflow-hidden rounded-lg border bg-background"
    >
      <span
        class="pointer-events-none z-10 whitespace-pre-wrap bg-gradient-to-b from-[#ffd319] via-[#ff2975] to-[#8c1eff] bg-clip-text text-center text-7xl font-bold leading-none tracking-tighter text-transparent"
      >
        Retro Grid
      </span>

      <RetroGrid />
    </div>
  </div>
</template>

Installation

Copy and paste the following code into your project

RetroGrid.vue

<script setup lang="ts">
import { cn } from "@/lib/utils";

const props = withDefaults(
  defineProps<{
    angle?: number;
    class?: string;
  }>(),
  {
    angle: 65,
  },
);
</script>

<template>
  <div
    :class="
      cn(
        'selection:pointer-events-none absolute size-full overflow-hidden opacity-50 [perspective:200px]',
        props.class,
      )
    "
    :style="{
      '--grid-angle': `${props.angle}deg`,
    }"
  >
    <div class="absolute inset-0 [transform:rotateX(var(--grid-angle))]">
      <div
        :class="
          cn(
            'animate-grid',

            '[background-repeat:repeat] [background-size:60px_60px] [height:300vh] [inset:0%_0px] [margin-left:-50%] [transform-origin:100%_0_0] [width:600vw]',

            '[background-image:linear-gradient(to_right,rgba(0,0,0,0.3)_1px,transparent_0),linear-gradient(to_bottom,rgba(0,0,0,0.3)_1px,transparent_0)]',

            'dark:[background-image:linear-gradient(to_right,rgba(255,255,255,0.2)_1px,transparent_0),linear-gradient(to_bottom,rgba(255,255,255,0.2)_1px,transparent_0)]',
          )
        "
      />
    </div>
    <div
      class="absolute inset-0 bg-gradient-to-t from-white to-transparent dark:from-black to-90%"
    />
  </div>
</template>

Props

Prop	Type	Description	Default
class	string	The class for the component	""
angle	number	The angle of the grid	65