VerticalThemeWipeToggle — Top/Bottom Reveal Animated Theme Switch
A modern React theme toggle button offering a visually dramatic full-page transition using the View Transitions API. Seamlessly reveal your dark or light mode with a vertical wipe animation that moves from either the top or bottom of the screen, creating a cinematic experience for users. No theme context or extra dependencies needed—this pure DOM implementation plugs into any Tailwind or Framer Motion app with ease.
Features:
Directional vertical animation: top→bottom or bottom→top with a simple prop
Hardware-accelerated, native-page transitions (View Transitions API)
Compatible with React, Tailwind CSS, and motion UI
No next-themes or global context required—just DOM and localStorage
Accessible, fast, and flicker-free
Easily extendable for line/diagonal/horizontal effects
Use Cases: Perfect for dashboards, admin panels, landing pages, or any web app wanting a premium-feeling, full-screen theme swap effect.
import { VerticalThemeWipeToggle } from "@/components/ui/vertical-theme-wipe-toggle";
export default function ThemeSwitchDemo() {
return (
<div className="flex flex-col gap-4 items-center">
<VerticalThemeWipeToggle direction="top" />
<span className="text-xs">Top → Bottom</span>
<VerticalThemeWipeToggle direction="bottom" />
<span className="text-xs">Bottom → Top</span>
</div>
);
}