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/retroGrid/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