kokonutui

Search bar with debounced input, shortcut hints, and an animated action suggestions dropdown, built with React, Motion, and Tailwind CSS.

AI search chat input with toggleable web search mode, file attachment and auto-resizing textarea. Built with React, Tailwind CSS and Motion.

Animated AI chat input with model selection dropdown, file attachment and auto-resizing textarea. Built with React, Tailwind CSS and Motion.

Animated AI loading state cycling task statuses through a scrolling code-style log with an SVG progress spinner. Built with React and Tailwind CSS.

Animated AI thinking indicator that cycles status messages with a shimmering gradient text effect. Built with React, Tailwind CSS and Motion.

AI voice input button with recording timer, pulsing waveform bars and listening state. Built with React and animated Tailwind CSS styles.

Animated activity rings card inspired by the Apple Fitness app, with progress circles built in React using Tailwind CSS and Motion animations.

Animated avatar picker with SVG avatar options, colored selection ring and username input. Built with React, Tailwind CSS and Motion.

Animated background of flowing SVG line paths drawn across the hero section. Built with React, Tailwind CSS and Motion path animations.

Animated background of drifting light beams rendered on an HTML canvas with configurable intensity. Built with React, Tailwind CSS and Motion.

Responsive bento grid of feature cards with animated charts, counters and timelines, built with React, Tailwind CSS and Motion animations.

Interactive card that flips in 3D on hover to reveal features and a call to action, built with React and Tailwind CSS transforms and transitions.

Horizontally scrolling card carousel with ratings, badges and arrow navigation, built with React, Tailwind CSS and shadcn/ui primitives.

Keyboard shortcut button with a Command icon, hover shimmer sweep, and smooth CSS transitions, built with React and Tailwind CSS.

Multi-step currency exchange card with animated progress and SVG checkmark confirmation, built with React, Tailwind CSS and Motion animations.

Animated text switcher that cycles through greetings in multiple languages, built with React, Tailwind CSS and Motion enter and exit transitions.

Drag and drop file upload with animated progress, file validation and error states. Built with React, Tailwind CSS and Motion animations.

Canvas particle flow field background with noise-driven streams of glowing light, color themes and density options. Built with React and Motion.

Customizable glitch text effect with adjustable intensity, colors and sizes, animated in React with Motion and styled with Tailwind CSS.

Layered gradient button with emerald, purple, and orange variants, soft inner glow, and hover overlay, styled entirely with Tailwind CSS in React.

Press-and-hold confirmation button with an animated progress fill, configurable hold duration, and color variants, built with React and Motion.

Apple-inspired liquid glass card and buttons using SVG displacement filters for a refractive effect, built with React and Tailwind CSS.

Animated loading indicator with rotating gradient rings, size variants and customizable title text. Built with React, Tailwind CSS and Motion.

Magnetic button that pulls floating particles to its center on hover using Motion spring animations, built with React and Tailwind CSS.

Matrix-style text effect where letters scramble through binary characters before revealing, built with React, Tailwind CSS and Motion animations.

Navigation bar whose active link morphs into a rounded pill with smooth CSS transitions, built with React, Next.js Link, and Tailwind CSS.

Interactive card with an animated dot pattern that repels away from the cursor, powered by React, Tailwind CSS and Motion spring physics.

Button that bursts animated particles from its center on click with a quick scale press effect, built with React, Motion, and Tailwind CSS.

User profile dropdown menu with avatar, subscription and model details, and quick action links, built with React, shadcn/ui, and Tailwind CSS.

Scroll-driven text list that highlights the active word as you scroll, using IntersectionObserver with React, Tailwind CSS and Motion animations.

Hero section with translucent geometric shapes that drop in and float over a gradient backdrop. Built with React, Tailwind CSS and Motion.

Animated shimmer text with a looping gradient sweep across the letters, built with React, Tailwind CSS gradients and Motion animations.

Text effect that splits into two offset slices and merges together on hover using clip-path, built with React, Tailwind CSS and Motion animations.

Animated link button with a vertical text slide on hover and default and ghost variants, built with React, Motion, and Tailwind CSS.

Bottom drawer with spring-based slide-in and staggered content reveal, built on Vaul with React, Motion, and Tailwind CSS.

Animated tab switcher with a sliding active indicator and smooth card content transitions, built with React, Motion, and Tailwind CSS.

Share button that expands into a row of social icon buttons with staggered Motion animations on hover, built with React and Tailwind CSS.

Feature card grid with ambient aurora glow, magnetic 3D tilt and focus dimming on hover, built with React, Tailwind CSS and Motion springs.

Stack of product cards that expands on click to reveal details and specs, animated with Motion and styled with React and Tailwind CSS.

Light and dark theme toggle button with a rotating sun icon and shimmer hover effect, built with React, next-themes, and Tailwind CSS.

Hover text effect with layered colorful shadows that snap flat on mouseover, built with React, Tailwind CSS and Motion hover animations.

Animated team size selector with stacked overlapping avatars, spring transitions and increment controls. Built with React, Tailwind CSS and Motion.

Figma-inspired toolbar where the selected tool expands to reveal its label with spring animations, built with React, Motion, and Tailwind CSS.

Typewriter text animation that types and deletes multiple sequences with a blinking cursor and auto loop, built with React and Motion.

React hook that auto-resizes a textarea to fit its content between a min and max height.

React hook that runs a callback when the user clicks outside the referenced element.

React hook that copies text to the clipboard and exposes a copied state with a reset timeout.

React hook that reports whether the viewport is below the 768px mobile breakpoint.