FE-43: Add switchable background to filter stories

Default background is now the scrollable ExampleArticle with a sticky
glass overlay. A "background" radio control lets you switch to the
checkerboard pattern.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: kube

libs/@hashintel/refractive/stories/filters/filter-obb.stories.tsx

@@ -14,8 +14,8 @@ import {
   type SharedFilterProps,
 } from "../helpers";
 
-const FilterOBBStory = (props: SharedFilterProps) => (
-  <FilterShowcase>
+const FilterOBBStory = ({ background, ...props }: SharedFilterProps) => (
+  <FilterShowcase background={background}>
     {(id) => <FilterOBB id={id} scaleRatio={1} pixelRatio={6} {...props} />}
   </FilterShowcase>
 );

libs/@hashintel/refractive/stories/filters/filter-polar.stories.tsx

@@ -19,8 +19,8 @@ type FilterPolarStoryProps = Omit<
   "specularOpacity" | "specularAngle"
 >;
 
-const FilterPolarStory = (props: FilterPolarStoryProps) => (
-  <FilterShowcase>
+const FilterPolarStory = ({ background, ...props }: FilterPolarStoryProps) => (
+  <FilterShowcase background={background}>
     {(id) => <FilterPolar id={id} pixelRatio={6} {...props} />}
   </FilterShowcase>
 );

libs/@hashintel/refractive/stories/filters/filter.stories.tsx

@@ -14,8 +14,8 @@ import {
   type SharedFilterProps,
 } from "../helpers";
 
-const FilterStory = (props: SharedFilterProps) => (
-  <FilterShowcase>
+const FilterStory = ({ background, ...props }: SharedFilterProps) => (
+  <FilterShowcase background={background}>
     {(id) => (
       <Filter
         id={id}

libs/@hashintel/refractive/stories/helpers.tsx

@@ -2,6 +2,9 @@ import { useId } from "react";
 
 import type { SurfaceFnDef } from "../src/helpers/surface-equations";
 import { convex } from "../src/helpers/surface-equations";
+import { ExampleArticle } from "./example-article";
+
+export type BackgroundType = "article" | "checkerboard";
 
 export type SharedFilterProps = {
   blur: number;
@@ -12,6 +15,7 @@ export type SharedFilterProps = {
   specularOpacity: number;
   specularAngle: number;
   bezelHeightFn: SurfaceFnDef;
+  background: BackgroundType;
 };
 
 export const defaultFilterArgs: SharedFilterProps = {
@@ -23,6 +27,7 @@ export const defaultFilterArgs: SharedFilterProps = {
   specularOpacity: 0.9,
   specularAngle: 2,
   bezelHeightFn: convex,
+  background: "article",
 };
 
 export const filterArgTypes = {
@@ -44,48 +49,88 @@ export const filterArgTypes = {
     control: { type: "range" as const, min: 0, max: 6.28, step: 0.01 },
   },
   bezelHeightFn: { table: { disable: true } },
+  background: {
+    control: { type: "inline-radio" as const },
+    options: ["article", "checkerboard"],
+  },
 };
 
 /**
- * Wrapper that renders a filter + a div with that filter applied, over a colorful background.
+ * Glass pane that applies an SVG backdrop-filter.
+ * `children` should render the <Filter> / <FilterOBB> SVG element.
  */
-export const FilterShowcase: React.FC<{
-  children: (id: string) => React.ReactNode;
-}> = ({ children }) => {
-  const filterId = useId();
-
-  return (
+const GlassPane: React.FC<{
+  filterId: string;
+  children: React.ReactNode;
+}> = ({ filterId, children }) => (
+  <>
+    {children}
     <div
       style={{
-        position: "relative",
-        width: "100%",
-        height: "100vh",
-        background:
-          "repeating-conic-gradient(#e66465 0% 25%, #9198e5 0% 50%) 0 / 40px 40px",
+        width: 400,
+        height: 300,
+        backdropFilter: `url(#${filterId})`,
+        borderRadius: 20,
+        backgroundColor: "rgba(255, 255, 255, 0.15)",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
+        fontSize: 18,
+        fontWeight: 600,
+        color: "#333",
       }}
     >
-      {children(filterId)}
+      Refractive Glass
+    </div>
+  </>
+);
+
+/**
+ * Wrapper that renders a filter + a div with that filter applied, over a selectable background.
+ */
+export const FilterShowcase: React.FC<{
+  background?: BackgroundType;
+  children: (id: string) => React.ReactNode;
+}> = ({ background = "article", children }) => {
+  const filterId = useId();
+
+  const glass = <GlassPane filterId={filterId}>{children(filterId)}</GlassPane>;
 
+  if (background === "checkerboard") {
+    return (
       <div
         style={{
-          width: 400,
-          height: 300,
-          backdropFilter: `url(#${filterId})`,
-          borderRadius: 20,
-          backgroundColor: "rgba(255, 255, 255, 0.15)",
+          position: "relative",
+          width: "100%",
+          height: "100vh",
+          background:
+            "repeating-conic-gradient(#e66465 0% 25%, #9198e5 0% 50%) 0 / 40px 40px",
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          fontSize: 18,
-          fontWeight: 600,
-          color: "#333",
         }}
       >
-        Refractive Glass
+        {glass}
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ position: "relative" }}>
+      <div
+        style={{
+          position: "sticky",
+          top: "50%",
+          transform: "translateY(-50%)",
+          display: "flex",
+          justifyContent: "center",
+          zIndex: 1,
+          pointerEvents: "none",
+        }}
+      >
+        <div style={{ pointerEvents: "auto" }}>{glass}</div>
       </div>
+      <ExampleArticle />
     </div>
   );
 };