Loading component…
Components /Gooey Text Reveal
Line-aware gooey blur reveal with load, scroll, and scrub modes
Run the following command
npx shadcn@latest add https://raw.githubusercontent.com/Ashutoshx7/VengeanceUI/main/public/r/gooey-text-reveal.json| Prop Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | Text-bearing React elements to split into animated lines. |
| mode | 'immediate' | 'scroll' | 'scrub' | 'immediate' | Determines whether the animation runs on mount, on scroll entry, or in sync with scroll progress. |
| delay | number | 0 | Delay in seconds for immediate and scroll reveals. |
| duration | number | 1.5 | Duration of each line reveal in seconds. |
| stagger | number | 0.1 | Delay in seconds between consecutive lines. |
| blurAmount | number | 0.35 | Starting blur in em units. |
| ease | string | 'power3.out' | GSAP easing expression used by the tween. |
| start | string | 'top 80%' | ScrollTrigger start position for scroll and scrub modes. |
| end | string | 'bottom 75%' | ScrollTrigger end position for scrub mode. |
| scroller | string | HTMLElement | React.RefObject<HTMLElement | null> | - | Optional scrollable ancestor. Defaults to the browser viewport. |
| once | boolean | true | Runs a scroll reveal only once. Set false to reverse when leaving. |
| disabled | boolean | false | Renders untouched content without splitting or animation. |
| onComplete | () => void | - | Callback fired when the reveal tween completes. |
| className | string | - | Additional classes for the wrapper. Standard div attributes are also forwarded. |
| ref | React.Ref<HTMLDivElement> | - | Forwarded ref for the rendered wrapper element. |