1. Components
  2. /
  3. Grid Reveal

Grid Reveal

An animated React grid reveal component built with high-performance Motion physics, responsive layouts, and modern design tokens.

Installation

npx viora-ui@latest add grid-reveal

File Structure

grid-reveal.tsx
utils.ts

Usage

import { GridReveal } from "@/components/viora-ui/grid-reveal";

export default function Example() {
  return (
    <GridReveal />
  );
}

API Reference

GridReveal

PropTypeDefaultDescription
className?string-Additional CSS classes for custom styling.
children?React.ReactNode-Content or child components rendered inside.
disabled?booleanfalseDisables user interaction and animations.

Notes

  • Engineered with spring physics via Motion for high-fidelity 60fps micro-interactions.
  • Zero runtime layout shift with hardware-accelerated CSS transforms and composited layers.
  • Supports modern accessibility patterns including focus-visible rings and reduced-motion preferences.
  • Compatible with both dark and light modes using standard Tailwind CSS theme variables.

Credits

Crafted with Tailwind CSS and Motion for Viora UI.

Keep in mind

Most components in Viora UI are inspired by or recreated from innovative modern interfaces across the web. We build to experiment and push design craft forward.