Louis Studios

Wave Type

Text 3

About

Rows of repeated type that slide, track and stretch into living waves, hourglasses and diamonds, cutting between flat two colour palettes like a motion poster.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Wave Type to your project and fits it to your theme.

Code

How Wave Type is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import * as React from "react"
import { WaveType } from "@/components/ui/wave-type"

export default function WaveTypeDemo() {
  return (
    <div className="relative h-screen min-h-[560px] w-full">
      <WaveType className="h-full w-full" />
    </div>
  )
}

More by Louis Studios

View all
  • Melt Mark

    Melt Mark

    14
  • Dot Tiles

    Dot Tiles

    12
  • Lens Clock

    Lens Clock

    4
  • Brick Digits

    Brick Digits

    3
  • Peak Chart

    Peak Chart

    1
  • Effort Slider

    Effort Slider

    1
  • Neon Pulse

    Neon Pulse

  • Chrome Arcs

    Chrome Arcs

More in Text

View all
  • NeonRGBTextEffect

    NeonRGBTextEffect

    152
  • Vertical Cut Reveal Characters

    Vertical Cut Reveal Characters

    124
  • Apple Hello Effect

    Apple Hello Effect

    638
  • Text Reveal

    Text Reveal

    343
  • Blur Reveal

    Blur Reveal

    326
  • Text Loop

    Text Loop

    332
  • Aero Hero-3

    Aero Hero-3

    591
  • Shine Border

    Shine Border

    980