Image Motion Settings

hero-photograph.jpg
EntranceBlur in
Scroll effectParallax
StrengthStrong
About this piece

Image Motion Settings

One image's own motion settings, with the thumbnail beside them performing what the rows describe: blurring into place, then drifting as though the page were scrolling past it.

Usage

The import and the props worth knowing about, in one place.

import { Editor53 } from "@/components/beste/piece/editor53";

<Editor53
  surface="card"
  bordered={false}
  inverted={false}
  fileName="hero-photograph.jpg"
  rows={[
    {
      "label": "Entrance",
      "value": "Blur in"
    },
    {
      "label": "Scroll effect",
      "value": "Parallax"
    },
    {
      "label": "Strength",
      "value": "Strong"
    }
  ]}
/>

More Editor pieces

View all Editor
Appearance

Images

Image entrance
Scroll effect

Motion

Section animation
Animation speed
Post SettingsDraft
Author
Publish Date
Read Time
Feature
Padding96 px
Container7xl
BackgroundBackground
Card bordersPer block
function greet(name: string)
index.tsx
button.tsx
card.tsx
Integrations
Google Analytics
Google Tag Manager
Meta Pixel
PostHog