Parallax Reveal Section

1// Copyright (c) 2026 raouf.codes - Azemmur
2 
3'use client';
4 
5import { cn } from '@/lib/utils';
6import { cva, type VariantProps } from 'class-variance-authority';
7import * as React from 'react';
8 
9const parallaxRevealSectionVariants = cva('relative w-full sticky top-0 z-10', {
10  variants: {
11    intent: {
12      neutral: 'bg-background text-foreground',
13      primary: 'bg-primary text-primary-foreground',
14      accent: 'bg-accent text-accent-foreground',
15      secondary: 'bg-secondary text-secondary-foreground',
16      success: 'bg-success text-success-foreground',
17      info: 'bg-info text-info-foreground',
18      warning: 'bg-warning text-warning-foreground',
19      error: 'bg-error text-error-foreground',
20    },
21    shape: {
22      rounded: 'rounded-t-md',
23      sharp: 'rounded-none',
24    },
25  },
26  defaultVariants: {
27    intent: 'neutral',
28    shape: 'rounded',
29  },
30});
31 
32type ParallaxRevealSectionProps = React.ComponentPropsWithRef<'article'> &
33  VariantProps<typeof parallaxRevealSectionVariants> & {
34    hero?: React.ReactNode;
35  };
36 
37function ParallaxRevealSection({
38  className,
39  hero,
40  intent,
41  shape,
42  children,
43  ...props
44}: ParallaxRevealSectionProps) {
45  return (
46    <article
47      data-slot="parallax-reveal-section"
48      className={cn(
49        'relative w-full h-[100svh] overflow-y-auto',
50        '[&_[data-slot=parallax-reveal-section]]:h-auto [&_[data-slot=parallax-reveal-section]]:overflow-visible',
51        className,
52      )}
53      {...props}
54    >
55      <section
56        data-slot="parallax-reveal-hero"
57        className={cn(
58          `relative w-full sticky top-0 bg-background text-foreground`,
59          `[&_[data-slot=parallax-reveal-section]]:${parallaxRevealSectionVariants({ shape })}`,
60        )}
61      >
62        {hero}
63      </section>
64      <section
65        data-slot="parallax-reveal-content"
66        className={cn(parallaxRevealSectionVariants({ intent, shape }))}
67      >
68        {children}
69      </section>
70    </article>
71  );
72}
73 
74export {
75  ParallaxRevealSection,
76  parallaxRevealSectionVariants,
77  type ParallaxRevealSectionProps,
78};