Blur Carousel
0
Used by 0Controls
Blur Carousel
Flip through images with a soft blur that creeps in on arrow hover and a 3D press-tilt that springs back as each slide advances.
KEY FEATURES
- — Edge blur creeps in from whichever arrow is hovered
- — 3D press-tilt of the whole frame that springs back on release to advance
- — Horizontal (left/right) or vertical (up/down) movement direction
- — Autoplay with per-slide hold time driven by the transition delay
- — Keyboard arrow-key navigation with infinite looping
- — Adjustable tilt angle and blur strength
- — Configurable card width, height, and corner rounding
- — Separate inactive and hover arrow colors plus arrow size
- — Optional multi-line title with custom font, color, and corner placement
- — Smooth crossfade between slide images and titles
API Reference
All props map directly to the controls panel sliders and color pickers.
LAYOUT
PROP
TYPE
DEFAULT
DESCRIPTION
slides
Array<{ image: responsiveimage, title: string }>
[...]
List of carousel slides, each holding an image and an optional multi-line title.
movement
enum
vertical
Advance axis: horizontal (left/right arrows) or vertical (top/bottom arrows).
cardWidth
number
500
Width of the slide frame in pixels.
cardHeight
number
500
Height of the slide frame in pixels.
radius
number
0
Corner rounding from boxy (0) to fully rounded (20) relative to the short side.
tilt
number
45
How far the frame tips toward an arrow on press, in degrees.
blurAmount
number
40
Strength of the edge blur that creeps in on arrow hover, in pixels.
arrowInactiveColor
color
#FFFFFF
Color of the arrows when not hovered.
arrowColor
color
#ffffff
Color of an arrow while its side is hovered.
arrowSize
number
40
Size of the navigation arrow icons in pixels.
autoplay
boolean
false
Auto-advances slides on a timer and disables click navigation.
transition
transition
{"..."}
Crossfade duration and easing, plus the delay that sets autoplay hold time.
showTitle
boolean
false
Toggles the overlaid slide title on or off.
titleFont
font
{"..."}
Font family, weight, size, spacing, and alignment of the title text.
titleColor
color
#ffffff
Text color of the slide title.
titlePosition
object
{"..."}
Title corner placement and its left, right, top, and bottom padding.
