Crosshair Image Reveal

PRONew

Preview live, install via shadcn or copy the source.

Installation

Install via shadcn

This will install the component and its dependencies automatically.

PRO COMPONENT

Unlock with PRO

This component is exclusive to reframe/ui PRO.
Get instant access to all premium components and templates.

Usage

crosshair-image-reveal-usage.tsxTSX

Props

NameTypeDefaultRequiredDescription
srcstringYesImage source URL.
altstringNoAlt text for the image.
direction"tr-bl" | "tl-br" | "br-tl" | "bl-tr"tr-blNoDiagonal sweep direction. tr-bl = top-right to bottom-left (default).
startstringtop 60%NoScrollTrigger start position (element enters viewport at ~60%).
endstringtop 30%NoScrollTrigger end position (animation completes at ~30%).
scrubboolean | number1NoScrub smoothing. Number is lag, true = 1, false disables.
scrollerstring | HTMLElement | nullNoCustom ScrollTrigger scroller (selector or element). Needed inside fixed overflow containers.
showCoordinatesbooleantrueNoShow X/Y coordinate labels on the axes.
coordinateMode"px" | "percentage" | "both"pxNoHow coordinates are formatted – px, %, or both.
lineColorstringwhiteNoCrosshair line color.
lineWidthnumber1NoLine width in px.
dotColorstringNoCenter dot color (defaults to lineColor).
dotSizenumber6NoCenter dot diameter in px.
gapnumber8NoGap around dot where lines break (px).
showBracketsbooleantrueNoShow corner brackets.
bracketSizenumber18NoBracket size in px.
bracketColorstringNoBracket color (defaults to lineColor).
bracketWidthnumber1.5NoBracket stroke width.
reveal"clip" | "none"clipNoReveal mode – clip grows a rect from start corner to crosshair.
initialScalenumber1.08NoInitial image scale before reveal (zoom-out effect).
disableBlurbooleanfalseNoDisable blur fade during reveal.
imageClassNamestringNoExtra class for the img element.
labelClassNamestringNoClass for coordinate labels.
onProgress(progress: number) => voidNoCallback with scrub progress 0-1.
© reframe/ui 2026Built by @thommysart
More in Scroll Effects