fix(glass): stabilize optical rendering and page presentation (#595)

src/components/theme/GlassOpticalLayer.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ThemeCustomizerGlassAppearance, ThemeCustomizerGlassQuality } from '@/composables/useThemeCustomizer'
+import { usePagePresentationMotion } from '@/composables/usePagePresentationMotion'
 import {
   setGlassRendererState,
   useGlassOpticalInteractionSource,
@@ -47,6 +48,7 @@ const emit = defineEmits<{
 const fixedCanvas = ref<HTMLCanvasElement | null>(null)
 const scrollCanvas = ref<HTMLCanvasElement | null>(null)
 const interactionSource = useGlassOpticalInteractionSource()
+const pagePresentationMotion = usePagePresentationMotion()
 const fixedRenderer = useGlassOpticalRenderer({
   active: true,
   appearance: () => props.appearance,
@@ -76,6 +78,7 @@ const scrollRenderer = useGlassOpticalRenderer({
   deformationStrength: () => props.deformationStrength,
   flowStrength: () => props.flowStrength,
   interactionSource,
+  pageMotion: pagePresentationMotion.reader,
   quality: () => props.quality,
   reflectionStrength: () => props.reflectionStrength,
   transparencyStrength: () => props.transparencyStrength,

src/components/theme/__tests__/GlassOpticalLayer.spec.ts

@@ -53,6 +53,13 @@ describe('GlassOpticalLayer', () => {
     expect(rendererCalls.map(options => options.surfaceSpace)).toEqual(['fixed', 'scroll'])
     expect(rendererCalls.every(options => options.interactionSource === interactionSource)).toBe(true)
     expect(rendererCalls.every(options => options.syncDocumentState === false)).toBe(true)
+    expect(rendererCalls[0].pageMotion).toBeUndefined()
+    expect(rendererCalls[1].pageMotion).toEqual(
+      expect.objectContaining({
+        opacity: expect.any(Object),
+        revision: expect.any(Object),
+      }),
+    )
 
     wrapper.unmount()
     expect(setRendererState).toHaveBeenLastCalledWith(expect.any(Object), 'fallback')