Effects

Edge fades, blur, and masks on native and web

Cross-platform effects under One.UI. The mask and blur modes render through the native primitives on iOS and Android. Web uses CSS masks and backdrop filters. Overlay mode paints through React Native core gradients on native and CSS gradients on web.

EdgeFade fades children toward the enabled edges. Each edge takes true, a size in dp, or { size, curve, color }. curve is a preset (smooth, smoother, sharp, gentle, soft, linear), a cubic bezier, or an alpha stop list. mode is mask (alpha fade, no color), overlay (color gradient over the children), or blur (progressive blur); the mode follows color when omitted, except blur which stays explicit. radius sets the corner radius; style.borderRadius is ignored.

Blur takes intensity (0 to 100, default 50) and tint. Mask takes a maskElement subtree whose opaque pixels show the content and whose transparent pixels hide it. The mask renders offscreen and must fill the whole view; anything but an element warns once and renders the children unmasked.

import { One } from 'one'

<One.UI.EdgeFade bottom={64} curve="smooth">
  <LongList />
</One.UI.EdgeFade>

<One.UI.Blur intensity={60} tint="systemMaterial">
  <OverlayCard />
</One.UI.Blur>

On web, Blur clamps intensity to 0–100 and maps it to a CSS backdrop blur radius of 0–20 pixels. Zero intensity paints no frost veil. Light and dark tints choose explicit veils; regular and unsuffixed system materials follow the browser color scheme. Material thickness changes the veil opacity. Children stay sharp above the backdrop. Browser materials approximate the native material meanings rather than UIKit’s exact pixels.

Web Mask uses CSS mask-image in alpha mode. The mounted mask subtree is hidden from sight, pointer input, and accessibility, then serialized with its computed styles into an SVG image. Opaque mask pixels reveal the content and transparent pixels reveal the background; the mask fills the content bounds. DOM or size changes update the image. External resources inside SVG images and continuous CSS animations are subject to browser image rendering restrictions. Invalid mask elements retain the warning and unmasked rendering contract.

Blur props

Blur also accepts React Native ViewProps, including children and accessibility props.

BlurTint accepts light, dark, default, extraLight, regular, prominent, and the five system materials: systemUltraThinMaterial, systemThinMaterial, systemMaterial, systemThickMaterial, and systemChromeMaterial. Each system material also accepts a Light or Dark suffix. On iOS the material uses UIKit’s backdrop effect; children remain sharp.

EdgeFade props

EdgeFade also accepts React Native ViewProps. No edge is enabled by default. Enable an edge with true to use size, a number to set its depth, or an EdgeConfig object to set its depth and curve separately.

An EdgeFadeCurve is a preset name, a cubic bezier { type: 'cubicBezier', x1, y1, x2, y2 }, or an alpha-stop list { type: 'stops', values: [1, 0.4, 0] }. Stops run from the inner edge to the outer edge and require at least two values between 0 and 1. The native iOS blur mode blends three masked material layers. It does not expose Apple’s private variable-radius filter.

Curve helpers

One.UI.sampleCurve(curve) returns inner-to-outer alpha values. Presets and cubic beziers produce 32 samples, rounded to four decimal places. A stop list retains its length and clamps each value to 0–1.

One.UI.serializeCurve(curve) returns the preset name for a preset, or the sampled alpha values joined with commas for a bezier or stop list. EdgeFade serializes its own curve; use these helpers when inspecting a curve or passing it to another effect.

import { One } from 'one'

const alphas = One.UI.sampleCurve('linear')
// 32 samples, beginning at 1 and ending at 0

const encoded = One.UI.serializeCurve({ type: 'stops', values: [1, 0.4, 0] })
// "1,0.4,0"

Mask props

Mask also accepts React Native ViewProps. Size both the container and the mask element so the mask covers the content bounds.