From e9f0ffbd29a6344b6d826e99662924006ad6e1cc Mon Sep 17 00:00:00 2001
From: pushkine <pushkine.github@gmail.com>
Date: Tue, 19 May 2020 22:06:50 +0200
Subject: [PATCH] examples

---
 .../examples/08-motion/01-spring/App.svelte   | 197 ++++++++--
 .../10-animations/00-animate/App.svelte       | 288 ++++++++-------
 .../examples/11-easing/00-easing/App.svelte   | 201 ++++++-----
 .../11-easing/00-easing/Controls.svelte       | 341 +++++++++---------
 .../examples/11-easing/00-easing/Grid.svelte  | 134 ++++---
 .../examples/11-easing/00-easing/eases.js     |  42 +--
 6 files changed, 695 insertions(+), 508 deletions(-)

diff --git a/site/content/examples/08-motion/01-spring/App.svelte b/site/content/examples/08-motion/01-spring/App.svelte
index 9918cf40e8..9c6396598e 100644
--- a/site/content/examples/08-motion/01-spring/App.svelte
+++ b/site/content/examples/08-motion/01-spring/App.svelte
@@ -1,35 +1,184 @@
 <script>
-	import { spring } from 'svelte/motion';
+  import { spring } from "svelte/motion";
+  import { framerate } from "svelte/environment";
+  import { derived } from "svelte/store";
 
-	let coords = spring({ x: 50, y: 50 }, {
-		stiffness: 0.1,
-		damping: 0.25
-	});
+  const s = spring(50);
+  let prev_time = now();
+  let prev_value = 50;
+  const velocity = derived(
+    s,
+    (v) =>
+      (-prev_value + (prev_value = v)) / (-prev_time + (prev_time = now())),
+    0.0
+  );
+  let l_time;
+  $: canvas && Draw($velocity, $s);
+  let { mass, stiffness, damping, soft } = s;
+  $: s.soft = soft;
+  $: s.mass = mass;
+  $: s.stiffness = stiffness;
+  $: s.damping = damping;
+  let solver;
 
-	let size = spring(10);
+  function solve_spring(target, prev_velocity) {
+    const target_ = target;
+    const delta = target - $s;
+    if (soft || 1 <= damping / (2.0 * Math.sqrt(stiffness * mass))) {
+      const angular_frequency = -Math.sqrt(stiffness / mass);
+      solver = (t) =>
+        target_ -
+        (delta + t * (-angular_frequency * delta - prev_velocity)) *
+          Math.exp(t * angular_frequency);
+    } else {
+      const damping_frequency = Math.sqrt(
+        4.0 * mass * stiffness - damping ** 2
+      );
+      const leftover =
+        (damping * delta - 2.0 * mass * prev_velocity) / damping_frequency;
+      const dfm = (0.5 * damping_frequency) / mass;
+      const dm = -(0.5 * damping) / mass;
+      let f = 0.0;
+      solver = (t) =>
+        target_ -
+        (Math.cos((f = t * dfm)) * delta + Math.sin(f) * leftover) *
+          Math.exp(t * dm);
+    }
+    reset_time = now();
+    s.set((target__ = target));
+  }
+  let target__ = 50;
+  let canvas;
+  const start_time = now();
+  let reset_time = start_time;
+  const canvas_history = [];
+  let max_x, min_x, max_y, min_y, canvas_width, canvas_height;
+  let step, length;
+  let last_index;
+  let ctx;
+  const XC = (x) => ((x - min_x) / (max_x - min_x)) * canvas_width;
+  const YC = (y) =>
+    canvas_height - ((y - min_y) / (max_y - min_y)) * canvas_height;
+  const get_index = (i = 0) =>
+    (i + Math.floor((prev_time - start_time) / framerate)) % length;
+  function Draw() {
+    if (!step) {
+      max_y = canvas_height / 2;
+      min_y = -canvas_height / 2;
+      max_x = canvas_width / 1000;
+      min_x = -max_x;
+      step = framerate / 1000; //framerate / canvas_width;
+      length = Math.floor(max_x / step);
+      canvas_history.length = length;
+      canvas_history.fill(0);
+      ctx = canvas.getContext("2d");
+    }
+    ctx.lineWidth = 12;
+    let offset = (prev_time - reset_time) / 1000;
+    const start_index = get_index(0);
+    if (last_index === (last_index = start_index) || !solver) return;
+    ctx.clearRect(0, 0, canvas_width, canvas_height);
+    ctx.beginPath();
+    let x = min_x,
+      y = 0,
+      i = start_index + 1;
+    ctx.moveTo(XC(x), YC(y));
+    for (x += step; i <= length; i++)
+      ctx.lineTo(XC(x), YC(canvas_history[i])), (x += step);
+    for (i = 0; i < start_index; i++)
+      ctx.lineTo(XC(x), YC(canvas_history[i])), (x += step);
+    ctx.lineTo(
+      XC(x),
+      YC((canvas_history[start_index] = canvas_height / 2 - prev_value))
+    );
+    if (Math.abs(prev_value - solver(offset)) > 20) {
+      solve_spring(target__, $velocity);
+      offset = 0;
+    }
+    x = 0;
+    while (x <= max_x)
+      ctx.lineTo(
+        XC((x += step)),
+        canvas_height / 2 - YC(solver(x + step + offset))
+      );
+    ctx.stroke();
+  }
 </script>
 
 <style>
-	svg { width: 100%; height: 100%; margin: -8px }
-	circle { fill: #ff3e00 }
+  :global(body) {
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+  }
+  svg {
+    width: 100vw;
+    height: 100vh;
+  }
+  circle {
+    fill: tomato;
+  }
+  canvas {
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: -1;
+  }
 </style>
 
+<svelte:window
+  on:mousemove={(e) => solve_spring(e.clientY, $velocity)}
+  bind:innerWidth={canvas_width}
+  bind:innerHeight={canvas_height} />
 <div style="position: absolute; right: 1em;">
-	<label>
-		<h3>stiffness ({coords.stiffness})</h3>
-		<input bind:value={coords.stiffness} type="range" min="0" max="1" step="0.01">
-	</label>
+  <label>
+    <h3>velocity</h3>
+    <progress
+      value={!Number.isNaN($velocity) && Number.isFinite($velocity) && $velocity + 10}
+      min={0}
+      max={20} />
+  </label>
+  <label>
+    <h3>speed</h3>
+    <progress
+      value={!Number.isNaN($velocity) && Number.isFinite($velocity) && Math.abs($velocity)}
+      min={0}
+      max={20} />
+  </label>
+  <label>
+    <h3>y {$s.toFixed(0)}</h3>
+    <progress value={!Number.isNaN($s) && $s} min={0} max={1000} />
+  </label>
+  <label>
+    <h3>target {target__}</h3>
+    <progress value={!Number.isNaN(target__) && target__} min={0} max={1000} />
+  </label>
+  <label>
+    <h3>stiffness ({stiffness})</h3>
+    <input bind:value={stiffness} type="range" min="10" max="200" step="0.01" />
+  </label>
 
-	<label>
-		<h3>damping ({coords.damping})</h3>
-		<input bind:value={coords.damping} type="range" min="0" max="1" step="0.01">
-	</label>
+  <label>
+    <h3>damping ({damping})</h3>
+    <input bind:value={damping} type="range" min="0.1" max="20" step="0.01" />
+  </label>
+  <label>
+    <h3>mass ({mass})</h3>
+    <input bind:value={mass} type="range" min="0.1" max="20" step="0.01" />
+  </label>
+  <label>
+    <h3>
+      soft
+      <input bind:checked={soft} type="checkbox" />
+    </h3>
+  </label>
 </div>
-
-<svg
-	on:mousemove="{e => coords.set({ x: e.clientX, y: e.clientY })}"
-	on:mousedown="{() => size.set(30)}"
-	on:mouseup="{() => size.set(10)}"
->
-	<circle cx={$coords.x} cy={$coords.y} r={$size}/>
-</svg>
\ No newline at end of file
+<svg>
+  <circle
+    cx={-15+canvas_width / 2}
+    cy={$s}
+    r={30} />
+</svg>
+<canvas bind:this={canvas} width={canvas_width} height={canvas_height} />
diff --git a/site/content/examples/10-animations/00-animate/App.svelte b/site/content/examples/10-animations/00-animate/App.svelte
index 279821491b..c3d3559dea 100644
--- a/site/content/examples/10-animations/00-animate/App.svelte
+++ b/site/content/examples/10-animations/00-animate/App.svelte
@@ -1,147 +1,159 @@
 <script>
-	import { quintOut } from 'svelte/easing';
-	import { crossfade } from 'svelte/transition';
-	import { flip } from 'svelte/animate';
-
-	const [send, receive] = crossfade({
-		fallback(node, params) {
-			const style = getComputedStyle(node);
-			const transform = style.transform === 'none' ? '' : style.transform;
-
-			return {
-				duration: 600,
-				easing: quintOut,
-				css: t => `
+  import { quintOut } from "svelte/easing";
+  import { crossfade } from "svelte/transition";
+  import { flip } from "svelte/animate";
+
+  const [send, receive] = crossfade({
+    fallback(node, params) {
+      const style = getComputedStyle(node);
+      const transform = style.transform === "none" ? "" : style.transform;
+      return {
+        duration: 600,
+        easing: quintOut,
+        css: (t) => `
 					transform: ${transform} scale(${t});
 					opacity: ${t}
-				`
-			};
-		}
-	});
-
-	let todos = [
-		{ id: 1, done: false, description: 'write some docs' },
-		{ id: 2, done: false, description: 'start writing JSConf talk' },
-		{ id: 3, done: true, description: 'buy some milk' },
-		{ id: 4, done: false, description: 'mow the lawn' },
-		{ id: 5, done: false, description: 'feed the turtle' },
-		{ id: 6, done: false, description: 'fix some bugs' },
-	];
-
-	let uid = todos.length + 1;
-
-	function add(input) {
-		const todo = {
-			id: uid++,
-			done: false,
-			description: input.value
-		};
-
-		todos = [todo, ...todos];
-		input.value = '';
-	}
-
-	function remove(todo) {
-		todos = todos.filter(t => t !== todo);
-	}
+				`,
+      };
+    },
+  });
+
+  let todos = [
+    { key: 1, done: false, description: "write some docs" },
+    { key: 2, done: false, description: "start writing JSConf talk" },
+    { key: 3, done: true, description: "buy some milk" },
+    { key: 4, done: false, description: "mow the lawn" },
+    { key: 5, done: false, description: "feed the turtle" },
+    { key: 6, done: false, description: "fix some bugs" },
+  ];
+
+  let ukey = todos.length + 1;
+
+  function add(input) {
+    todos = [{ key: ukey++, done: false, description: input.value }, ...todos];
+    input.value = "";
+  }
+
+  function remove(key1) {
+    todos = todos.filter(({ key }) => key !== key1);
+  }
+  $: list = todos.reduce((prev, td) => (prev[+td.done].push(td), prev), [
+    [],
+    [],
+  ]);
+  const animating = new Map();
+  let lastShuffle = Date.now();
+  let t = 0;
 </script>
 
 <style>
-	.new-todo {
-		font-size: 1.4em;
-		width: 100%;
-		margin: 2em 0 1em 0;
-	}
-
-	.board {
-		max-width: 36em;
-		margin: 0 auto;
-	}
-
-	.left, .right {
-		float: left;
-		width: 50%;
-		padding: 0 1em 0 0;
-		box-sizing: border-box;
-	}
-
-	h2 {
-		font-size: 2em;
-		font-weight: 200;
-		user-select: none;
-	}
-
-	label {
-		top: 0;
-		left: 0;
-		display: block;
-		font-size: 1em;
-		line-height: 1;
-		padding: 0.5em;
-		margin: 0 auto 0.5em auto;
-		border-radius: 2px;
-		background-color: #eee;
-		user-select: none;
-	}
-
-	input { margin: 0 }
-
-	.right label {
-		background-color: rgb(180,240,100);
-	}
-
-	button {
-		float: right;
-		height: 1em;
-		box-sizing: border-box;
-		padding: 0 0.5em;
-		line-height: 1;
-		background-color: transparent;
-		border: none;
-		color: rgb(170,30,30);
-		opacity: 0;
-		transition: opacity 0.2s;
-	}
-
-	label:hover button {
-		opacity: 1;
-	}
+  .new-todo {
+    font-size: 1.4em;
+    width: 100%;
+    margin: 2em 0 1em 0;
+  }
+  .board {
+    max-width: 36em;
+    margin: 0 auto;
+  }
+  .left,
+  .right {
+    float: left;
+    width: 50%;
+    padding: 0 1em 0 0;
+    box-sizing: border-box;
+  }
+  h2 {
+    font-size: 2em;
+    font-weight: 200;
+    user-select: none;
+  }
+  label {
+    top: 0;
+    left: 0;
+    display: block;
+    font-size: 1em;
+    line-height: 1;
+    padding: 0.5em;
+    margin: 0 auto 0.5em auto;
+    border-radius: 2px;
+    background-color: #eee;
+    user-select: none;
+  }
+  input {
+    margin: 0;
+  }
+  .right label {
+    background-color: rgb(180, 240, 100);
+  }
+  button {
+    float: right;
+    height: 1em;
+    box-sizing: border-box;
+    padding: 0 0.5em;
+    line-height: 1;
+    background-color: transparent;
+    border: none;
+    color: rgb(170, 30, 30);
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+  label:hover button {
+    opacity: 1;
+  }
 </style>
 
-<div class='board'>
-	<input
-		class="new-todo"
-		placeholder="what needs to be done?"
-		on:keydown="{event => event.which === 13 && add(event.target)}"
-	>
-
-	<div class='left'>
-		<h2>todo</h2>
-		{#each todos.filter(t => !t.done) as todo (todo.id)}
-			<label
-				in:receive="{{key: todo.id}}"
-				out:send="{{key: todo.id}}"
-				animate:flip
-			>
-				<input type=checkbox bind:checked={todo.done}>
-				{todo.description}
-				<button on:click="{() => remove(todo)}">x</button>
-			</label>
-		{/each}
-	</div>
-
-	<div class='right'>
-		<h2>done</h2>
-		{#each todos.filter(t => t.done) as todo (todo.id)}
-			<label
-				in:receive="{{key: todo.id}}"
-				out:send="{{key: todo.id}}"
-				animate:flip
-			>
-				<input type=checkbox bind:checked={todo.done}>
-				{todo.description}
-				<button on:click="{() => remove(todo)}">x</button>
-			</label>
-		{/each}
-	</div>
+<svelte:window
+  on:keydown={(e) => {
+    let [{ length: a }, { length: b }] = list;
+    if (e.keyCode == 32) {
+      if (lastShuffle > Date.now() - 100) {
+        return;
+      }
+      lastShuffle = Date.now();
+      e = 0;
+      if (!a) e += 1;
+      if (!b) e -= 2;
+      if (!e) e += t = 0.5 + (b - a) / (a + b);
+      s: if (~e) {
+        a += b;
+        let w = 1;
+        while (animating.get((e = (e = list[(e = +(Math.random() + e > 0.5))])[Math.floor(Math.random() * e.length)]).key)) if (w++ > a) break s;
+        e.done = !e.done;
+        list = list;
+      }
+    }
+  }} />
+<div class="board">
+  <input
+    class="new-todo"
+    placeholder="what needs to be done?"
+    on:keydown={(event) => void (event.key === 'Enter' && add(event.target))} />
+  {#each list as todo, i (i)}
+    <div class={!i ? 'left' : 'right'}>
+      <h2>{!i ? 'todo' : 'done'}</h2>
+      {#each todo as { key, description, done: checked } (key)}
+        <label
+          in:receive={{ key }}
+          out:send={{ key }}
+          animate:flip
+          on:outrostart={() => {
+            animating.set(key, true);
+          }}
+          on:outroend={() => {
+            animating.set(key, false);
+          }}
+          on:introstart={() => {
+            animating.set(key, true);
+          }}
+          on:introend={() => {
+            animating.set(key, false);
+          }}>
+          <input type="checkbox" bind:checked />
+          {description}
+          <button on:click={remove.bind(null, key)}>x</button>
+        </label>
+      {/each}
+    </div>
+  {/each}
 </div>
diff --git a/site/content/examples/11-easing/00-easing/App.svelte b/site/content/examples/11-easing/00-easing/App.svelte
index c33e73518e..dede5413ce 100644
--- a/site/content/examples/11-easing/00-easing/App.svelte
+++ b/site/content/examples/11-easing/00-easing/App.svelte
@@ -1,106 +1,107 @@
 <script>
-	import { interpolateString as interpolate } from 'd3-interpolate';
-	import { tweened } from 'svelte/motion';
-
-	import Grid from './Grid.svelte';
-	import Controls from './Controls.svelte';
-
-	import { eases, types } from './eases.js';
-
-	let current_type = 'In';
-	let current_ease = 'sine';
-	let duration = 2000;
-	let current = eases.get(current_ease)[current_type];
-	let playing = false;
-	let width;
-
-	const ease_path = tweened(current.shape, { interpolate });
-	const time = tweened(0);
-	const value = tweened(1000);
-
-	async function runAnimations() {
-		playing = true;
-
-		value.set(1000, {duration: 0});
-		time.set(0, {duration: 0});
-
-		await ease_path.set(current.shape);
-		await Promise.all([
-			time.set(1000, {duration, easing: x => x}),
-			value.set(0, {duration, easing: current.fn})
-		]);
-
-		playing = false;
-	}
-
-	$: current = eases.get(current_ease)[current_type];
-	$: current && runAnimations();
+  import { strings } from "svelte/interpolate";
+  import { tweened } from "svelte/motion";
+  import { cubicBezier, easeOut } from "svelte/easing";
+  import { onDestroy } from "svelte";
+
+  import Grid from "./Grid.svelte";
+  import Controls from "./Controls.svelte";
+
+  import { eases, types, generate } from "./eases.js";
+
+  let current_type = "In";
+  let current_ease = "sine";
+  let duration = 2000;
+  let current = eases.get(current_ease)[current_type];
+  let playing = false;
+  let width;
+
+  const ease_path = tweened(current.shape, {
+    interpolate: strings,
+    easing: easeOut,
+  });
+  const time = tweened(0);
+  const value = tweened(1000);
+
+  async function runAnimations() {
+    playing = true;
+    value.setImmediate(1000);
+    time.setImmediate(0);
+    ease_path.set(is_custom ? generate(current_bezier) : current.shape);
+    time.set(1000, { duration });
+    value.set(0, { duration, easing: is_custom ? current_bezier : current.fn });
+  }
+
+  onDestroy(time.onRest(() => (playing = false)));
+  $: is_custom = current_ease.includes("Bezier");
+  $: current = !is_custom && eases.get(current_ease)[current_type];
+  $: current_bezier, current, runAnimations();
+  let eq;
+  let x1, x2, y1, y2;
+  $: current_bezier = bezier && cubicBezier(...bezier);
+  let bezier;
+  let div;
 </script>
 
 <style>
-	.easing-vis {
-		display: flex;
-		max-height: 95%;
-		max-width: 800px;
-		margin: auto;
-		padding: 10px;
-		border: 1px solid #333;
-		border-radius: 2px;
-		padding: 20px;
-	}
-
-	svg {
-		width: 100%;
-		margin: 0 20px 0 0;
-	}
-
-	.graph {
-		transform: translate(200px,400px)
-	}
-
-	@media (max-width:600px) {
-		.easing-vis {
-			flex-direction: column;
-			max-height: calc(100% - 3rem);
-		}
-	}
+  .easing-vis {
+    display: flex;
+    max-height: 95%;
+    max-width: 800px;
+    margin: auto;
+    padding: 10px;
+    border: 1px solid #333;
+    border-radius: 2px;
+    padding: 20px;
+  }
+
+  .svg1 {
+    width: 100%;
+    margin: 0 20px 0 0;
+  }
+
+  .graph {
+    transform: translate(200px, 400px);
+  }
+
+  @media (max-width: 600px) {
+    .easing-vis {
+      flex-direction: column;
+      max-height: calc(100% - 3rem);
+    }
+  }
+  circle {
+    z-index: 10;
+    position: absolute;
+  }
 </style>
 
-<div bind:offsetWidth={width} class="easing-vis">
-	<svg viewBox="0 0 1400 1802">
-		<g class="canvas">
-			<Grid x={$time} y={$value}/>
-			<g class="graph">
-				<path
-					d={$ease_path}
-					stroke="#333"
-					stroke-width="2"
-					fill="none"
-				/>
-
-				<path d="M0,23.647C0,22.41 27.014,0.407 28.496,0.025C29.978,-0.357 69.188,3.744 70.104,4.744C71.02,5.745 71.02,41.499 70.104,42.5C69.188,43.501 29.978,47.601 28.496,47.219C27.014,46.837 0,24.884 0,23.647Z"
-					fill="#ff3e00"
-					style="transform: translate(1060px, {($value - 24)}px)"
-				/>
-
-				<circle
-					cx="{$time}"
-					cy="{$value}"
-					r="15"
-					fill="#ff3e00"
-				/>
-			</g>
-		</g>
-	</svg>
-
-	<Controls
-		{eases}
-		{types}
-		{playing}
-		{width}
-		bind:duration
-		bind:current_ease
-		bind:current_type
-		on:play={runAnimations}
-	/>
-</div>
\ No newline at end of file
+<div bind:offsetWidth={width} bind:this={div} class="easing-vis">
+  {#if is_custom}
+    <div
+      style="position:absolute;z-index:10;left:120px;top:150px;font-size:24px;">
+      cubicBezier({bezier})
+    </div>
+  {/if}
+  <svg class="svg1" viewBox="0 0 1400 1802">
+    <g class="canvas">
+      <Grid {is_custom} bind:bezier x={$time} y={$value}>
+        <g class="graph">
+          <path d={$ease_path} stroke="tomato" stroke-width="10" fill="none" />
+          <circle cx={$time} cy={$value} r="15" fill="#333" />
+        </g>
+      </Grid>
+    </g>
+  </svg>
+  <Controls
+    {is_custom}
+    {eases}
+    {types}
+    {playing}
+    {width}
+    {bezier}
+    bind:duration
+    bind:current_ease
+    bind:current_type
+    on:play={runAnimations} />
+</div>
diff --git a/site/content/examples/11-easing/00-easing/Controls.svelte b/site/content/examples/11-easing/00-easing/Controls.svelte
index 66a297323f..d435e52a4f 100644
--- a/site/content/examples/11-easing/00-easing/Controls.svelte
+++ b/site/content/examples/11-easing/00-easing/Controls.svelte
@@ -1,186 +1,175 @@
 <script>
-	import { createEventDispatcher } from 'svelte';
+  import { createEventDispatcher } from "svelte";
 
-	export let current_ease;
-	export let current_type;
-	export let eases;
-	export let types;
-	export let duration;
-	export let playing;
-	export let width;
+  export let current_ease;
+  export let current_type;
+  export let eases;
+  export let types;
+  export let duration;
+  export let playing;
+  export let width;
 
-	const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher();
 
-	$: mobile = width && width < 600;
+  $: mobile = width && width < 600;
 </script>
 
 <style>
-	.easing-sidebar {
-		width: 11em;
-	}
-
-	ul {
-		list-style: none;
-		padding: 0;
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-		font-size: 18px;
-	}
-
-	li {
-		padding: 5px 10px;
-		background: #eee;
-		border-radius: 2px;
-		margin: 3px 0;
-		cursor:pointer;
-	}
-
-	li:hover {
-		background: #676778;
-		color: white;
-	}
-
-	.selected {
-		background: #ff3e00;
-		color: white;
-	}
-
-	h3 {
-		margin: 0 10px 0 0;
-	}
-
-	h4 {
-		margin-bottom: 0;
-	}
-
-	select {
-		display: inline;
-		padding: 0.2em;
-		margin: 0;
-	}
-
-	.duration {
-		width: 100%;
-		display: flex;
-		align-items: center;
-		flex-wrap: wrap;
-	}
-
-	.duration span {
-		display: flex;
-	}
-
-	.duration input {
-		width: 80px;
-		margin: 10px 10px 10px 0 ;
-	}
-
-	.duration button {
-		margin: 10px 5px;
-	}
-
-	.duration .number {
-		width: 30px;
-	}
-
-	.duration .play {
-		margin: 0 5px 0 auto;
-		width: 100%;
-	}
-
-	@media (max-width:600px) {
-		.easing-types {
-			display: flex;
-			align-items: center;
-			margin-top: 10px;
-		}
-
-		.easing-sidebar {
-			width: 100%;
-		}
-
-		.duration .play {
-			margin-left: auto;
-			width: unset;
-		}
-
-		h3 {
-			font-size: 0.9em;
-			display: inline;
-		}
-
-		h3:nth-of-type(2) {
-			margin-left: auto;
-		}
-
-		ul li {
-			margin-right: 10px;
-		}
-	}
+  .easing-sidebar {
+    width: 11em;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    font-size: 18px;
+  }
+
+  li {
+    padding: 5px 10px;
+    background: #eee;
+    border-radius: 2px;
+    margin: 3px 0;
+    cursor: pointer;
+  }
+
+  li:hover {
+    background: #676778;
+    color: white;
+  }
+
+  .selected {
+    background: #ff3e00;
+    color: white;
+  }
+
+  h3 {
+    margin: 0 10px 0 0;
+  }
+
+  h4 {
+    margin-bottom: 0;
+  }
+
+  select {
+    display: inline;
+    padding: 0.2em;
+    margin: 0;
+  }
+
+  .duration {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  .duration span {
+    display: flex;
+  }
+
+  .duration input {
+    width: 80px;
+    margin: 10px 10px 10px 0;
+  }
+
+  .duration button {
+    margin: 10px 5px;
+  }
+
+  .duration .number {
+    width: 30px;
+  }
+
+  .duration .play {
+    margin: 0 5px 0 auto;
+    width: 100%;
+  }
+
+  @media (max-width: 600px) {
+    .easing-types {
+      display: flex;
+      align-items: center;
+      margin-top: 10px;
+    }
+
+    .easing-sidebar {
+      width: 100%;
+    }
+
+    .duration .play {
+      margin-left: auto;
+      width: unset;
+    }
+
+    h3 {
+      font-size: 0.9em;
+      display: inline;
+    }
+
+    h3:nth-of-type(2) {
+      margin-left: auto;
+    }
+
+    ul li {
+      margin-right: 10px;
+    }
+  }
 </style>
 
 <div class="easing-sidebar">
-		<div class="easing-types">
-			<h3>Ease</h3>
-			{#if mobile}
-				<select bind:value={current_ease}>
-					{#each [...eases] as [name]}
-						<option
-							value={name}
-							class:selected={name === current_ease}
-						>
-							{name}
-						</option>
-					{/each}
-				</select>
-			{:else}
-				<ul>
-					{#each [...eases] as [name]}
-						<li
-							class:selected={name === current_ease}
-							on:click={() => current_ease = name}
-						>
-							{name}
-						</li>
-					{/each}
-				</ul>
-			{/if}
-			<h3>Type</h3>
-			{#if mobile }
-				<select bind:value={current_type}>
-					{#each types as [name, type]}
-						<option
-							value={type}
-						>
-							{name}
-						</option>
-					{/each}
-				</select>
-			{:else}
-				<ul>
-					{#each types as [name, type]}
-						<li
-							class:selected={type === current_type}
-							on:click={() => current_type = type}
-						>
-							{name}
-					</li>
-					{/each}
-				</ul>
-			{/if}
-		</div>
-		<h4>
-			Duration
-		</h4>
-		<div class="duration">
-			<span>
-				<input type="number" bind:value={duration} min="0" step="100"/>
-				<button class="number" on:click={() => duration -= 100}>-</button>
-				<button class="number" on:click={() => duration += 100}>+</button>
-			</span>
-			<button class="play" on:click={() => dispatch('play')}>
-				{playing ? 'Restart' : 'Play'}
-			</button>
-		</div>
-	</div>
\ No newline at end of file
+  <div class="easing-types">
+    <h3>Ease</h3>
+    {#if mobile}
+      <select bind:value={current_ease}>
+        {#each [...eases, [`cubicBezier`]] as [name]}
+          <option value={name} class:selected={name === current_ease}>
+            {name}
+          </option>
+        {/each}
+      </select>
+    {:else}
+      <ul>
+        {#each [...eases, [`cubicBezier`]] as [name]}
+          <li
+            class:selected={name === current_ease}
+            on:click={() => (current_ease = name)}>
+            {name}
+          </li>
+        {/each}
+      </ul>
+    {/if}
+    <h3>Type</h3>
+    {#if mobile}
+      <select bind:value={current_type}>
+        {#each types as [name, type]}
+          <option value={type}>{name}</option>
+        {/each}
+      </select>
+    {:else}
+      <ul>
+        {#each types as [name, type]}
+          <li
+            class:selected={type === current_type}
+            on:click={() => (current_type = type)}>
+            {name}
+          </li>
+        {/each}
+      </ul>
+    {/if}
+  </div>
+  <h4>Duration</h4>
+  <div class="duration">
+    <span>
+      <input type="number" bind:value={duration} min="0" step="100" />
+      <button class="number" on:click={() => (duration -= 100)}>-</button>
+      <button class="number" on:click={() => (duration += 100)}>+</button>
+    </span>
+    <button class="play" on:click={() => dispatch('play')}>
+      {playing ? 'Restart' : 'Play'}
+    </button>
+  </div>
+</div>
diff --git a/site/content/examples/11-easing/00-easing/Grid.svelte b/site/content/examples/11-easing/00-easing/Grid.svelte
index e704f46cf7..3c19134ab0 100644
--- a/site/content/examples/11-easing/00-easing/Grid.svelte
+++ b/site/content/examples/11-easing/00-easing/Grid.svelte
@@ -1,62 +1,98 @@
 <script>
-	export let x, y;
+  export let is_custom;
+  export let x, y;
+  let rect;
+  let rect2;
+  export let x1 = 200,
+    y1 = 1400,
+    x2 = 1200,
+    y2 = 400;
+  let selected1 = false,
+    selected2 = false;
+  export let bezier = [0, 0, 0, 0];
+  const radius = 30;
+  $: {
+    if (rect2) {
+      const { x, y, width, height } = rect2.getBoundingClientRect();
+      bezier = [
+        Math.max(0, Math.min(1, (x1 - 200) / 1000)),
+        -(y1 - 1400) / 1000,
+        Math.max(0, Math.min(1, 1 + (x2 - 1200) / 1000)),
+        1 - (y2 - 400) / 1000,
+      ].map((v) => Math.round(v * 100) / 100);
+    }
+  }
 </script>
 
 <style>
-	.grid-line {
-		stroke:#ccc;
-		opacity: 0.5;
-		stroke-width: 2;
-	}
-
-	.grid-line-xy {
-		stroke: tomato;
-		stroke-width: 2;
-	}
+  .grid-line {
+    stroke: #ccc;
+    opacity: 0.5;
+    stroke-width: 2;
+  }
+  circle {
+    z-index: 10;
+    position: absolute;
+  }
 </style>
 
 <svelte:options namespace="svg" />
 
 <rect
-	x=0
-	y=0
-	width=1400
-	height=1800
-	stroke=#ccc
-	style="opacity: 0.5"
-	fill=none
-	stroke-width=2
-/>
+  bind:this={rect}
+  x="0"
+  y="0"
+  width="1400"
+  height="1800"
+  stroke="#ccc"
+  style="opacity: 0.5"
+  fill="none"
+  stroke-width="2" />
 
 {#each { length: 8 } as _, i}
-	{#if i < 6}
-		<path
-			d="M{(i+1) * 200} 0 L{(i+1)*200} 1802"
-			class="grid-line"
-		/>
-	{/if}
-	<path
-		d="M0 {(i+1) * 200} L1400 {(i+1)*200} "
-		class="grid-line"
-	/>
+  {#if i < 6}
+    <path d="M{(i + 1) * 200} 0 L{(i + 1) * 200} 1802" class="grid-line" />
+  {/if}
+  <path d="M0 {(i + 1) * 200} L1400 {(i + 1) * 200} " class="grid-line" />
 {/each}
-
-<path
-	style="transform: translateX({x+200}px)"
-	d="M0 0 L0 1800"
-	class="grid-line-xy"
-/>
-<path
-	style="transform: translateY({y}px)"
-	d="M0 400 L1400 400"
-	class="grid-line-xy"
-/>
 <rect
-	x=200
-	y=400
-	width=1000
-	height=1000
-	stroke=#999
-	fill=none
-	stroke-width=2
-/>
\ No newline at end of file
+  bind:this={rect2}
+  x="200"
+  y="400"
+  width="1000"
+  height="1000"
+  stroke="#999"
+  fill="none"
+  stroke-width="4" />
+<svelte:window
+  on:mousemove={(e) => {
+    const { x, y, width, height } = rect.getBoundingClientRect();
+    const _x1 = Math.min(1200, Math.max(200, (e.clientX - x) * (1400 / width)));
+    const _y1 = Math.min(1800, Math.max(0, (e.clientY - y) * (1800 / height)));
+    if (selected1) (x1 = _x1), (y1 = _y1);
+    else if (selected2) (x2 = _x1), (y2 = _y1);
+  }}
+  on:mouseup={() => {
+    selected1 = selected2 = false;
+  }} />
+<slot />
+{#if is_custom}
+  <path d="M200 1400 L{x1} {y1} " stroke="#333333d9" stroke-width="10" />
+  <path d="M1200 400 L{x2} {y2} " stroke="#333333d9" stroke-width="10" />
+  <circle
+    cx={x1}
+    cy={y1}
+    r={radius}
+    fill="#333"
+    stroke="transparent"
+    stroke-width="100"
+    on:mousedown={() => (selected1 = true)} />
+  <circle
+    cx={x2}
+    cy={y2}
+    r={radius}
+    fill="#333"
+    stroke="transparent"
+    stroke-width="100"
+    on:mousedown={() => (selected2 = true)} />
+{/if}
diff --git a/site/content/examples/11-easing/00-easing/eases.js b/site/content/examples/11-easing/00-easing/eases.js
index a24246005a..e5489253dc 100644
--- a/site/content/examples/11-easing/00-easing/eases.js
+++ b/site/content/examples/11-easing/00-easing/eases.js
@@ -1,25 +1,25 @@
-import * as eases from 'svelte/easing';
+import * as eases from 'svelte/easing'
 
-const processed_eases = {};
-
-for (const ease in eases) {
-	if (ease === "linear") {
-		processed_eases.linear = eases.linear;
+const processed_eases = {}
+let ease
+for (ease in eases) {
+	if (ease === 'linear') {
+		processed_eases.linear = eases.linear
+	} else if (ease === 'cubicBezier') {
+		continue
 	} else {
-		const name = ease.replace(/In$|InOut$|Out$/, '');
-		const type = ease.match(/In$|InOut$|Out$/)[0];
-
-		if (!(name in processed_eases)) processed_eases[name] = {};
-		processed_eases[name][type] = {};
-		processed_eases[name][type].fn = eases[ease];
-
-		let shape = 'M0 1000';
-		for (let i = 1; i <= 1000; i++) {
-			shape = `${shape} L${(i / 1000) * 1000} ${1000 - eases[ease](i / 1000) * 1000} `;
-			processed_eases[name][type].shape = shape;
+		const name = ease.replace(/In$|InOut$|Out$/, '')
+		;(processed_eases[name] || (processed_eases[name] = {}))[ease.match(/In$|InOut$|Out$/)[0]] = {
+			fn: eases[ease],
+			shape: generate(eases[ease]),
 		}
 	}
 }
+export function generate(easing, from = 0, to = 1000) {
+	let shape = `M${from} ${to}`
+	for (let i = from + 1; i <= to; i++) shape += ` L${i} ${to - to * easing(i / to)}`
+	return shape
+}
 
 const sorted_eases = new Map([
 	['sine', processed_eases.sine],
@@ -32,12 +32,12 @@ const sorted_eases = new Map([
 	['back', processed_eases.back],
 	['elastic', processed_eases.elastic],
 	['bounce', processed_eases.bounce],
-]);
+])
 
 export const types = [
 	['Ease In', 'In'],
 	['Ease Out', 'Out'],
-	['Ease In Out', 'InOut']
-];
+	['Ease In Out', 'InOut'],
+]
 
-export { sorted_eases as eases };
\ No newline at end of file
+export { sorted_eases as eases }