+
{children}
);
};
-const BentoCard = ({
- name,
+export const BentoGridItem = ({
className,
- background,
- Icon,
+ title,
description,
- href,
- cta,
+ header,
+ icon,
}: {
- name: string;
- className: string;
- background: ReactNode;
- Icon: any;
- description: string;
- href: string;
- cta: string;
-}) => (
-
-
{background}
-
-
-
{name}
-
{description}
-
-
+ className?: string;
+ title?: string | React.ReactNode;
+ description?: string | React.ReactNode;
+ header?: React.ReactNode;
+ icon?: React.ReactNode;
+}) => {
+ return (
-
+ {header}
+
+ {icon}
+
+ {title}
+
+
+ {description}
+
+
-
-
-);
-
-export { BentoCard, BentoGrid };
+ );
+};
diff --git a/packages/shadcn/src/components/ui/blur-fade.tsx b/packages/shadcn/src/components/ui/blur-fade.tsx
deleted file mode 100644
index 6b452be..0000000
--- a/packages/shadcn/src/components/ui/blur-fade.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-'use client';
-
-import { AnimatePresence, motion, useInView, UseInViewOptions, Variants } from 'framer-motion';
-import { useRef } from 'react';
-
-type MarginType = UseInViewOptions['margin'];
-
-interface BlurFadeProps {
- children: React.ReactNode;
- className?: string;
- variant?: {
- hidden: { y: number };
- visible: { y: number };
- };
- duration?: number;
- delay?: number;
- yOffset?: number;
- inView?: boolean;
- inViewMargin?: MarginType;
- blur?: string;
-}
-
-export default function BlurFade({
- children,
- className,
- variant,
- duration = 0.4,
- delay = 0,
- yOffset = 6,
- inView = false,
- inViewMargin = '-50px',
- blur = '6px',
-}: BlurFadeProps) {
- const ref = useRef(null);
- const inViewResult = useInView(ref, { once: true, margin: inViewMargin });
- const isInView = !inView || inViewResult;
- const defaultVariants: Variants = {
- hidden: { y: yOffset, opacity: 0, filter: `blur(${blur})` },
- visible: { y: -yOffset, opacity: 1, filter: `blur(0px)` },
- };
- const combinedVariants = variant || defaultVariants;
- return (
-
-
- {children}
-
-
- );
-}
diff --git a/packages/shadcn/src/components/ui/blur-in.tsx b/packages/shadcn/src/components/ui/blur-in.tsx
deleted file mode 100644
index fdefec6..0000000
--- a/packages/shadcn/src/components/ui/blur-in.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-'use client';
-
-import { motion } from 'framer-motion';
-
-import { cn } from '../../lib/utils';
-
-interface BlurIntProps {
- word: string;
- className?: string;
- variant?: {
- hidden: { filter: string; opacity: number };
- visible: { filter: string; opacity: number };
- };
- duration?: number;
-}
-const BlurIn = ({ word, className, variant, duration = 1 }: BlurIntProps) => {
- const defaultVariants = {
- hidden: { filter: 'blur(10px)', opacity: 0 },
- visible: { filter: 'blur(0px)', opacity: 1 },
- };
- const combinedVariants = variant || defaultVariants;
-
- return (
-
- {word}
-
- );
-};
-
-export default BlurIn;
diff --git a/packages/shadcn/src/components/ui/border-beam.tsx b/packages/shadcn/src/components/ui/border-beam.tsx
deleted file mode 100644
index bbcf308..0000000
--- a/packages/shadcn/src/components/ui/border-beam.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { cn } from '../../lib/utils';
-
-interface BorderBeamProps {
- className?: string;
- size?: number;
- duration?: number;
- borderWidth?: number;
- anchor?: number;
- colorFrom?: string;
- colorTo?: string;
- delay?: number;
-}
-
-export const BorderBeam = ({
- className,
- size = 200,
- duration = 15,
- anchor = 90,
- borderWidth = 1.5,
- colorFrom = '#ffaa40',
- colorTo = '#9c40ff',
- delay = 0,
-}: BorderBeamProps) => {
- return (
-
- );
-};
diff --git a/packages/shadcn/src/components/ui/box-reveal.tsx b/packages/shadcn/src/components/ui/box-reveal.tsx
deleted file mode 100644
index fafc06e..0000000
--- a/packages/shadcn/src/components/ui/box-reveal.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-'use client';
-
-import { motion, useAnimation, useInView } from 'framer-motion';
-import { useEffect, useRef } from 'react';
-
-interface BoxRevealProps {
- children: JSX.Element;
- width?: 'fit-content' | '100%';
- boxColor?: string;
- duration?: number;
-}
-
-export const BoxReveal = ({
- children,
- width = 'fit-content',
- boxColor,
- duration,
-}: BoxRevealProps) => {
- const mainControls = useAnimation();
- const slideControls = useAnimation();
-
- const ref = useRef(null);
- const isInView = useInView(ref, { once: true });
-
- useEffect(() => {
- if (isInView) {
- slideControls.start('visible');
- mainControls.start('visible');
- } else {
- slideControls.start('hidden');
- mainControls.start('hidden');
- }
- }, [isInView, mainControls, slideControls]);
-
- return (
-
-
- {children}
-
-
-
-
- );
-};
-
-export default BoxReveal;
diff --git a/packages/shadcn/src/components/ui/breadcrumb.tsx b/packages/shadcn/src/components/ui/breadcrumb.tsx
index a84befb..e137796 100644
--- a/packages/shadcn/src/components/ui/breadcrumb.tsx
+++ b/packages/shadcn/src/components/ui/breadcrumb.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
import { ChevronRightIcon, DotsHorizontalIcon } from '@radix-ui/react-icons';
import { Slot } from '@radix-ui/react-slot';
import * as React from 'react';
diff --git a/packages/shadcn/src/components/ui/button.tsx b/packages/shadcn/src/components/ui/button.tsx
index b50d59a..1891099 100644
--- a/packages/shadcn/src/components/ui/button.tsx
+++ b/packages/shadcn/src/components/ui/button.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
import { Slot } from '@radix-ui/react-slot';
import { cva, type VariantProps } from 'class-variance-authority';
import * as React from 'react';
diff --git a/packages/shadcn/src/components/ui/calendar.tsx b/packages/shadcn/src/components/ui/calendar.tsx
index 8013173..de65810 100644
--- a/packages/shadcn/src/components/ui/calendar.tsx
+++ b/packages/shadcn/src/components/ui/calendar.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
'use client';
import * as React from 'react';
diff --git a/packages/shadcn/src/components/ui/canvas-reveal-effect.tsx b/packages/shadcn/src/components/ui/canvas-reveal-effect.tsx
new file mode 100644
index 0000000..b72f5eb
--- /dev/null
+++ b/packages/shadcn/src/components/ui/canvas-reveal-effect.tsx
@@ -0,0 +1,278 @@
+// @ts-nocheck
+'use client';
+import { Canvas, useFrame, useThree } from '@react-three/fiber';
+import React, { useMemo, useRef } from 'react';
+import * as THREE from 'three';
+import { cn } from '../../lib/utils';
+
+export const CanvasRevealEffect = ({
+ animationSpeed = 0.4,
+ opacities = [0.3, 0.3, 0.3, 0.5, 0.5, 0.5, 0.8, 0.8, 0.8, 1],
+ colors = [[0, 255, 255]],
+ containerClassName,
+ dotSize,
+ showGradient = true,
+}: {
+ /**
+ * 0.1 - slower
+ * 1.0 - faster
+ */
+ animationSpeed?: number;
+ opacities?: number[];
+ colors?: number[][];
+ containerClassName?: string;
+ dotSize?: number;
+ showGradient?: boolean;
+}) => {
+ return (
+
+
+
+
+ {showGradient &&
}
+
+ );
+};
+
+interface DotMatrixProps {
+ colors?: number[][];
+ opacities?: number[];
+ totalSize?: number;
+ dotSize?: number;
+ shader?: string;
+ center?: ('x' | 'y')[];
+}
+
+const DotMatrix: React.FC
= ({
+ colors = [[0, 0, 0]],
+ opacities = [0.04, 0.04, 0.04, 0.04, 0.04, 0.08, 0.08, 0.08, 0.08, 0.14],
+ totalSize = 4,
+ dotSize = 2,
+ shader = '',
+ center = ['x', 'y'],
+}) => {
+ const uniforms = React.useMemo(() => {
+ let colorsArray = [colors[0], colors[0], colors[0], colors[0], colors[0], colors[0]];
+ if (colors.length === 2) {
+ colorsArray = [colors[0], colors[0], colors[0], colors[1], colors[1], colors[1]];
+ } else if (colors.length === 3) {
+ colorsArray = [colors[0], colors[0], colors[1], colors[1], colors[2], colors[2]];
+ }
+
+ return {
+ u_colors: {
+ value: colorsArray.map((color) => [color[0] / 255, color[1] / 255, color[2] / 255]),
+ type: 'uniform3fv',
+ },
+ u_opacities: {
+ value: opacities,
+ type: 'uniform1fv',
+ },
+ u_total_size: {
+ value: totalSize,
+ type: 'uniform1f',
+ },
+ u_dot_size: {
+ value: dotSize,
+ type: 'uniform1f',
+ },
+ };
+ }, [colors, opacities, totalSize, dotSize]);
+
+ return (
+
+ );
+};
+
+type Uniforms = {
+ [key: string]: {
+ value: number[] | number[][] | number;
+ type: string;
+ };
+};
+const ShaderMaterial = ({
+ source,
+ uniforms,
+ maxFps = 60,
+}: {
+ source: string;
+ hovered?: boolean;
+ maxFps?: number;
+ uniforms: Uniforms;
+}) => {
+ const { size } = useThree();
+ const ref = useRef();
+ let lastFrameTime = 0;
+
+ useFrame(({ clock }) => {
+ if (!ref.current) return;
+ const timestamp = clock.getElapsedTime();
+ if (timestamp - lastFrameTime < 1 / maxFps) {
+ return;
+ }
+ lastFrameTime = timestamp;
+
+ const material: any = ref.current.material;
+ const timeLocation = material.uniforms.u_time;
+ timeLocation.value = timestamp;
+ });
+
+ const getUniforms = () => {
+ const preparedUniforms: any = {};
+
+ for (const uniformName in uniforms) {
+ const uniform: any = uniforms[uniformName];
+
+ switch (uniform.type) {
+ case 'uniform1f':
+ preparedUniforms[uniformName] = { value: uniform.value, type: '1f' };
+ break;
+ case 'uniform3f':
+ preparedUniforms[uniformName] = {
+ value: new THREE.Vector3().fromArray(uniform.value),
+ type: '3f',
+ };
+ break;
+ case 'uniform1fv':
+ preparedUniforms[uniformName] = { value: uniform.value, type: '1fv' };
+ break;
+ case 'uniform3fv':
+ preparedUniforms[uniformName] = {
+ value: uniform.value.map((v: number[]) => new THREE.Vector3().fromArray(v)),
+ type: '3fv',
+ };
+ break;
+ case 'uniform2f':
+ preparedUniforms[uniformName] = {
+ value: new THREE.Vector2().fromArray(uniform.value),
+ type: '2f',
+ };
+ break;
+ default:
+ console.error(`Invalid uniform type for '${uniformName}'.`);
+ break;
+ }
+ }
+
+ preparedUniforms['u_time'] = { value: 0, type: '1f' };
+ preparedUniforms['u_resolution'] = {
+ value: new THREE.Vector2(size.width * 2, size.height * 2),
+ }; // Initialize u_resolution
+ return preparedUniforms;
+ };
+
+ // Shader material
+ const material = useMemo(() => {
+ const materialObject = new THREE.ShaderMaterial({
+ vertexShader: `
+ precision mediump float;
+ in vec2 coordinates;
+ uniform vec2 u_resolution;
+ out vec2 fragCoord;
+ void main(){
+ float x = position.x;
+ float y = position.y;
+ gl_Position = vec4(x, y, 0.0, 1.0);
+ fragCoord = (position.xy + vec2(1.0)) * 0.5 * u_resolution;
+ fragCoord.y = u_resolution.y - fragCoord.y;
+ }
+ `,
+ fragmentShader: source,
+ uniforms: getUniforms(),
+ glslVersion: THREE.GLSL3,
+ blending: THREE.CustomBlending,
+ blendSrc: THREE.SrcAlphaFactor,
+ blendDst: THREE.OneFactor,
+ });
+
+ return materialObject;
+ }, [size.width, size.height, source]);
+
+ return (
+
+
+
+
+ );
+};
+
+const Shader: React.FC = ({ source, uniforms, maxFps = 60 }) => {
+ return (
+
+ );
+};
+interface ShaderProps {
+ source: string;
+ uniforms: {
+ [key: string]: {
+ value: number[] | number[][] | number;
+ type: string;
+ };
+ };
+ maxFps?: number;
+}
diff --git a/packages/shadcn/src/components/ui/card-hover-effect.tsx b/packages/shadcn/src/components/ui/card-hover-effect.tsx
new file mode 100644
index 0000000..c3f282e
--- /dev/null
+++ b/packages/shadcn/src/components/ui/card-hover-effect.tsx
@@ -0,0 +1,100 @@
+// @ts-nocheck
+import { AnimatePresence, motion } from 'framer-motion';
+import Link from 'next/link';
+import { useState } from 'react';
+import { cn } from '../../lib/utils';
+
+export const HoverEffect = ({
+ items,
+ className,
+}: {
+ items: {
+ title: string;
+ description: string;
+ link: string;
+ }[];
+ className?: string;
+}) => {
+ let [hoveredIndex, setHoveredIndex] = useState(null);
+
+ return (
+
+ {items.map((item, idx) => (
+
setHoveredIndex(idx)}
+ onMouseLeave={() => setHoveredIndex(null)}
+ >
+
+ {hoveredIndex === idx && (
+
+ )}
+
+
+ {item.title}
+ {item.description}
+
+
+ ))}
+
{children}
+ );
+};
+export const CardDescription = ({
+ className,
+ children,
+}: {
+ className?: string;
+ children: React.ReactNode;
+}) => {
+ return (
+
+ {children}
+
+ );
+};
diff --git a/packages/shadcn/src/components/ui/card-spotlight.tsx b/packages/shadcn/src/components/ui/card-spotlight.tsx
new file mode 100644
index 0000000..78aec40
--- /dev/null
+++ b/packages/shadcn/src/components/ui/card-spotlight.tsx
@@ -0,0 +1,71 @@
+// @ts-nocheck
+'use client';
+
+import { motion, useMotionTemplate, useMotionValue } from 'framer-motion';
+import React, { MouseEvent as ReactMouseEvent, useState } from 'react';
+import { cn } from '../../lib/utils';
+import { CanvasRevealEffect } from './canvas-reveal-effect';
+
+export const CardSpotlight = ({
+ children,
+ radius = 350,
+ color = '#262626',
+ className,
+ ...props
+}: {
+ radius?: number;
+ color?: string;
+ children: React.ReactNode;
+} & React.HTMLAttributes) => {
+ const mouseX = useMotionValue(0);
+ const mouseY = useMotionValue(0);
+ function handleMouseMove({ currentTarget, clientX, clientY }: ReactMouseEvent) {
+ let { left, top } = currentTarget.getBoundingClientRect();
+
+ mouseX.set(clientX - left);
+ mouseY.set(clientY - top);
+ }
+
+ const [isHovering, setIsHovering] = useState(false);
+ const handleMouseEnter = () => setIsHovering(true);
+ const handleMouseLeave = () => setIsHovering(false);
+ return (
+
+
+ {isHovering && (
+
+ )}
+
+ {children}
+
+ );
+};
diff --git a/packages/shadcn/src/components/ui/card-stack.tsx b/packages/shadcn/src/components/ui/card-stack.tsx
new file mode 100644
index 0000000..44c6843
--- /dev/null
+++ b/packages/shadcn/src/components/ui/card-stack.tsx
@@ -0,0 +1,70 @@
+'use client';
+import { motion } from 'framer-motion';
+import { useEffect, useState } from 'react';
+
+let interval: any;
+
+type Card = {
+ id: number;
+ name: string;
+ designation: string;
+ content: React.ReactNode;
+};
+
+export const CardStack = ({
+ items,
+ offset,
+ scaleFactor,
+}: {
+ items: Card[];
+ offset?: number;
+ scaleFactor?: number;
+}) => {
+ const CARD_OFFSET = offset || 10;
+ const SCALE_FACTOR = scaleFactor || 0.06;
+ const [cards, setCards] = useState(items);
+
+ useEffect(() => {
+ startFlipping();
+
+ return () => clearInterval(interval);
+ }, []);
+ const startFlipping = () => {
+ interval = setInterval(() => {
+ setCards((prevCards: Card[]) => {
+ const newArray = [...prevCards]; // create a copy of the array
+ newArray.unshift(newArray.pop()!); // move the last element to the front
+ return newArray;
+ });
+ }, 5000);
+ };
+
+ return (
+
+ {cards.map((card, index) => {
+ return (
+
+ {card.content}
+
+
{card.name}
+
+ {card.designation}
+
+
+ );
+ })}
+
- {code}
-
- );
- }
- };
- return (
-
-
-
-
-
-
- {filename}
- before
-
- {renderCode(beforeCode, highlightedBefore)}
-
-
-
-
- {filename}
- after
-
- {renderCode(afterCode, highlightedAfter)}
-
-
-
- VS
-
-
-
+
+
+
+
+
+
+
+ {showHandlebar && (
+
+
+
+ )}
+
+
+
+
+ {firstImage ? (
+
+ 
+
+ ) : null}
+
+
+
+
+ {secondImage ? (
+
+ ) : null}
+
+
- ))}
-
- +{numPeople}
-
-