Interaction

Scroll with wheel, touch or PageDown. Blur amount is in pixels; overlay height controls its reach. Choose top, bottom or both, and edit reading content, paragraph count and line height independently. Catalog hover, focus and mobile Preview share a demonstration; the title opens the editor.

Effect notes

Reading text: [long content; see controls, 1273 characters]；Scroll hint: "Scroll down to see the effect"；Paragraph count: 10；Font size: 16；Line height: 1.5；Blur amount: 4；Blur height: 150；Blur position: "both"；Background: "#f5f4f3"；Text color: "#939292"

States

The configured initial state uses the saved content above. Logical preview canvas 540 × 600; saved scale 1, offset (0, 0).

Timing

The blur is a static CSS overlay. Native scrolling determines the reveal; demonstration delay 0 ms. The common duration field does not change the blur.

Enter and exit

A scrollable reading surface with gradient backdrop blur at both edges. Native controls retain their current local state after the demonstration ends.

Repeated input and interruption

Leaving the catalog with focus outside, going offscreen and switching to the background stop the demonstration. Manual input, live selection and playback progress never replace the saved defaults.

Effect notes

The controls, preview, JSON, Motion adapter, prompt project and HTML export use this same saved settings object and renderer. Catalog cards always show project defaults.

Reduced motion

No automatic demonstration; transitions settle immediately. Native text input, buttons, selection and keyboard controls remain available.

Default configuration

These values come from the maintained default configuration. Editor drafts and exported changes can differ.

{
  "schemaVersion": 2,
  "recipeId": "skiper-41",
  "durationMs": 500,
  "delayMs": 0,
  "easing": [
    0.22,
    1,
    0.36,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": false,
  "interruption": "retarget",
  "tracks": [],
  "skiper": {
    "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, reiciendis eum vitae nostrum, temporibus repudiandae voluptatibus, natus iure ipsa velit odit quibusdam illum. Quaerat cumque laudantium libero reprehenderit perferendis quo nulla voluptate? Repellat tenetur labore exercitationem dicta libero voluptate suscipit, iusto ea assumenda. Ipsa enim, quidem atque modi error eaque, debitis perferendis, hic iste libero dignissimos ea! Quod inventore beatae aspernatur nulla rem perferendis aperiam at debitis delectus odit quia animi ex mollitia vero molestias itaque deleniti, quos exercitationem consequatur assumenda dolor? Quod reiciendis in similique reprehenderit commodi quo blanditiis nobis hic ea optio illum placeat officia alias quasi autem earum quos obcaecati, voluptatum corporis quisquam. Quisquam iste, quas explicabo omnis harum aut quam adipisci, voluptatem saepe accusantium doloribus repellendus amet culpa magnam ex et dolores accusamus commodi facere aliquam voluptatum alias? Officia expedita ut vel? Beatae deserunt sequi id eos libero suscipit totam cum, sed architecto atque quisquam et incidunt quod fuga ullam repellat assumenda quos ab, voluptatum sint nesciunt? Ad sapiente est laborum quam sint eius sequi. Eum, veniam dignissimos.",
    "paragraphs": 10,
    "fontSize": 16,
    "lineHeight": 1.5,
    "blurAmount": 4,
    "blurHeight": 150,
    "position": "both",
    "backgroundColor": "#f5f4f3",
    "textColor": "#939292",
    "hint": "Scroll down to see the effect"
  }
}

Reference and reuse

This effect references Skiper UI. Public source was reviewed when available; Pro examples were independently implemented from their public demonstrations. Use the editor to export the current configuration and runnable renderer. Keep Skiper UI attribution and media notices.

Using it in your own project

Open the editor to run the actual preview and compare changes. This document does not run a separate imitation. Recheck content, input, focus and layout after integrating an export.

Catalog provenance label: Skiper UI. Third-party examples retain their own license and attribution; all current effect renderers are public; the full editor is maintained separately.