UX Magic Catalog
40 world-class interactions for wrights-renovations.com.
Each card below is a live, working demo. Hover, scroll, click, drag — they all respond. Set A uses your orange accent. Set B uses your purple accent on light and dark surfaces.
Set A — Orange accent
20 effectsMagnetic Button
Cursor pulls the button toward it within a soft radius.
Animated Counter
Numbers count up when scrolled into view.
Gradient Text
Animated gradient sweeps through brand colors.
Floating Orbs
Ambient blurred shapes drift slowly behind content.
Reveal on Scroll
Elements fade and slide up as they enter the viewport.
Tilt Card
Card tilts in 3D toward the cursor.
Morphing Blob
Organic shape continuously morphs.
- Permits filed
- Demolition complete
- Cabinets installed
- Final walkthrough
Staggered List
List items reveal one by one when in view.
Spotlight Cursor
A soft light follows the cursor inside the card.
Typewriter
Text types itself one character at a time.
Progress Ring
Animated SVG ring fills to a target percentage.
Marquee
Continuous horizontal scroll of keywords.
Glowing Border
A conic gradient rotates around the border.
Pulse Dot
A status indicator with a soft outward pulse.
Flip Card
Card flips on hover to reveal the back.
Animated Underline
Underline slides in from one side on hover.
Parallax Layers
Background shifts at a different rate than foreground on scroll.
Shimmer Loading
Skeleton placeholder with a moving sheen.
Spinning Icon
A clean conic-gradient spinner.
Gradient Border Button
Button with an animated gradient border ring.
Set B — Purple accent
20 new effects · light + darkRipple Button
Click ripple emanates from the cursor on press.
Scroll Progress
Live bar tracking page scroll position.
Sticky Note
Tilted paper note that straightens on hover.
Before / After Slider
Drag to reveal the transformation.
Kinetic Headline
Words bounce on a staggered loop.
Gooey Hover
Blobs ooze out of the button on hover.
Image Zoom
Image smoothly zooms inside its frame on hover.
Accordion FAQ
Smoothly expanding question/answer panels.
Animated Checkmark
Stroke draws itself when scrolled into view.
Photo Tilt
Image card tilts and the shine follows the cursor.
Countdown Timer
Live timer for promo deadlines.
Scroll-Snap Carousel
Swipe horizontally; each card snaps into place.
Hover Lift
Card lifts and gains shadow on hover.
Breadcrumb Morph
Subtle hover pill on each crumb.
Color Shift
Background interpolates between purple and orange on scroll.
Cursor Trail
Trail of fading dots follows the cursor.
Magnetic Underline
Underline stretches to full width on hover.
Expanding Search
Click to expand the search field; collapses on blur.
SVG Logo Draw
Outline draws itself stroke-by-stroke.
Smooth Anchor
Pill CTA that lifts and brightens on hover.
40 effects, pure vanilla CSS/JS, scoped to this page. Page is marked noindex/nofollow.
