From 88867756e6b66b23febb3f6b09234c827ef57487 Mon Sep 17 00:00:00 2001 From: Vance Ingalls Date: Sun, 7 Jun 2026 23:38:20 -0700 Subject: [PATCH 1/3] feat(catalog): add motion-blur component Velocity-driven directional motion blur using SVG filter ghost copies. Ghost-copy approach gives one-sided trail; feGaussianBlur top layer keeps element blurry during movement. Uses tween onUpdate pattern (not tl.eventCallback) so it works in the HyperFrames headless renderer. Co-Authored-By: Claude Sonnet 4.6 --- docs/catalog/components/motion-blur.mdx | 70 + docs/docs.json | 1 + docs/public/catalog-index.json | 2317 +++++++++-------- registry/components/motion-blur/demo.html | 526 ++++ .../components/motion-blur/motion-blur.html | 255 ++ .../components/motion-blur/registry-item.json | 18 + ...1920x1080_1780889680338_2.55__accent_0.jpg | Bin 0 -> 46419 bytes ...0x1080_1780889680338_2.57__deco-left_0.jpg | Bin 0 -> 1996 bytes ...x1080_1780889680338_2.57__deco-right_0.jpg | Bin 0 -> 1869 bytes ...920x1080_1780889680338_2.65__tagline_0.jpg | Bin 0 -> 4919 bytes ...1920x1080_1780890567465_2.55__accent_0.jpg | Bin 0 -> 46382 bytes ...0x1080_1780890567465_2.57__deco-left_0.jpg | Bin 0 -> 1996 bytes ...x1080_1780890567465_2.57__deco-right_0.jpg | Bin 0 -> 1868 bytes ...920x1080_1780890567465_2.65__tagline_0.jpg | Bin 0 -> 4919 bytes ...1920x1080_1780891487067_2.55__accent_0.jpg | Bin 0 -> 46814 bytes ...0x1080_1780891487067_2.57__deco-left_0.jpg | Bin 0 -> 1885 bytes ...x1080_1780891487067_2.57__deco-right_0.jpg | Bin 0 -> 1824 bytes ...920x1080_1780891487067_2.65__tagline_0.jpg | Bin 0 -> 4919 bytes ...1920x1080_1780891848951_2.55__accent_0.jpg | Bin 0 -> 46129 bytes ...0x1080_1780891848951_2.57__deco-left_0.jpg | Bin 0 -> 1913 bytes ...x1080_1780891848951_2.57__deco-right_0.jpg | Bin 0 -> 1876 bytes ...920x1080_1780891848951_2.65__tagline_0.jpg | Bin 0 -> 4919 bytes registry/examples/motion-blur/index.html | 547 ++++ registry/registry.json | 4 + 24 files changed, 2587 insertions(+), 1151 deletions(-) create mode 100644 docs/catalog/components/motion-blur.mdx create mode 100644 registry/components/motion-blur/demo.html create mode 100644 registry/components/motion-blur/motion-blur.html create mode 100644 registry/components/motion-blur/registry-item.json create mode 100644 registry/examples/motion-blur/.thumbnails/v4_v3_jpeg_index.html_1920x1080_1780889680338_2.55__accent_0.jpg create mode 100644 registry/examples/motion-blur/.thumbnails/v4_v3_jpeg_index.html_1920x1080_1780889680338_2.57__deco-left_0.jpg create mode 100644 registry/examples/motion-blur/.thumbnails/v4_v3_jpeg_index.html_1920x1080_1780889680338_2.57__deco-right_0.jpg create mode 100644 registry/examples/motion-blur/.thumbnails/v4_v3_jpeg_index.html_1920x1080_1780889680338_2.65__tagline_0.jpg create mode 100644 registry/examples/motion-blur/.thumbnails/v4_v3_jpeg_index.html_1920x1080_1780890567465_2.55__accent_0.jpg create mode 100644 registry/examples/motion-blur/.thumbnails/v4_v3_jpeg_index.html_1920x1080_1780890567465_2.57__deco-left_0.jpg create mode 100644 registry/examples/motion-blur/.thumbnails/v4_v3_jpeg_index.html_1920x1080_1780890567465_2.57__deco-right_0.jpg create mode 100644 registry/examples/motion-blur/.thumbnails/v4_v3_jpeg_index.html_1920x1080_1780890567465_2.65__tagline_0.jpg create mode 100644 registry/examples/motion-blur/.thumbnails/v4_v3_jpeg_index.html_1920x1080_1780891487067_2.55__accent_0.jpg create mode 100644 registry/examples/motion-blur/.thumbnails/v4_v3_jpeg_index.html_1920x1080_1780891487067_2.57__deco-left_0.jpg create mode 100644 registry/examples/motion-blur/.thumbnails/v4_v3_jpeg_index.html_1920x1080_1780891487067_2.57__deco-right_0.jpg create mode 100644 registry/examples/motion-blur/.thumbnails/v4_v3_jpeg_index.html_1920x1080_1780891487067_2.65__tagline_0.jpg create mode 100644 registry/examples/motion-blur/.thumbnails/v4_v3_jpeg_index.html_1920x1080_1780891848951_2.55__accent_0.jpg create mode 100644 registry/examples/motion-blur/.thumbnails/v4_v3_jpeg_index.html_1920x1080_1780891848951_2.57__deco-left_0.jpg create mode 100644 registry/examples/motion-blur/.thumbnails/v4_v3_jpeg_index.html_1920x1080_1780891848951_2.57__deco-right_0.jpg create mode 100644 registry/examples/motion-blur/.thumbnails/v4_v3_jpeg_index.html_1920x1080_1780891848951_2.65__tagline_0.jpg create mode 100644 registry/examples/motion-blur/index.html diff --git a/docs/catalog/components/motion-blur.mdx b/docs/catalog/components/motion-blur.mdx new file mode 100644 index 000000000..3257f64b6 --- /dev/null +++ b/docs/catalog/components/motion-blur.mdx @@ -0,0 +1,70 @@ +--- +title: "Motion Blur" +description: "Velocity-driven directional motion blur — samples element position each frame and applies a one-sided ghost trail proportional to speed" +--- + +# Motion Blur + +Velocity-driven directional motion blur — samples element position each frame and applies a one-sided ghost trail proportional to speed. + +`effect` `motion-blur` `velocity` `animation` `physics` + +