Floating Header

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 {
8  motion,
9  useScroll,
10  useTransform,
11  useSpring,
12  useMotionTemplate,
13  type HTMLMotionProps,
14} from 'motion/react';
15import * as React from 'react';
16 
17const floatingHeaderVariants = cva('sticky z-50 flex items-center mx-auto', {
18  variants: {
19    intent: {
20      primary: 'text-primary-foreground bg-primary border-primary',
21      accent: 'text-accent-foreground bg-accent border-accent',
22      secondary: 'text-secondary-foreground bg-secondary border-secondary',
23      success: 'text-success-foreground bg-success border-success',
24      warning: 'text-warning-foreground bg-warning border-warning',
25      error: 'text-error-foreground bg-error border-error',
26      info: 'text-info-foreground bg-info border-info',
27      neutral: 'text-foreground bg-background border-border',
28    },
29    styling: {
30      solid: 'border-none',
31      outline: 'border border-2 bg-background',
32      glass: 'backdrop-blur-md border-none',
33    },
34    size: {
35      sm: 'px-4 py-2 text-sm gap-2',
36      md: 'px-6 py-3 text-sm gap-3',
37      lg: 'px-8 py-4 text-base gap-4',
38    },
39  },
40  compoundVariants: [
41    { intent: 'primary', styling: 'outline', className: 'text-primary' },
42    { intent: 'accent', styling: 'outline', className: 'text-accent' },
43    { intent: 'secondary', styling: 'outline', className: 'text-secondary' },
44    { intent: 'success', styling: 'outline', className: 'text-success' },
45    { intent: 'warning', styling: 'outline', className: 'text-warning' },
46    { intent: 'error', styling: 'outline', className: 'text-error' },
47    { intent: 'info', styling: 'outline', className: 'text-info' },
48    { intent: 'neutral', styling: 'outline', className: 'text-foreground' },
49    { styling: 'glass', intent: 'primary', className: 'bg-primary/60' },
50    { styling: 'glass', intent: 'accent', className: 'bg-accent/60' },
51    { styling: 'glass', intent: 'secondary', className: 'bg-secondary/60' },
52    { styling: 'glass', intent: 'success', className: 'bg-success/60' },
53    { styling: 'glass', intent: 'warning', className: 'bg-warning/60' },
54    { styling: 'glass', intent: 'error', className: 'bg-error/60' },
55    { styling: 'glass', intent: 'info', className: 'bg-info/60' },
56    { styling: 'glass', intent: 'neutral', className: 'bg-background/60' },
57  ],
58  defaultVariants: {
59    intent: 'neutral',
60    styling: 'glass',
61// … truncated