scroll-fade-effect-block-01

1import * as React from "react";
2 
3import { Separator } from "@/components/ui/separator";
4import { ScrollFadeEffect } from "@/registry/scroll-fade-effect";
5 
6const tags = Array.from({ length: 50 }).map(
7  (_, i, a) => `v1.2.0-beta.${a.length - i}`
8);
9 
10export default function ScrollFadeEffectDemo() {
11  return (
12    <div className="rounded-lg border">
13      <ScrollFadeEffect className="h-72 w-48">
14        <div className="p-4">
15          <h4 className="mb-4 text-sm leading-none font-medium">Tags</h4>
16          {tags.map((tag) => (
17            <React.Fragment key={tag}>
18              <div className="text-sm">{tag}</div>
19              <Separator className="my-2" />
20            </React.Fragment>
21          ))}
22        </div>
23      </ScrollFadeEffect>
24    </div>
25  );
26}