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.
Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Editor53 } from "@/components/beste/component/editor53";
<Editor53
fileName="hero-photograph.jpg"
slotLabel="Hero media"
rows={[{"label":"Entrance","value":"Blur in"},{"label":"Scroll effect","value":"Parallax"},{"label":"Strength","value":"Strong"}]}
/>The import and the props worth knowing about, in one place.
import { Editor53 } from "@/components/beste/piece/editor53";
<Editor53
surface="card"
bordered={true}
inverted={false}
fileName="hero-photograph.jpg"
slotLabel="Hero media"
rows={[
{
"label": "Entrance",
"value": "Blur in"
},
{
"label": "Scroll effect",
"value": "Parallax"
},
{
"label": "Strength",
"value": "Strong"
}
]}
/>Images
Motion
Site-wide appearance settings grouped the way a builder sidebar groups them, each value arriving from the right as its row lands.
The fields that turn a page into a post, filling themselves in one row at a time and finishing on the tags, with the draft state held at the top throughout.
Everything that shapes a section but is kept off the page itself, with a soft highlight travelling down the rows to show each one is a live control.
Start by adding your first block.
Centered editor placeholder with a soft icon tile, headline, hint line, and a recolorable call-to-action pill.