distorted-glass-demo

1"use client"
2 
3import { useRef } from "react"
4import { motion, useScroll, useTransform } from "motion/react"
5 
6import { DistortedGlass } from "@/registry/default/ui/distorted-glass"
7 
8export default function DistortedGlassDemo() {
9  const containerRef = useRef<HTMLDivElement>(null)
10  const { scrollYProgress } = useScroll({
11    target: containerRef,
12    offset: ["start start", "end end"],
13  })
14 
15  // Transform values for parallax effects
16  const parallaxY = useTransform(scrollYProgress, [0, 1], [0, -200])
17  const parallaxYSlow = useTransform(scrollYProgress, [0, 1], [0, -100])
18  const parallaxYFast = useTransform(scrollYProgress, [0, 1], [0, -300])
19 
20  return (
21    <div className="relative h-screen flex flex-col overflow-hidden">
22      {/* Fixed Distorted Glass Header */}
23 
24      {/* Scrollable Content Area - Content scrolls behind the glass */}
25      <div ref={containerRef} className="flex-1 overflow-y-auto pt-[50px]">
26        <div className="w-full absolute  top-0 left-0 right-0 -mt-[1px]">
27          <DistortedGlass className="h-48 w-full" />
28        </div>
29        {/* Section 1: Large Moving Text - Easy to see distortion */}
30        <section className="relative h-96 flex items-center justify-center bg-gradient-to-br from-primary/20 via-primary/10 to-transparent">
31          <div className="absolute inset-0 overflow-hidden">
32            <motion.div
33              className="absolute top-20 left-10 text-8xl font-black text-primary/30 select-none"
34              style={{ y: parallaxY }}
35              animate={{
36                x: [0, 50, 0],
37              }}
38              transition={{
39                duration: 8,
40                repeat: Infinity,
41                ease: "easeInOut",
42              }}
43            >
44              DISTORTED
45            </motion.div>
46            <motion.div
47              className="absolute top-40 right-10 text-8xl font-black text-primary/30 select-none"
48              style={{ y: parallaxYSlow }}
49              animate={{
50                x: [0, -50, 0],
51              }}
52              transition={{
53                duration: 10,
54                repeat: Infinity,
55                ease: "easeInOut",
56              }}
57            >
58              GLASS
59            </motion.div>
60          </div>
61        </section>
62 
63        {/* Section 2: Grid of Moving Squares */}
64        <section className="relative h-[700px] flex items-center justify-center bg-gradient-to-br from-transparent via-primary/10 to-primary/20">
65// … truncated