Skip to content
Utilities & Providers

Reveal

client27.25 kB
@stellaria/nebula-webRevealProps

Preview

Props

11
PropTypeDefault

amount

How much of the element has to be visible before it fires, from 0 to 1. Keep it low for tall blocks: an element taller than the viewport can never reach a high threshold, and would never reveal at all.

number0.2

children

What is revealed. It is never hidden by the stylesheet: the hidden state is applied from the client only once motion is known to be allowed, so with JS off, without an `IntersectionObserver`, or under reduced motion the content is simply there.

ReactNode

className

string

component

The element it paints. It swaps the root for its animated twin rather than wrapping it, so this component adds no node — which is what lets it sit between a grid and its items.

ElementType"div"

duration

Length of the entrance in milliseconds. Ignored when `spring` is set.

number

index

Position in a stagger, which delays this one relative to its siblings. Pass the map index over a list; the delay is capped, so a long list does not end with an element waiting seconds.

number

once

Whether it reveals once and stays. Turning it off makes content re-animate every time it re-enters the viewport, which reads as flicker on a page the user scrolls back up.

booleantrue

preset

Which way it enters. Same seven presets as `Transition`, with a different trigger: that one fires on `mounted`, this one on coming into view.

TransitionPreset"slide-up"

rootMargin

The observer's root margin. The default pulls the trigger line 10 % up from the bottom edge, so the entrance starts before the element is flush with the fold rather than after.

string"0px 0px -10% 0px"

spring

Uses a theme spring instead of a tween, which leaves `duration` unread.

SpringName"gentle"

style

CSSProperties

Also accepts

On top of its own props, this component forwards these groups.

Style props · 128