Tidal Text Animation

The Tidal Text component is an interactive component where hovering over a team members image reveals their name rising from the bottom, mimicking a wave motion. In the default state, the team name is displayed.

The Beatles

John Lennon

McCartney

Harrison

Ringo Starr

Usage

Follow the steps below to add the Tidal Text Animation Component to your project.

Add the import statement for the component

import { TidalTextAnimation } from "@/components/elixir-ui/tidal-text-animation";

Add the team members props to the component

const teamMembers = [
  { name: 'John Lennon', url: '/components/john-lennon.jpg' },
  { name: 'McCartney', url: '/components/paul-mccartney.jpg' },
  { name: 'Harrison', url: '/components/george-harrison.jpg' },
  { name: 'Ringo Starr', url: '/components/ringo-starr.jpg' },
]

Import the component in your project and use it

<div className="flex h-full w-full items-center justify-center">
  <TidalTextAnimation defaultText="The Beatles" teamMembers={teamMembers} />
</div>

Props

Prop	Type	Default	Description
defaultText	string	-	The text to be displayed
teamMembers	string	-	The team members to be displayed
className	string	-	Additional CSS classes