diff --git a/apps/examples/src/examples/FloatyExample.tsx b/apps/examples/src/examples/FloatyExample.tsx
new file mode 100644
index 000000000..9789662ba
--- /dev/null
+++ b/apps/examples/src/examples/FloatyExample.tsx
@@ -0,0 +1,47 @@
+import { Tldraw, Vec2d, useContainer, useEditor } from '@tldraw/tldraw'
+import '@tldraw/tldraw/tldraw.css'
+import { useEffect } from 'react'
+
+export default function FloatyExample() {
+ return (
+
+
+
+
+
+ )
+}
+
+function SneakyFloatyHook() {
+ const editor = useEditor()
+ const container = useContainer()
+
+ useEffect(() => {
+ if (!window.screenLeft) {
+ window.screenLeft = window.screenX
+ window.screenTop = window.screenY
+ }
+
+ let x = window.screenLeft ?? window.screenX
+ let y = window.screenTop ?? window.screenY
+
+ function updatePositions() {
+ const sx = window.screenLeft ?? window.screenX
+ const sy = window.screenTop ?? window.screenY
+
+ if (sx !== x || sy !== y) {
+ x = sx
+ y = sy
+ editor.setCamera(new Vec2d(-x, -y))
+ }
+ }
+
+ editor.on('tick', updatePositions)
+
+ return () => {
+ editor.off('tick', updatePositions)
+ }
+ }, [editor, container])
+
+ return null
+}
diff --git a/apps/examples/src/index.tsx b/apps/examples/src/index.tsx
index 2c0269b5b..69873e64f 100644
--- a/apps/examples/src/index.tsx
+++ b/apps/examples/src/index.tsx
@@ -23,6 +23,7 @@ import CustomUiExample from './examples/CustomUiExample/CustomUiExample'
import ErrorBoundaryExample from './examples/ErrorBoundaryExample/ErrorBoundaryExample'
import ExplodedExample from './examples/ExplodedExample'
import ExternalContentSourcesExample from './examples/ExternalContentSourcesExample'
+import FloatyExample from './examples/FloatyExample'
import ForceMobileExample from './examples/ForceBreakpointExample'
import HideUiExample from './examples/HideUiExample'
import MetaExample from './examples/MetaExample'
@@ -192,6 +193,11 @@ export const allExamples: Example[] = [
path: 'asset-props',
element: ,
},
+ {
+ title: 'Floaty window',
+ path: 'floaty-window',
+ element: ,
+ },
{
title: 'External content sources',
path: 'external-content-sources',