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.
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.
createwithnakul 
