From 609aaabf7ec8dd7efd8bcd57a07f10bedce7fcc6 Mon Sep 17 00:00:00 2001
From: Luke Melia <luke@lukemelia.com>
Date: Wed, 20 Mar 2024 16:21:24 -0400
Subject: [PATCH] boxel-motion improvements

- Add Split View example to boxel-motion test app as a study for the AI Assistant Panel animation
- Incorporate boxel-motion builds into CI
- Generalize fill behavior of behaviors rather than special casing StaticBehavior treatment
- Default StaticBehavior to a duration of 1, since you can now opt into forward fill
    - when using StaticBehavior with SpringBehavior, you don't know how long the animation will be, and you may want a static animation to persist for the duration of the animation
- Use context-relative bounds for removed sprites
---
 .github/workflows/ci.yaml                     | 19 ++++
 QUICKSTART.md                                 |  4 +-
 README.md                                     |  5 +-
 packages/boxel-motion/addon/package.json      |  1 +
 packages/boxel-motion/addon/rollup.config.mjs |  4 +
 .../boxel-motion/addon/src/behaviors/base.ts  |  2 +
 .../addon/src/behaviors/spring.ts             |  1 +
 .../addon/src/behaviors/static.ts             | 11 ++-
 .../boxel-motion/addon/src/behaviors/tween.ts |  1 +
 .../boxel-motion/addon/src/behaviors/wait.ts  |  1 +
 .../src/components/animation-context.gts      | 22 ++++-
 packages/boxel-motion/addon/src/index.ts      |  7 +-
 .../addon/src/models/orchestration.ts         | 15 ++--
 .../boxel-motion/addon/src/models/sprite.ts   | 25 +++---
 .../boxel-motion/addon/src/styles/addon.css   |  9 ++
 .../addon/src/utils/generate-frames.ts        |  3 +-
 packages/boxel-motion/test-app/app/app.js     |  1 +
 .../test-app/app/controllers/split-view.ts    | 88 +++++++++++++++++++
 packages/boxel-motion/test-app/app/router.js  |  1 +
 .../boxel-motion/test-app/app/styles/app.css  |  1 -
 .../test-app/app/templates/application.hbs    |  7 +-
 .../templates/removed-sprite-interruption.hbs | 49 ++++++++++-
 .../test-app/app/templates/split-view.hbs     | 32 +++++++
 packages/boxel-motion/test-app/vendor/app.css |  7 --
 24 files changed, 278 insertions(+), 38 deletions(-)
 create mode 100644 packages/boxel-motion/addon/src/styles/addon.css
 create mode 100644 packages/boxel-motion/test-app/app/controllers/split-view.ts
 create mode 100644 packages/boxel-motion/test-app/app/templates/split-view.hbs

diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
index 9a971b28e6..e55ae53ac8 100644
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@@ -52,6 +52,19 @@ jobs:
         if: always()
         run: pnpm run lint
         working-directory: packages/boxel-ui/test-app
+      - name: Lint Boxel Motion
+        if: always()
+        run: pnpm run lint
+        working-directory: packages/boxel-motion/addon
+      - name: Build Boxel Motion
+        # To faciliate linting of projects that depend on Boxel Motion
+        if: always()
+        run: pnpm run build
+        working-directory: packages/boxel-motion/addon
+      - name: Lint Boxel Motion Test App
+        if: always()
+        run: pnpm run lint
+        working-directory: packages/boxel-motion/test-app
       - name: Lint Host
         if: always()
         run: pnpm run lint
@@ -159,6 +172,9 @@ jobs:
       - name: Build boxel-ui
         run: pnpm build
         working-directory: packages/boxel-ui/addon
+      - name: Build boxel-motion
+        run: pnpm build
+        working-directory: packages/boxel-motion/addon
       - name: Build host dist/ for fastboot
         run: pnpm build
         env:
@@ -192,6 +208,9 @@ jobs:
       - name: Build boxel-ui
         run: pnpm build
         working-directory: packages/boxel-ui/addon
+      - name: Build boxel-motion
+        run: pnpm build
+        working-directory: packages/boxel-motion/addon
       - name: Build host dist/ for fastboot
         run: pnpm build
         env:
diff --git a/QUICKSTART.md b/QUICKSTART.md
index fb89937cab..239dcf63e5 100644
--- a/QUICKSTART.md
+++ b/QUICKSTART.md
@@ -21,12 +21,14 @@ To build the entire repository and run the application, follow these steps:
    pnpm install
    ```
 
-4. Build the boxel-ui:
+4. Build the boxel-ui and boxl-motion addons:
 
    ```zsh
    cd ./packages/boxel-ui/addon
    pnpm rebuild:icons
    pnpm build
+   cd ../../boxel-motion/addon
+   pnpm build
    ```
 
 5. Build the host:
diff --git a/README.md b/README.md
index beee4d4ebd..2f09879f03 100644
--- a/README.md
+++ b/README.md
@@ -43,8 +43,9 @@ Make sure that you have created a matrix user for the base realm, drafts realm,
 In order to run the ember-cli hosted app:
 
 1. `pnpm build` in the boxel-ui/addon workspace to build the boxel-ui addon.
-2. `pnpm start` in the host/ workspace to serve the ember app. Note that this script includes the environment variable `OWN_REALM_URL=http://localhost:4201/draft/` which configures the host to point to the draft realm's cards realm by default.
-3. `pnpm start:all` in the realm-server/ to serve the base realm, draft realm and published realm -- this will also allow you to switch between the app and the tests without having to restart servers)
+2. `pnpm build` in the boxel-motion/addon workspace to build the boxel-motion addon.
+3. `pnpm start` in the host/ workspace to serve the ember app. Note that this script includes the environment variable `OWN_REALM_URL=http://localhost:4201/draft/` which configures the host to point to the draft realm's cards realm by default.
+4. `pnpm start:all` in the realm-server/ to serve the base realm, draft realm and published realm -- this will also allow you to switch between the app and the tests without having to restart servers)
 
 The app is available at http://localhost:4200. It will serve the draft realm (configurable with OWN_REALM_URL, as mentioned above). You can open the base and draft cards workspace directly by entering http://localhost:4201/base or http://localhost:4201/draft in the browser (and additionally the published realm by entering http://localhost:4201/published).
 
diff --git a/packages/boxel-motion/addon/package.json b/packages/boxel-motion/addon/package.json
index 82c4edf296..d7966f5653 100644
--- a/packages/boxel-motion/addon/package.json
+++ b/packages/boxel-motion/addon/package.json
@@ -117,6 +117,7 @@
       "types": "./declarations/*.d.ts",
       "default": "./dist/*.js"
     },
+    "./styles/*.css": "./dist/styles/*.css",
     "./addon-main.js": "./addon-main.cjs"
   },
   "files": [
diff --git a/packages/boxel-motion/addon/rollup.config.mjs b/packages/boxel-motion/addon/rollup.config.mjs
index a2f9794fda..6a274c35ae 100644
--- a/packages/boxel-motion/addon/rollup.config.mjs
+++ b/packages/boxel-motion/addon/rollup.config.mjs
@@ -51,6 +51,10 @@ export default {
     // Ensure that .gjs files are properly integrated as Javascript
     addon.gjs(),
 
+    // addons are allowed to contain imports of .css files, which we want rollup
+    // to leave alone and keep in the published output.
+    addon.keepAssets(['styles/*']),
+
     // Remove leftover build artifacts when starting a new build.
     addon.clean({ runOnce: true }),
 
diff --git a/packages/boxel-motion/addon/src/behaviors/base.ts b/packages/boxel-motion/addon/src/behaviors/base.ts
index 786645b40b..7dfa70f387 100644
--- a/packages/boxel-motion/addon/src/behaviors/base.ts
+++ b/packages/boxel-motion/addon/src/behaviors/base.ts
@@ -36,6 +36,8 @@ export type Frame = {
 export type FrameGenerator = Generator<Frame | void, void, never>;
 
 export default interface Behavior {
+  fill: boolean;
+
   /**
    * Calculates the frames for the given parameters.
    *
diff --git a/packages/boxel-motion/addon/src/behaviors/spring.ts b/packages/boxel-motion/addon/src/behaviors/spring.ts
index 4774f964d4..1060239f8d 100644
--- a/packages/boxel-motion/addon/src/behaviors/spring.ts
+++ b/packages/boxel-motion/addon/src/behaviors/spring.ts
@@ -36,6 +36,7 @@ type SpringValues = {
 };
 
 export default class SpringBehavior implements Behavior {
+  fill = true;
   private options: SpringOptions;
 
   constructor(options?: SpringOptionsArgument) {
diff --git a/packages/boxel-motion/addon/src/behaviors/static.ts b/packages/boxel-motion/addon/src/behaviors/static.ts
index dcc958be47..ea5fcc3658 100644
--- a/packages/boxel-motion/addon/src/behaviors/static.ts
+++ b/packages/boxel-motion/addon/src/behaviors/static.ts
@@ -1,16 +1,23 @@
-import type Behavior from './base.ts';
+import type Behavior from './base';
 import {
   type Frame,
   type StaticToFramesArgument,
   timeToFrame,
 } from './base.ts';
 
+export interface StaticBehaviorOptions {
+  fill?: boolean;
+}
 export default class StaticBehavior implements Behavior {
+  fill: boolean;
+  constructor(options?: StaticBehaviorOptions) {
+    this.fill = options?.fill ?? false;
+  }
+
   *getFrames(options: StaticToFramesArgument) {
     let frameCount = timeToFrame(options.duration) + 1;
 
     for (let i = 0; i < frameCount; i++) {
-      // TODO: this can explicitly be non-numeric, fix TS
       yield { value: options.value, velocity: 0 } as Frame;
     }
   }
diff --git a/packages/boxel-motion/addon/src/behaviors/tween.ts b/packages/boxel-motion/addon/src/behaviors/tween.ts
index 2ee71369ea..6133558049 100644
--- a/packages/boxel-motion/addon/src/behaviors/tween.ts
+++ b/packages/boxel-motion/addon/src/behaviors/tween.ts
@@ -15,6 +15,7 @@ export interface TweenBehaviorOptions {
 }
 
 export default class TweenBehavior implements Behavior {
+  fill = true;
   easing: Easing;
 
   constructor(options?: TweenBehaviorOptions) {
diff --git a/packages/boxel-motion/addon/src/behaviors/wait.ts b/packages/boxel-motion/addon/src/behaviors/wait.ts
index b9ceb3b155..3ee01536a1 100644
--- a/packages/boxel-motion/addon/src/behaviors/wait.ts
+++ b/packages/boxel-motion/addon/src/behaviors/wait.ts
@@ -2,6 +2,7 @@ import type Behavior from './base.ts';
 import { type WaitToFramesArgument, timeToFrame } from './base.ts';
 
 export default class WaitBehavior implements Behavior {
+  fill = false;
   *getFrames(options: WaitToFramesArgument) {
     let frameCount = timeToFrame(options.duration) + 1;
 
diff --git a/packages/boxel-motion/addon/src/components/animation-context.gts b/packages/boxel-motion/addon/src/components/animation-context.gts
index b35c2d25cc..1736230f6c 100644
--- a/packages/boxel-motion/addon/src/components/animation-context.gts
+++ b/packages/boxel-motion/addon/src/components/animation-context.gts
@@ -1,6 +1,7 @@
 import { assert } from '@ember/debug';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
+import { htmlSafe } from '@ember/template';
 import Component from '@glimmer/component';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
@@ -19,6 +20,7 @@ const { VOLATILE_TAG, consumeTag } =
   Ember.__loader.require('@glimmer/validator');
 
 interface AnimationContextArgs {
+  debugging?: boolean;
   id?: string;
   use: ((changeset: Changeset) => AnimationDefinition) | undefined;
 }
@@ -37,7 +39,7 @@ export default class AnimationContextComponent
 {
   <template>
     {{this.renderDetector}}
-    <div class='animation-context' {{registerContext this}} ...attributes>
+    <div class={{this.cssClasses}} {{registerContext this}} ...attributes>
       <div
         {{registerContextOrphansEl this}}
         data-animation-context-orphan-element='true'
@@ -52,6 +54,13 @@ export default class AnimationContextComponent
   get id(): string | undefined {
     return this.args.id;
   }
+  get cssClasses() {
+    let result = 'animation-context';
+    if (this.args.debugging) {
+      result += ' debugging';
+    }
+    return htmlSafe(result);
+  }
 
   element!: HTMLElement; //set by template
   orphansElement: HTMLElement | null = null; //set by template
@@ -67,6 +76,17 @@ export default class AnimationContextComponent
     );
   }
 
+  constructor(owner: unknown, args: AnimationContextArgs) {
+    super(owner, args);
+    if (!this.animations) {
+      throw new Error(
+        `Expected to find "animations" service in app.
+         Add 'app/services/animations.ts' with
+           \`export { AnimationsService as default } from '@cardstack/boxel-motion';\``,
+      );
+    }
+  }
+
   willDestroy(): void {
     super.willDestroy();
     this.animations.unregisterContext(this);
diff --git a/packages/boxel-motion/addon/src/index.ts b/packages/boxel-motion/addon/src/index.ts
index 869a6af7ac..775d2ce1e0 100644
--- a/packages/boxel-motion/addon/src/index.ts
+++ b/packages/boxel-motion/addon/src/index.ts
@@ -4,13 +4,14 @@ import StaticBehavior from './behaviors/static.ts';
 import TweenBehavior from './behaviors/tween.ts';
 import WaitBehavior from './behaviors/wait.ts';
 import AnimationContext from './components/animation-context.gts';
-import { type Changeset } from './models/animator.ts';
+import { type Changeset, type IContext } from './models/animator.ts';
 import {
   type AnimationDefinition,
   type AnimationTimeline,
   OrchestrationMatrix,
 } from './models/orchestration.ts';
 import Sprite, { type ISpriteModifier, SpriteType } from './models/sprite.ts';
+import sprite from './modifiers/sprite.ts';
 import AnimationsService from './services/animations.ts';
 
 export {
@@ -20,10 +21,12 @@ export {
   AnimationTimeline,
   Changeset,
   FPS,
+  IContext,
   ISpriteModifier,
   OrchestrationMatrix,
   SpringBehavior,
-  Sprite,
+  Sprite, // model
+  sprite, // modifier
   SpriteType,
   StaticBehavior,
   TweenBehavior,
diff --git a/packages/boxel-motion/addon/src/models/orchestration.ts b/packages/boxel-motion/addon/src/models/orchestration.ts
index 18ee1a7454..0b1d8c35d9 100644
--- a/packages/boxel-motion/addon/src/models/orchestration.ts
+++ b/packages/boxel-motion/addon/src/models/orchestration.ts
@@ -1,5 +1,4 @@
 import type Behavior from '../behaviors/base.ts';
-import StaticBehavior from '../behaviors/static.ts';
 import WaitBehavior from '../behaviors/wait.ts';
 import generateFrames from '../utils/generate-frames.ts';
 import { type Keyframe, type Value } from '../value/index.ts';
@@ -8,9 +7,9 @@ import { type MotionOptions, type MotionProperty } from './motion.ts';
 import type Sprite from './sprite.ts';
 
 interface RowFragment {
+  fill: boolean;
   frames: Frame[];
   startColumn: number;
-  static: boolean;
 }
 
 export class OrchestrationMatrix {
@@ -39,8 +38,8 @@ export class OrchestrationMatrix {
         fragmentsByColumn[rowFragment.startColumn] =
           fragmentsByColumn[rowFragment.startColumn] ?? [];
         fragmentsByColumn[rowFragment.startColumn]!.push(rowFragment);
-        // don't backfill static frames, they're intended to only be set for their duration
-        if (rowFragment.static === false && rowFragment.frames[0]) {
+        // some frames (where fill == false) are intended to only be set for their duration
+        if (rowFragment.fill && rowFragment.frames[0]) {
           baseFrames.push(rowFragment.frames[0] as Frame);
         }
       }
@@ -80,8 +79,8 @@ export class OrchestrationMatrix {
           if (frame) {
             frames.push(frame);
 
-            // Detect the final frame for static behaviors, so we can exclude it from future frames (no forward-fill).
-            if (!fragment.frames.length && fragment.static) {
+            // Detect the final frame for behaviors that should not fill, so we can exclude it from future frames (no forward-fill).
+            if (!fragment.frames.length && !fragment.fill) {
               propertiesToRemoveFromPreviousKeyframe.push(frame.property);
             }
           } else {
@@ -195,7 +194,7 @@ export class OrchestrationMatrix {
           rowFragments.push({
             frames,
             startColumn: 0,
-            static: true,
+            fill: timing.behavior.fill,
           });
           maxLength = Math.max(frames.length, maxLength);
         }
@@ -213,7 +212,7 @@ export class OrchestrationMatrix {
             rowFragments.push({
               frames,
               startColumn: 0,
-              static: timing.behavior instanceof StaticBehavior,
+              fill: timing.behavior.fill,
             });
             maxLength = Math.max(frames.length, maxLength);
           }
diff --git a/packages/boxel-motion/addon/src/models/sprite.ts b/packages/boxel-motion/addon/src/models/sprite.ts
index 7cae094081..e8666e1c4e 100644
--- a/packages/boxel-motion/addon/src/models/sprite.ts
+++ b/packages/boxel-motion/addon/src/models/sprite.ts
@@ -163,9 +163,14 @@ export default class Sprite {
 
   get initial(): { [k in string]: Value } {
     let initialBounds = {};
+    let boundsRect: DOMRect;
     if (this.initialBounds) {
-      let { x, y, width, height, top, right, bottom, left } =
-        this.initialBounds.relativeToParent;
+      if (this.type == SpriteType.Removed) {
+        // because removed sprites are moved to the orphans container under the AnimationContext
+        boundsRect = this.initialBounds.relativeToContext;
+      } else {
+        boundsRect = this.initialBounds.relativeToParent;
+      }
 
       initialBounds = {
         // TODO: maybe also for top/left?
@@ -173,14 +178,14 @@ export default class Sprite {
         'translate-x': `${-(this.boundsDelta?.x ?? 0)}px`,
         'translate-y': `${-(this.boundsDelta?.y ?? 0)}px`,
 
-        x: `${x}px`,
-        y: `${y}px`,
-        width: `${width}px`,
-        height: `${height}px`,
-        top: `${top}px`,
-        right: `${right}px`,
-        bottom: `${bottom}px`,
-        left: `${left}px`,
+        x: `${boundsRect.x}px`,
+        y: `${boundsRect.y}px`,
+        width: `${boundsRect.width}px`,
+        height: `${boundsRect.height}px`,
+        top: `${boundsRect.top}px`,
+        right: `${boundsRect.right}px`,
+        bottom: `${boundsRect.bottom}px`,
+        left: `${boundsRect.left}px`,
       };
     }
 
diff --git a/packages/boxel-motion/addon/src/styles/addon.css b/packages/boxel-motion/addon/src/styles/addon.css
new file mode 100644
index 0000000000..fdd9743085
--- /dev/null
+++ b/packages/boxel-motion/addon/src/styles/addon.css
@@ -0,0 +1,9 @@
+.animation-context {
+  position: relative;
+}
+.animation-context.debugging {
+  border: 1px dashed blue;
+}
+.animation-context.debugging .sprite {
+  border: 1px dotted green;
+}
diff --git a/packages/boxel-motion/addon/src/utils/generate-frames.ts b/packages/boxel-motion/addon/src/utils/generate-frames.ts
index 29773a1279..c6192e353b 100644
--- a/packages/boxel-motion/addon/src/utils/generate-frames.ts
+++ b/packages/boxel-motion/addon/src/utils/generate-frames.ts
@@ -75,7 +75,6 @@ export default function generateFrames(
 
     return resolveFrameGenerator(normalizedProperty, generator);
   }
-
   if (typeof options !== 'object') {
     if (!(timing.behavior instanceof StaticBehavior)) {
       throw new Error(
@@ -84,7 +83,7 @@ export default function generateFrames(
     }
 
     if (!timing.duration) {
-      throw new Error('Static behavior requires a duration');
+      timing.duration = 1;
     }
 
     // todo maybe throw error if options is not numeric or string
diff --git a/packages/boxel-motion/test-app/app/app.js b/packages/boxel-motion/test-app/app/app.js
index 471a5bf3a1..f5750a28f8 100644
--- a/packages/boxel-motion/test-app/app/app.js
+++ b/packages/boxel-motion/test-app/app/app.js
@@ -2,6 +2,7 @@ import Application from '@ember/application';
 import config from 'boxel-motion-test-app/config/environment';
 import loadInitializers from 'ember-load-initializers';
 import Resolver from 'ember-resolver';
+import '@cardstack/boxel-motion/styles/addon.css';
 import './deprecation-workflow';
 
 export default class App extends Application {
diff --git a/packages/boxel-motion/test-app/app/controllers/split-view.ts b/packages/boxel-motion/test-app/app/controllers/split-view.ts
new file mode 100644
index 0000000000..4782230878
--- /dev/null
+++ b/packages/boxel-motion/test-app/app/controllers/split-view.ts
@@ -0,0 +1,88 @@
+import {
+  type Changeset,
+  StaticBehavior,
+  SpringBehavior,
+  AnimationDefinition,
+} from '@cardstack/boxel-motion';
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class SplitView extends Controller {
+  @tracked isViewSplit = false;
+
+  @action
+  toggle() {
+    this.isViewSplit = !this.isViewSplit;
+  }
+
+  transition(changeset: Changeset): AnimationDefinition {
+    let animationDefinition: AnimationDefinition = {
+      timeline: {
+        type: 'parallel',
+        animations: [],
+      },
+    };
+    addPanelAnimation.call(this, changeset, animationDefinition);
+    return animationDefinition;
+  }
+}
+
+function addPanelAnimation(
+  changeset: Changeset,
+  animationDefinition: AnimationDefinition,
+) {
+  let containerSprite = changeset.spriteFor({
+    id: 'sidebar-container',
+  });
+  if (!containerSprite) {
+    return;
+  }
+  let behavior = new SpringBehavior({ overshootClamping: true });
+  animationDefinition.timeline.animations.push({
+    sprites: new Set([containerSprite]),
+    properties: {
+      width: {},
+    },
+    timing: {
+      behavior,
+    },
+  });
+  let contentSprite = changeset.spriteFor({
+    id: 'sidebar-content',
+  });
+  if (contentSprite) {
+    animationDefinition.timeline.animations.push({
+      sprites: new Set([contentSprite]),
+      properties: {
+        left: {
+          from: contentSprite.initial?.left || containerSprite.initial.width,
+          to: contentSprite.final?.left || containerSprite.initial.right,
+        },
+      },
+      timing: {
+        behavior,
+      },
+    });
+    let fixedContentWidth = Math.max(
+      contentSprite.initialBounds?.element?.width || 0,
+      contentSprite.finalBounds?.element?.width || 0,
+    );
+    animationDefinition.timeline.animations.push({
+      sprites: new Set([contentSprite]),
+      properties: {
+        width: `${fixedContentWidth}px`,
+      },
+      timing: {
+        behavior: new StaticBehavior({ fill: true }),
+      },
+    });
+  }
+}
+
+// DO NOT DELETE: this is how TypeScript knows how to look up your controllers.
+declare module '@ember/controller' {
+  interface Registry {
+    'split-view': SplitView;
+  }
+}
diff --git a/packages/boxel-motion/test-app/app/router.js b/packages/boxel-motion/test-app/app/router.js
index 29fe81bb55..68a1a7ba31 100644
--- a/packages/boxel-motion/test-app/app/router.js
+++ b/packages/boxel-motion/test-app/app/router.js
@@ -22,4 +22,5 @@ Router.map(function () {
   this.route('simple-orchestration');
   this.route('list');
   this.route('in-out');
+  this.route('split-view');
 });
diff --git a/packages/boxel-motion/test-app/app/styles/app.css b/packages/boxel-motion/test-app/app/styles/app.css
index e0bcd596b2..1a2d7e92f3 100644
--- a/packages/boxel-motion/test-app/app/styles/app.css
+++ b/packages/boxel-motion/test-app/app/styles/app.css
@@ -5,6 +5,5 @@
 @import 'nested-contexts.css';
 @import 'nested-sprites.css';
 @import 'prune-and-graft.css';
-@import 'removed-sprite-interruption.css';
 @import 'motion-study/details.css';
 @import 'motion-study/index.css';
diff --git a/packages/boxel-motion/test-app/app/templates/application.hbs b/packages/boxel-motion/test-app/app/templates/application.hbs
index ff92d47b0b..16038b43d8 100644
--- a/packages/boxel-motion/test-app/app/templates/application.hbs
+++ b/packages/boxel-motion/test-app/app/templates/application.hbs
@@ -39,7 +39,7 @@
   <li>
     <LinkTo @route="removed-sprite-interruption">
       Removed Sprite Interruption
-    </LinkTo>
+    </LinkTo>     
   </li>
   <li>
     <LinkTo @route="list">
@@ -61,6 +61,11 @@
       Prune And Graft
     </LinkTo>
   </li>
+  <li>
+    <LinkTo @route="split-view">
+      Split View
+    </LinkTo>
+  </li>
 </ul>
 
 {{outlet}}
\ No newline at end of file
diff --git a/packages/boxel-motion/test-app/app/templates/removed-sprite-interruption.hbs b/packages/boxel-motion/test-app/app/templates/removed-sprite-interruption.hbs
index b933bcc50a..36cf480195 100644
--- a/packages/boxel-motion/test-app/app/templates/removed-sprite-interruption.hbs
+++ b/packages/boxel-motion/test-app/app/templates/removed-sprite-interruption.hbs
@@ -24,4 +24,51 @@
       Insert
     </button>
   </div>
-</div>
\ No newline at end of file
+</div>
+<style>
+  .container {
+    padding: 12px;
+  }
+
+  .double-render > div:first-child > * {
+    outline: 4px solid red !important;
+  }
+
+  .double-render {
+    width: 200px;
+    height: 220px;
+    border-radius: 8px;
+    border: 1px solid black;
+    position: relative;
+  }
+
+  .count {
+    position: absolute;
+    left: 50%;
+    bottom: 0;
+    transform: translateX(-50%);
+  }
+
+  .sprite {
+    background: #faa;
+    width: 180px;
+    height: 180px;
+    border-radius: 8px;
+    margin: 4px auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+
+  .buttons {
+    padding: 12px 0px;
+    display: flex;
+    gap: 4px;
+  }
+
+  .button {
+    border: 1px solid black;
+    background: #eee;
+  }
+</style>
\ No newline at end of file
diff --git a/packages/boxel-motion/test-app/app/templates/split-view.hbs b/packages/boxel-motion/test-app/app/templates/split-view.hbs
new file mode 100644
index 0000000000..91374b8675
--- /dev/null
+++ b/packages/boxel-motion/test-app/app/templates/split-view.hbs
@@ -0,0 +1,32 @@
+<style>
+  .split-view-toggle-button {
+      position: absolute;
+      bottom: 1.25rem;
+      right: 1.25rem;
+      margin-right: 0;
+    }
+</style>
+<AnimationContext
+  @use={{this.transition}} class="w-2/3 h-64 mx-auto flex flex-row overflow-hidden"
+>
+  <div class="flex-grow bg-yellow-lightest relative">
+    <div class="border border-blue bg-white my-12 mx-16 h-32 rounded">
+      <h2 class="mx-auto mt-12 w-12 text-center font-bold">Hello</h2>
+    </div>
+    <button
+      class="split-view-toggle-button w-12 h-12 text-white rounded shadow sprite {{if this.isViewSplit 'bg-green-light' 'bg-green-dark'}}"
+      type="button" {{on "click" this.toggle}}
+    >Toggle</button>
+  </div>
+  <div class="{{if this.isViewSplit 'w-64' 'w-0'}} bg-green-light flex-none sprite" {{sprite id="sidebar-container"}}>
+    {{#if this.isViewSplit}}
+      <div class="p-6 bg-green-dark relative sprite" {{sprite id="sidebar-content"}}>
+        <h2>Sidebar</h2>
+        <button class="split-view-close-button w-6 h-6 border border-green rounded absolute pin-t pin-r" type="button" {{on "click" this.toggle}}>X</button>
+        <div>
+          This is my sidebar content. There is a lot of important information here.
+        </div>
+      </div>
+    {{/if}}
+  </div>
+</AnimationContext>
\ No newline at end of file
diff --git a/packages/boxel-motion/test-app/vendor/app.css b/packages/boxel-motion/test-app/vendor/app.css
index 39137ea24d..a146bc436b 100644
--- a/packages/boxel-motion/test-app/vendor/app.css
+++ b/packages/boxel-motion/test-app/vendor/app.css
@@ -172,13 +172,6 @@ video {
 
 /* ======================== */
 
-.animation-context {
-  /* border: 1px dashed blue; */
-  position: relative;
-}
-.sprite {
-  /* border: 1px dotted green; */
-}
 .some-container.with-padded-animation-context .animation-context {
   padding: 20px;
 }