Awesome FE

3D

3D Card

Card tilts in 3D space following the cursor using CSS perspective.

Micro-interaction

Spotlight Card

Radial gradient spotlight that tracks the cursor on each card.

Micro-interaction

Magnetic Button

Button shifts toward the cursor with a magnetic pull effect.

Micro-interaction

Cursor Follower

A dot that snaps and a ring that lerps behind the cursor.

Animation

Infinite Marquee

Seamlessly looping horizontal ticker with fade mask on edges.

Animation

Text Scramble

Characters randomize through a charset before revealing the final text.

Animation

Counter Animation

Numbers animate up from zero when entering the viewport.

Animation

Typewriter

Text types and deletes character by character, cycling phrases.

Scroll

Scroll Parallax

Multi-layer depth effect, each element moves at a different speed.

Scroll

Scroll Progress Bar

Thin gradient bar that tracks scroll progress through a content area.

Scroll

Sticky Header

Header that shrinks and gains a frosted-glass backdrop when scrolled past a threshold.

Scroll

Reveal on Scroll

Elements slide in from different directions as they enter the viewport.

Scroll

Scroll Snap

Full-height sections that snap into place on scroll via CSS scroll-snap.

Scroll

Reading Progress

Circular SVG progress ring that tracks how much of an article has been read.

UI

Glassmorphism

Frosted glass cards using backdrop-filter blur over a gradient.

UI

Bento Grid

Asymmetric CSS grid layout with mixed card sizes.

UI

Skeleton Loader

Animated shimmer placeholder shown while content is loading.

UI

Accordion

Smooth expand/collapse sections with CSS height transition.

UI

Progress Bar

Animated progress indicators triggered by IntersectionObserver.

Micro-interaction

Ripple Effect

Material-design ripple burst animation triggered on click.

UI

Tooltip

Floating tooltip with auto-flip based on edge proximity.

Animation

SVG Path Draw

Stroke-dashoffset animation draws SVG paths when entering viewport.

Animation

Flip Clock

Live clock with retro digit-flip animation every second.

Canvas

Particle Field

Canvas-based dots that connect and react to cursor movement.

Canvas

Noise Background

Animated SVG feTurbulence fractal noise layered over a gradient.

Micro-interaction

Liquid Button

CSS goo filter merges blobs with the button for a liquid effect.

UI

Command Palette

Cmd+K search modal with keyboard navigation and grouped results.

Canvas

Matrix Rain

Digital katakana rain rendered on canvas with a glowing head character.

Canvas

Fireworks

Click anywhere to launch a colorful particle burst with gravity and trails.

Canvas

Wave Animation

Four overlapping sine waves animated with phase offsets on a canvas.

3D

3D Cube

CSS preserve-3d cube with 6 gradient faces — auto-spins and drag to rotate.

Animation

Gradient Text

Animated rainbow sweep, diagonal gradient, and chrome metallic text effects.

Animation

Split Text Reveal

Words fly in with a spring transform, staggered per word with configurable delay.

Animation

Character Morph

Characters scramble through a random charset before revealing the next word.

UI

Masonry Grid

Pinterest-style multi-column layout using CSS columns and break-inside-avoid.

UI

Card Stack

Stacked cards you can drag to cycle — spring bounce and depth perspective.

UI

Timeline

Vertical alternating timeline with staggered mount animations.

Canvas

Drawing Canvas

Freehand whiteboard with color palette, adjustable brush size, and eraser.

UI

Color Picker

HSV color space picker: saturation/value square + hue strip + hex copy.

Micro-interaction

Drag & Drop

Sortable list using the native HTML5 Drag API with drop target highlight.

Micro-interaction

Rating Stars

Hover to preview, click to rate — animated fill with emoji feedback.

UI

Toggle Switch

Three toggle variants: pill, iOS-style, and square — all CSS transitions.

UI

Copy Button

Code snippet cards with Clipboard API copy and animated state feedback.

Canvas

Confetti

Canvas confetti burst with physics — launch from button or click the canvas.

Canvas

Bar Chart

Animated bars grow from zero with staggered delay — three switchable datasets.

Canvas

Audio Visualizer

Web Audio API oscillator feeds AnalyserNode; FFT bins rendered as a color-shifting bar chart.

Canvas

Noise Field

Per-pixel sine-wave noise on a downscaled canvas — plasma, terrain, and flow palettes.

Canvas

Snake Game

Classic snake on a 20×20 canvas grid — keyboard and D-pad support.

Animation

Aurora Background

Animated aurora borealis using CSS blur blobs with keyframe movement.

Animation

Morphing Blob

CSS border-radius morph animation cycling through organic shapes.

Animation

Neon Glow

Neon light effect using layered text-shadow and box-shadow with a flicker keyframe.

UI

Toast Notification

Stacked dismissible toasts with type variants and an animated progress bar.

UI

OTP Input

Six-digit code input with auto-advance, backspace nav, paste support, and shake on error.

UI

Floating Label

Material design input where the label floats up on focus or when filled.

UI

Password Strength

Live strength meter with animated bars and a checklist of validation rules.

Micro-interaction

Morphing Button

Button transitions from idle → loading spinner → success/error state and auto-resets.

Animation

Number Ticker

Numbers animate to new values with ease-out-quart easing using requestAnimationFrame.

Micro-interaction

Spotlight Text

Cursor-tracking radial mask that reveals the bright layer of text beneath.

Micro-interaction

Like Button

Twitter-style heart with particle burst, ring pulse, and spring scale animation.

Micro-interaction

Long Press

Hold-to-confirm button with SVG circular progress ring driven by requestAnimationFrame.

Micro-interaction

Swipe to Delete

Slide list items left past a threshold to delete — Pointer Events with spring snap-back.

Micro-interaction

Context Menu

Right-click custom menu with edge-aware positioning and keyboard dismiss.

Animation

Blur Reveal

Content starts blurred and scales in with a staggered CSS filter transition.

Canvas

Donut Chart

SVG donut chart with animated stroke-dasharray segments and hover highlight.

Canvas

Line Chart

SVG cubic-bezier path that animates in via stroke-dashoffset with hover tooltips.

UI

Carousel

Drag-to-swipe slider with auto-play, dot indicators, and spring easing.

UI

Side Drawer

Slide-in panel from left or right with overlay, nav items, and smooth transition.

UI

Tabs

Smooth tab switching with a sliding indicator bar that moves via offsetLeft.

3D

Holographic Card

Credit card with 3D tilt and a cursor-tracked iridescent rainbow overlay.

3D

3D Text

Extruded text depth effect built by stacking CSS text-shadows — no 3D library.

Canvas

Infinite Zoom

Canvas modular-scale shapes create a continuous infinite zoom-in illusion.

UI

Date Picker

Month-view calendar with the Date API — no library, today highlight, month navigation.

UI

Range Slider

Dual-handle range slider using Pointer Events with a min-gap constraint.

UI

Stepper

Multi-step form with animated progress track, step indicators, and slide-in content.

UI

Combobox

Multi-select searchable dropdown with keyboard nav, chips, and Backspace to remove.

UI

Infinite Scroll

Scroll sentinel triggers async load via IntersectionObserver — 8 items per page.

Micro-interaction

Dock

macOS-style dock where icons magnify near the cursor.

UI

Image Comparison

Before/after image slider with a draggable divider handle.

Animation

Border Beam

A beam of light travels around the card border.

UI

File Upload

Drag & drop upload zone with per-file progress bars.

Canvas

Globe

Rotating 3D particle globe on canvas — drag to spin.

UI

Kanban Board

Drag cards between kanban columns with drop highlighting.

UI

Virtualized List

Scrolls 10,000 rows while keeping ~20 in the DOM.

Micro-interaction

Radial Menu

Action button that fans options out in a circle.

Canvas

Signature Pad

Canvas signature capture with Pointer Events and PNG export.

UI

Data Table

Sortable columns and pagination over a sample dataset.

Canvas

Calendar Heatmap

GitHub-style contribution grid with hover tooltips.

UI

Markdown Preview

Live-rendered markdown editor with a side-by-side preview.

UI

Pomodoro Timer

25/5 work-break countdown with an animated SVG progress ring.

Canvas

Game of Life

Conway's cellular automaton on canvas — click to seed cells.

UI

Resizable Split Pane

Two panels with a drag-to-resize divider between them.