In View

Easily animate elements when they come into view. You can apply animations to elements when they enter the viewport, or when they are fully visible.

Examples

Basic in view

Scroll down

Motion components for product teams. Ndeko UI ships the small movements that tell people the interface heard them: a press that gives, a label that becomes its next state, a panel that grows to fit. Copy a component and keep the code.

Basic in view with margin option

Scroll down

Athletics. Watch running, jumping and throwing events. Athletes compete in many different activities.

Swimming. See swimmers race in water. They use different styles to swim fast and win medals.

Gymnastics. Gymnasts perform flips and jumps. They show strength and balance in their routines.

In view with images and margin option

Scroll down

Shoreline

Ceramics

Night ferry

Orchard

Old map

Studio wall

Market day

Window light

Paper cuts

Harbour

Installation

npx shadcn add "https://ui.ndekocode.dev/c/in-view.json"

Component API

Prop	Type	Default	Description
children	ReactNode		The content inside the `InView` component.
variants	`{ hidden: Variant; visible: Variant; }`	`{ hidden: { opacity: 0 }, visible: { opacity: 1 } }`	Variants to define the animation states.
transition	Transition		Specifies the animation transitions.
viewOptions	UseInViewOptions		Options to configure the in-view behavior.
as	React.ElementType	'div'	The HTML element to render the component as.
once	Boolean	`undefined` (false)	If `true`, the animation will play only once.