Appearance Motion Panel

Appearance

Images

Image entrance
Scroll effect

Motion

Section animation
Animation speed
About this piece

Appearance Motion Panel

Site-wide appearance settings grouped the way a builder sidebar groups them, each value arriving from the right as its row lands.

Usage

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

import { Editor52 } from "@/components/beste/piece/editor52";

<Editor52
  surface="card"
  bordered={false}
  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"
        }
      ]
    }
  ]}
  stepMs={340}
/>

More Editor pieces

View all Editor
hero-photograph.jpg
EntranceBlur in
Scroll effectParallax
StrengthStrong
Feature
Padding96 px
Container7xl
BackgroundBackground
Card bordersPer block
Feature177 Content
Heading

No tutorials needed.

Description

If you can order food online, you can build a website with Beste.

  • Dashboard
  • state
  • render
  • computeStats
Keybindings
  • Command palette
    ⌘+K
  • Quick open
    ⌘+P
  • Toggle terminal
    ⌃+`
  • Format document
    ⌥+⇧+F
const message = `Hello`;
const longer = `Shipping the biggest onboarding upgrade yet`;
const wrapped = items.map((i) => i.name).join(', ') + '!'