Hero Slider

An immersive carousel component featuring high-performance animations, auto-play, and glassmorphic content overlays.

Preview & Interactive Laboratory

Experience the fusion of mathematics and art in high definition.

Fade Transition

Experience the fusion of mathematics and art in high definition.

Zoom Transition

A journey through the deepest shades of our signature palette.

Elevate your UI with frosted glass overlays and dynamic blurring.

Framer Motion

Utilizes hardware-accelerated animations for smooth transitions.

Auto-play

Smart interval management with pause-on-hover capabilities.

Responsive

Adaptive height and content scaling across all device types.

import { HeroSlider } from "@/components/ui/hero-slider"

<HeroSlider 
  slides={slides} 
  transitionType="zoom" 
  autoPlay 
/>

React / Tailwind

Slider Wrapper

Main viewport container.

className={`className`}

Transitions

Switch between animation styles.

className={`transitionType='slide'|'fade'|'zoom'`}

Content Overlay

Control text visibility and glass effects.

className={`glassOverlay: true`}

Prop	Type	Default	Description
slides	Slide[]	-	Array of content for each slide.
transitionType	'slide' \| 'fade' \| 'zoom'	'slide'	The animation used to switch slides.
autoPlay	boolean	false	Enable automated slide progression.
interval	number	5000	Time between transitions in ms.