Frontend Showcase
Awesome FE
A collection of beautiful frontend components — 3D, animations, scroll effects, and micro-interactions.
showing 76 components
3D Card
Card tilts in 3D space following the cursor using CSS perspective.
Spotlight Card
Radial gradient spotlight that tracks the cursor on each card.
Magnetic Button
Button shifts toward the cursor with a magnetic pull effect.
Cursor Follower
A dot that snaps and a ring that lerps behind the cursor.
Infinite Marquee
Seamlessly looping horizontal ticker with fade mask on edges.
Text Scramble
Characters randomize through a charset before revealing the final text.
Counter Animation
Numbers animate up from zero when entering the viewport.
Typewriter
Text types and deletes character by character, cycling phrases.
Scroll Parallax
Multi-layer depth effect, each element moves at a different speed.
Scroll Progress Bar
Thin gradient bar that tracks scroll progress through a content area.
Sticky Header
Header that shrinks and gains a frosted-glass backdrop when scrolled past a threshold.
Reveal on Scroll
Elements slide in from different directions as they enter the viewport.
Scroll Snap
Full-height sections that snap into place on scroll via CSS scroll-snap.
Reading Progress
Circular SVG progress ring that tracks how much of an article has been read.
Glassmorphism
Frosted glass cards using backdrop-filter blur over a gradient.
Bento Grid
Asymmetric CSS grid layout with mixed card sizes.
Skeleton Loader
Animated shimmer placeholder shown while content is loading.
Accordion
Smooth expand/collapse sections with CSS height transition.
Progress Bar
Animated progress indicators triggered by IntersectionObserver.
Ripple Effect
Material-design ripple burst animation triggered on click.
Tooltip
Floating tooltip with auto-flip based on edge proximity.
SVG Path Draw
Stroke-dashoffset animation draws SVG paths when entering viewport.
Flip Clock
Live clock with retro digit-flip animation every second.
Particle Field
Canvas-based dots that connect and react to cursor movement.
Noise Background
Animated SVG feTurbulence fractal noise layered over a gradient.
Liquid Button
CSS goo filter merges blobs with the button for a liquid effect.
Command Palette
Cmd+K search modal with keyboard navigation and grouped results.
Matrix Rain
Digital katakana rain rendered on canvas with a glowing head character.
Fireworks
Click anywhere to launch a colorful particle burst with gravity and trails.
Wave Animation
Four overlapping sine waves animated with phase offsets on a canvas.
3D Cube
CSS preserve-3d cube with 6 gradient faces — auto-spins and drag to rotate.
Gradient Text
Animated rainbow sweep, diagonal gradient, and chrome metallic text effects.
Split Text Reveal
Words fly in with a spring transform, staggered per word with configurable delay.
Character Morph
Characters scramble through a random charset before revealing the next word.
Masonry Grid
Pinterest-style multi-column layout using CSS columns and break-inside-avoid.
Card Stack
Stacked cards you can drag to cycle — spring bounce and depth perspective.
Timeline
Vertical alternating timeline with staggered mount animations.
Drawing Canvas
Freehand whiteboard with color palette, adjustable brush size, and eraser.
Color Picker
HSV color space picker: saturation/value square + hue strip + hex copy.
Drag & Drop
Sortable list using the native HTML5 Drag API with drop target highlight.
Rating Stars
Hover to preview, click to rate — animated fill with emoji feedback.
Toggle Switch
Three toggle variants: pill, iOS-style, and square — all CSS transitions.
Copy Button
Code snippet cards with Clipboard API copy and animated state feedback.
Confetti
Canvas confetti burst with physics — launch from button or click the canvas.
Bar Chart
Animated bars grow from zero with staggered delay — three switchable datasets.
Audio Visualizer
Web Audio API oscillator feeds AnalyserNode; FFT bins rendered as a color-shifting bar chart.
Noise Field
Per-pixel sine-wave noise on a downscaled canvas — plasma, terrain, and flow palettes.
Snake Game
Classic snake on a 20×20 canvas grid — keyboard and D-pad support.
Aurora Background
Animated aurora borealis using CSS blur blobs with keyframe movement.
Morphing Blob
CSS border-radius morph animation cycling through organic shapes.
Neon Glow
Neon light effect using layered text-shadow and box-shadow with a flicker keyframe.
Toast Notification
Stacked dismissible toasts with type variants and an animated progress bar.
OTP Input
Six-digit code input with auto-advance, backspace nav, paste support, and shake on error.
Floating Label
Material design input where the label floats up on focus or when filled.
Password Strength
Live strength meter with animated bars and a checklist of validation rules.
Morphing Button
Button transitions from idle → loading spinner → success/error state and auto-resets.
Number Ticker
Numbers animate to new values with ease-out-quart easing using requestAnimationFrame.
Spotlight Text
Cursor-tracking radial mask that reveals the bright layer of text beneath.
Like Button
Twitter-style heart with particle burst, ring pulse, and spring scale animation.
Long Press
Hold-to-confirm button with SVG circular progress ring driven by requestAnimationFrame.
Swipe to Delete
Slide list items left past a threshold to delete — Pointer Events with spring snap-back.
Context Menu
Right-click custom menu with edge-aware positioning and keyboard dismiss.
Blur Reveal
Content starts blurred and scales in with a staggered CSS filter transition.
Donut Chart
SVG donut chart with animated stroke-dasharray segments and hover highlight.
Line Chart
SVG cubic-bezier path that animates in via stroke-dashoffset with hover tooltips.
Carousel
Drag-to-swipe slider with auto-play, dot indicators, and spring easing.
Side Drawer
Slide-in panel from left or right with overlay, nav items, and smooth transition.
Tabs
Smooth tab switching with a sliding indicator bar that moves via offsetLeft.
Holographic Card
Credit card with 3D tilt and a cursor-tracked iridescent rainbow overlay.
3D Text
Extruded text depth effect built by stacking CSS text-shadows — no 3D library.
Infinite Zoom
Canvas modular-scale shapes create a continuous infinite zoom-in illusion.
Date Picker
Month-view calendar with the Date API — no library, today highlight, month navigation.
Range Slider
Dual-handle range slider using Pointer Events with a min-gap constraint.
Stepper
Multi-step form with animated progress track, step indicators, and slide-in content.
Combobox
Multi-select searchable dropdown with keyboard nav, chips, and Backspace to remove.
Infinite Scroll
Scroll sentinel triggers async load via IntersectionObserver — 8 items per page.