Layout

Progressive edge blur

Progressive edge blur: A band pinned to one edge of a scrolling panel that blurs and fades its content gradually into the background instead of cutting it off at a hard line.

Ridgeline trail report

Ridgeline closed above the second switchback until the crew clears last week's blowdown. Everything below that point is dry and in good shape.

Water is running at the creek crossing near mile 2.4, ankle deep and cold. Bring trekking poles if you are unsteady on wet rock.

The overlook at mile 4 lost its guardrail section to the spring runoff. Stay back from the edge; the crumbling is worse than it looks from the trail.

Rangers report two black bear sightings near the lower meadow this week, both in the early morning. Store food properly at the backcountry sites.

Permit quotas for the north loop reset on the first of the month. Walk-up spots open at the trailhead kiosk starting at 6am on a first-come basis.

Cell service is unreliable past the ridge junction. The emergency phone at the junction shelter is solar powered and tested monthly.

Using Progressive edge blur

Progressive edge blur uses the card preview frame with a light/dark theme setting.

Customize the preview

These controls are passed to the demo. Defaults and limits describe the preview; consult the implementation for its full prop API.

Control	Type	Default	Preview limits
`position`	`select`	`bottom`	Options: top, bottom, left, right
`strength`	`number`	`2`	From 0.5 to 6; step 0.5
`thickness`	`number`	`96`	From 32 to 200; step 8
`layers`	`number`	`6`	From 2 to 12; step 1
`curve`	`select`	`linear`	Options: linear, easeIn, easeOut, smooth

Which frameworks are available for Progressive edge blur?

Progressive edge blur is available for React, Vue, Svelte, Astro, HTML. The live preview uses React; the source observations below apply to index.tsx. Check the selected port before relying on the same interactions.

What does Progressive edge blur depend on?

The React metadata lists these npm dependencies beyond React: motion, clsx.

What accessibility details are visible in Progressive edge blur?

The React source for Progressive edge blur includes: attributes and handlers (aria-hidden). These are source observations. Verify accessible names, focus order and keyboard behavior in the composed page.

How does Progressive edge blur handle reduced motion?

Progressive edge blur reads the motion preference in its React source through useReducedMotion(). Preference-dependent expressions in index.tsx: transitionMs: reduceMotion ? 0 : 220. Check the full implementation, shared styles and selected port with reduced motion enabled; these observations do not establish that every animation stops.

Connect your agent

Related open components

Still of the Overlay scroll panel component, a Fieldbook UI component in Layout.

2396Overlay scroll panelLayoutA bounded panel that hides the platform scrollbar and draws its own slim overlay track, thumb sized to the content.

Still of the Focus scroll list component, a Fieldbook UI component in Layout.

2357Focus scroll listLayoutA scrollable queue whose rows pop into full size and opacity as they reach the center of view, with hover and keyboard selection.

Still of the Masked reveal disclosure component, a Fieldbook UI component in Layout.

2384Masked reveal disclosureLayoutA disclosure whose panel grows to its own natural height while a soft gradient edge wipes the content into view from the top, then runs backwards on close.

Still of the Masonry flow component, a Fieldbook UI component in Layout.

1532Masonry flowLayoutA masonry wall that packs tiles of varying height into columns, lifts each one in as it scrolls into view, and re-seats the whole grid when the column count changes.

Still of the Blur fade reveal component, a Fieldbook UI component in Scroll.

1843Blur fade revealScrollContent that arrives out of focus and transparent, then sharpens into place the first time it scrolls into view without shifting a single pixel.

Still of the Curved Scroll Wall component, a Fieldbook UI component in Layout.

2330Curved Scroll WallLayoutA horizontally scrolling wall of photos rendered on a gently curved, bowed plane that keeps scrolling infinitely in either direction.