Slide 01
Drag
Carousel
On desktop: click + drag. On mobile: swipe (drag) horizontally.
pointer events
inertia
Image zoom on hover
FreeHover
Image zoom on hover
Zoom an image slightly on hover.
Custom cursor
Only on Desktop
Playground
The cursor follows the mouse with a slight “delay” (smooth effect).
Lorem ipsum
Lorem ipsum dolor
Lorem ipsum dolor sit
Lorem ipsum dolor sit amet
Touch device: custom cursor disabled
FreeCursor
Custom cursor
Create a custom cursor that follows the mouse.
Locked prompt
Only on Desktop
On desktop: move the mouse over the grid. On mobile: effect disabled.
Magnetic
distanceThe map lights up when the cursor approaches.
Move the mouse closer
Spotlight
radialLorem ipsum dolor sit amet consectetur adipisicing elit.
Move the mouse closer
Subtle depth
shadowLorem ipsum dolor sit amet consectetur adipisicing elit.
Move the mouse closer
GPU-friendly
css-varsLorem ipsum dolor sit amet consectetur adipisicing elit.
Move the mouse closer
Touch device: cursor highlight disabled
Locked prompt
Desktop: click + drag. Mobile: swipe. Keyboard: left/right arrows.
Active
1/4
Drag
Slide 02
Drag
Carousel
Lorem ipsum dolor sit amet consectetur adipisicing elit.
pointer events
inertia
Slide 03
Drag
Carousel
Lorem ipsum dolor sit amet consectetur adipisicing elit.
pointer events
inertia
Slide 04
Drag
Carousel
Lorem ipsum dolor sit amet consectetur adipisicing elit.
pointer events
inertia
Tip: hold the click (or finger) and slide horizontally.
Locked prompt
Press the handle “≡” and drag an item to change the order.
Step 01
Press down on the handle, then slide up/down.
Position 1/4
Step 02
The other items automatically shift to make room.
Position 2/4
Step 03
Release the item to drop it at its new position.
Position 3/4
Step 04
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Position 4/4
Tip: if you pass an item, it will automatically shift.
Locked prompt
Animation01
Example
Lorem ipsum dolor sit amet consectetur adipisicing elit.
scrollrevealfade
Plus d'infos
On hover, the map rises and reveals additional information. Perfect for creating depth and guiding attention.
Scroll to reveal
Interaction02
Example
Lorem ipsum dolor sit amet consectetur adipisicing elit.
hoverliftdepth
Plus d'infos
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Scroll to reveal
Hybrid03
Example
Lorem ipsum dolor sit amet consectetur adipisicing elit.
combinedprogressivenarrative
Plus d'infos
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Scroll to reveal
Tech04
Example
Lorem ipsum dolor sit amet consectetur adipisicing elit.
performanceoptimizationobserver
Plus d'infos
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Scroll to reveal
UX05
Example
Lorem ipsum dolor sit amet consectetur adipisicing elit.
mobileaccessibilityresponsive
Plus d'infos
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Scroll to reveal
Locked prompt
Only on Desktop
Scroll01
Example
The intensity of the hover effect changes according to the scroll position. The lower you are on the page, the more pronounced the effect is.
scrollhoverdynamic
Hover intensity: 0%
Subtle hover effect
Scroll and hover to see the effect change
React02
Example
Lorem ipsum dolor sit amet consectetur adipisicing elit.
viewportpositioncenter
Hover intensity: 0%
Subtle hover effect
Scroll and hover to see the effect change
Hybrid03
Example
Lorem ipsum dolor sit amet consectetur adipisicing elit.
progresscontextualhybrid
Hover intensity: 0%
Subtle hover effect
Scroll and hover to see the effect change
Tech04
Example
Lorem ipsum dolor sit amet consectetur adipisicing elit.
distancecalculationcenter
Hover intensity: 0%
Subtle hover effect
Scroll and hover to see the effect change
UX05
Example
Lorem ipsum dolor sit amet consectetur adipisicing elit.
adaptivesmoothresponsive
Hover intensity: 0%
Subtle hover effect
Scroll and hover to see the effect change
Locked prompt