Images
Motion
Site-wide appearance settings grouped the way a builder sidebar groups them, each value arriving from the right as its row lands.
Turn the props on the right; the snippet under them is what you would write to get what you see.
Images
Motion
import { Editor52 } from "@/components/beste/component/editor52";
<Editor52
groups={[{"label":"Images","rows":[{"label":"Image entrance","value":"Blur in"},{"label":"Scroll effect","value":"Parallax"}]},{"label":"Motion","rows":[{"label":"Section animation","value":"Blur in"},{"label":"Animation speed","value":"Slow (0.8s)"}]}]}
/>The import and the props worth knowing about, in one place.
import { Editor52 } from "@/components/beste/piece/editor52";
<Editor52
surface="card"
bordered={true}
inverted={false}
title="Appearance"
groups={[
{
"label": "Images",
"rows": [
{
"label": "Image entrance",
"value": "Blur in"
},
{
"label": "Scroll effect",
"value": "Parallax"
}
]
},
{
"label": "Motion",
"rows": [
{
"label": "Section animation",
"value": "Blur in"
},
{
"label": "Animation speed",
"value": "Slow (0.8s)"
}
]
}
]}
stepMs={340}
/>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.
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.
No tutorials needed.
If you can order food online, you can build a website with Beste.
Side-panel content editor with a header chip row, locale and history pills, and stacked rich-text fields for heading and description.
Document outline with colored kind tiles for class, function, method, and prop. Depth-indented with an active row.