Entrance moment
Reveal content with a strong silhouette and clear interior structure.
The brighter center panel, hard edges, and layered chips give the mask something to shape while it animates.
MaskReveal
Intersection-observer mask transition with circle, diamond, or wipe shapes
Mask Reveal
Open the surface from the center so the transition is unmistakable.
The demo uses a dense poster-style layout instead of a single line, which makes the clip path and masking feel like an actual effect instead of a missed render.
Hero panel
Large type, layered fills, and enough surface area to make the mask read immediately.
Feature cards
Three independent blocks keep the clip path visible as the content opens.
Reveal note
Good for entrance moments. Bad for tiny text-only wrappers.
shape diamond
motion center-out reveal
fallback static when motion is reduced
Accessibility
- Treat the effect as decorative and keep underlying content understandable without color, blur, or motion alone.
- Respect reduced-motion and contrast requirements when animation or filtering is enabled.
Styled quick start
Copy this entrypoint first. It includes the imports required to get the component on screen.
svelte
<script lang="ts">
import '@dryui/ui/themes/default.css';
import '@dryui/ui/themes/dark.css';
import { MaskReveal } from '@dryui/ui';
</script>
<MaskReveal>Content</MaskReveal>Import options
Root package
ts
import { MaskReveal } from '@dryui/ui'Per-component subpath
ts
import { MaskReveal } from '@dryui/ui/mask-reveal'API
Props, CSS variables, and the public data attributes you can target when styling.
| Prop | Type | Description | Default | Required | Bindable |
|---|---|---|---|---|---|
| shape | circlelineardiagonaldiamond | — | 'circle' | — | — |
| direction | inout | — | 'in' | — | — |
| once | boolean | — | true | — | — |
| threshold | number | — | 0.18 | — | — |
| duration | number | — | — | — | — |
| children | Snippet | Content rendered inside the component. | — | — | — |