CubicBezier

A control for editing a bezier curve. Ideal for tweaking animation easing values.

Integrates the Cubic Bezier control from Tweakpane-creator Hiroki Kokubun's Essentials plugin.

Svelte Tweakpane UI extends the original implementation to by supporting tuple values in addition to object values.

A utility function Utils.cubicBezierToEaseFunction() is also provided to easily convert a cubic bezier value to an easing function compatible with Svelte's built-in motion, transition, and animate modules.

Usage outside of a <Pane> component will implicitly wrap the cubic bezier control in <Pane position="inline">.

Note that Svelte Tweakpane UI embeds a fork of the plugin with build optimizations and a fix for a performance issue. The fork also changes the package name from @tweakpane/plugin-essentials to @kitschpatrol/tweakpane-plugin-essentials for consistency with other plugins.

---

Example

Demo

Code

CubicBezierExample.svelte

<script lang="ts">
  import {
    CubicBezier,
    type CubicBezierValue,
    RadioGrid,
    Slider,
    Utils,
  } from 'svelte-tweakpane-ui'
  import { tweened } from 'svelte/motion'

  // could also be a tuple
  let value: CubicBezierValue = {
    x1: 0.25,
    y1: 0.1,
    x2: 0.25,
    y2: 1,
  }
  let duration = 1000
  let moods = ['Set', 'Rise']
  let mood: string = moods[0]

  const positionTween = tweened(0)

  function lerp(value: number, low: number, high: number): number {
    return (1 - value) * low + value * high
  }

  $: positionTween.set(mood === 'Set' ? 0 : 1, {
    duration,
    easing: Utils.cubicBezierToEaseFunction(value),
  })

  $: celestialHeight = lerp($positionTween, 20, 80)
  $: twilightAmount = lerp($positionTween, 20, -80)
</script>

<CubicBezier bind:value expanded={true} picker="inline" />
<Slider
  bind:value={duration}
  min={0}
  max={10_000}
  format={(v) => `${(v / 1000).toFixed(1)}`}
  label="Duration (Seconds)"
/>
<RadioGrid bind:value={mood} values={['Rise', 'Set']} />

<div class="demo" style:--a="{twilightAmount}%">
  <div class="celestial-object" style:--t="{celestialHeight}%"></div>
</div>

<style>
  .demo {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
    width: 100%;
    background: linear-gradient(to top, orange var(--a), magenta 100%);
  }

  .celestial-object {
    position: absolute;
    bottom: var(--t);
    left: 50%;
    transform-origin: center;
    transform: translate(-50%, 50%);
    aspect-ratio: 1;
    width: 20%;
    background-color: yellow;
    border-radius: 50%;
  }
</style>

---

Props

value bindablerequired
Description	The cubic bezier value to control. Object value type is a convenience added by Svelte Tweakpane UI, and is not part of the original @tweakpane/plugin-essentials API.
Type	CubicBezierValue

label optional
Description	Text displayed next to the control.
Type	string
Default	undefined

userExpandable optional
Description	Allow users to interactively expand / contract the value picker by clicking its icon. Most useful when picker is inline.
Type	boolean
Default	true

expanded bindableoptional
Description	Expand or collapse the blade's picker.
Type	boolean
Default	true

picker optional
Description	The style of value "picker" to use in the blade.
Type	'inline' | 'popup'
Default	'popup'

disabled optional
Description	Prevent interactivity and gray out the control.
Type	boolean
Default	false

theme optional
Description	Custom color scheme.
Type	Theme
Default	undefined Inherits default Tweakpane theme equivalent to ThemeUtils.presets.standard, or the theme set with setGlobalDefaultTheme().

---

Events

change
Description	Fires when value changes. This event is provided for advanced use cases. It's usually preferred to bind to the value prop instead. The event.details payload includes a copy of the value and an origin field to distinguish between user-interactive changes (internal) and changes resulting from programmatic manipulation of the value (external).
Extends	ValueChangeEvent
Type	CubicBezierChangeEvent