DiagonalXCarousel

Feature breakdown:

• Two diagonal strips. One unforgettable X. Unlike any horizontal carousel, your images command the full canvas from corner to corner. creating depth and tension that stops scrolling cold.

• Dial in the exact angle you want. The X Angle property lets you go subtle (15°) or dramatic (45°). both strips mirror each other automatically, so one slider does all the work.

• Set up in minutes, not hours. Drop in your images via Strip 1 and Strip 2, hit preview, and you're done. Every detail — speed, spacing, corners, borde. lives in the properties panel.

• Dark luxury, built in. Ships with a pure black background and a white image border that makes every visual feel like a gallery exhibition. Override both with a single color pick.

• Vignette that frames like cinema. The built-in vignette fades the edges of the layout, drawing the eye to the center crossing point. like a spotlight on your best work.

• Pixel-perfect at every size. Responsive scaling means the X geometry recalculates across breakpoints. what looks cinematic on desktop remains intentional on mobile.

  

Getting started guide:

• Insert the component & add your images

  Drag DiagonalXCarousel onto your canvas. In the properties panel you'll see Strip 1 Images and Strip 2 Images. each accepts a list of items (default 4 each). Click the bracket icon to add, reorder, or replace images in each strip. Strip 1 runs the upper-left diagonal; Strip 2 runs the lower-left diagonal.

• Set the animation speed

  Speed (s) controls how many seconds it takes for one full loop cycle. Lower values = faster movement. The default is 28s — a slow, premium drift. Reduce to 14–18s for energy; increase to 40–60s for a near-still, gallery feel.

• Dial in the X angle

  X Angle is the most important visual property. it defines how steeply the two strips cross each other. Both strips mirror automatically from this single value.

• Size your image cards

  Image Width and Image Height control every card in both strips simultaneously. Wider, taller cards feel editorial and cinematic. Smaller cards feel like a dense film-strip.

• Customize colors & borders

  The component ships dark-first. pure black background with a white image border. Override either to match your brand.

• Enable the vignette

  The vignette fades the outer edges of the component to your background color. drawing the eye inward to the X crossing point. Toggle it on/off and control the intensity with Vignette %.

• Preview & publish

  The animation only runs in Preview mode (Cmd/Ctrl + P) or on the published site. the Framer canvas shows a static snapshot. Hit Preview to validate your angle, speed, and vignette before publishing.