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 effects
01

Magnetic Button

Cursor pulls the button toward it within a soft radius.

02
0
Projects
0
Satisfaction
0
Years

Animated Counter

Numbers count up when scrolled into view.

03
Contracting done Wright

Gradient Text

Animated gradient sweeps through brand colors.

04
Watch the background

Floating Orbs

Ambient blurred shapes drift slowly behind content.

05
Hello!
I fade in when scrolled into view.

Reveal on Scroll

Elements fade and slide up as they enter the viewport.

07

Morphing Blob

Organic shape continuously morphs.

08
  • Permits filed
  • Demolition complete
  • Cabinets installed
  • Final walkthrough

Staggered List

List items reveal one by one when in view.

09
Premium package
Full renovation
Move cursor around me

Spotlight Cursor

A soft light follows the cursor inside the card.

10

Typewriter

Text types itself one character at a time.

11
0%

Progress Ring

Animated SVG ring fills to a target percentage.

12
Kitchen•Bathroom•Basement•Additions•Whole-home•Kitchen•Bathroom•Basement•Additions•Whole-home•

Marquee

Continuous horizontal scroll of keywords.

13
Featured project
Ann Arbor kitchen transformation
$127K · 12 weeks · 5★

Glowing Border

A conic gradient rotates around the border.

14
Booking in 3 weeksCrew available

Pulse Dot

A status indicator with a soft outward pulse.

15
Hover to flip
Free quote in 24h

Flip Card

Card flips on hover to reveal the back.

17
WRIGHT’S
Premium renovations

Parallax Layers

Background shifts at a different rate than foreground on scroll.

18

Shimmer Loading

Skeleton placeholder with a moving sheen.

19

Spinning Icon

A clean conic-gradient spinner.

20
View our portfolio

Gradient Border Button

Button with an animated gradient border ring.

Set B — Purple accent

20 new effects · light + dark
21

Ripple Button

Click ripple emanates from the cursor on press.

22
Page scroll: 0%

Scroll Progress

Live bar tracking page scroll position.

23
Remember to ask about the cabinet upgrade!Hover me

Sticky Note

Tilted paper note that straightens on hover.

24
BEFORE
AFTER
⇆

Before / After Slider

Drag to reveal the transformation.

25
Plan. Build. Live.

Kinetic Headline

Words bounce on a staggered loop.

26

Gooey Hover

Blobs ooze out of the button on hover.

27
Kitchen reveal

Image Zoom

Image smoothly zooms inside its frame on hover.

28
Typically 8–12 weeks once permits are issued.
Yes — we file every permit on your behalf.

Accordion FAQ

Smoothly expanding question/answer panels.

29
Quote sent

Animated Checkmark

Stroke draws itself when scrolled into view.

30
Featured

Photo Tilt

Image card tilts and the shine follows the cursor.

31
04
Days
12
Hrs
38
Min
17
Sec

Countdown Timer

Live timer for promo deadlines.

32
“Beautiful, on-time, on-budget.” — M.K.
“Best contractor in Ann Arbor.” — D.S.
“They handled everything.” — R.J.

Scroll-Snap Carousel

Swipe horizontally; each card snaps into place.

33
🛠️Refresh package

Hover Lift

Card lifts and gains shadow on hover.

35
Color shifts as you scroll

Color Shift

Background interpolates between purple and orange on scroll.

36
Move your cursor in here

Cursor Trail

Trail of fading dots follows the cursor.

38

Expanding Search

Click to expand the search field; collapses on blur.

39

SVG Logo Draw

Outline draws itself stroke-by-stroke.

40

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.