+
+ );
+ }
+);
diff --git a/src/components/primitives/masonry.tsx b/src/components/primitives/masonry.tsx
new file mode 100644
index 0000000..9c5cf85
--- /dev/null
+++ b/src/components/primitives/masonry.tsx
@@ -0,0 +1,55 @@
+import type React from "react";
+import { useMemo } from "react";
+import BlurFade from "@/components/ui/blur-fade";
+
+interface MasonryProps
+ {items.map((item, idx) => (
+
+
+ ))}
+
+ {renderItem(item, idx)}
+
+
+ );
+};
+
+export { ProgressiveBlur, Skiper41 };
+
+/**
+ * Skiper 41 Canvas_Landing_004 — React + framer motion
+ * Inspired by and adapted from https://devouringdetails.com/
+ * We respect the original creators. This is an inspired rebuild with our own taste and does not claim any ownership.
+ * These animations aren’t associated with the devouringdetails.com . They’re independent recreations meant to study interaction design
+ *
+ * License & Usage:
+ * - Free to use and modify in both personal and commercial projects.
+ * - Attribution to Skiper UI is required when using the free version.
+ * - No attribution required with Skiper UI Pro.
+ *
+ * Feedback and contributions are welcome.
+ *
+ * Author: @gurvinder-singh02
+ * Website: https://gxuri.in
+ * Twitter: https://x.com/Gur__vi
+ */
diff --git a/src/components/primitives/prose.tsx b/src/components/primitives/prose.tsx
new file mode 100644
index 0000000..2d37702
--- /dev/null
+++ b/src/components/primitives/prose.tsx
@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from "react";
+import { FontProvider } from "@/components/providers/font-provider";
+import { cn } from "@/lib/utils";
+
+interface ProseProps extends HTMLAttributes
+
+
+
+ Scroll down to see the effect
+
+
+
+
+ {Array.from({ length: 10 }).map((_, index) => (
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ Obcaecati, reiciendis eum vitae nostrum, temporibus repudiandae
+ voluptatibus, natus iure ipsa velit odit quibusdam illum. Quaerat
+ cumque laudantium libero reprehenderit perferendis quo nulla
+ voluptate? Repellat tenetur labore exercitationem dicta libero
+ voluptate suscipit, iusto ea assumenda. Ipsa enim, quidem atque
+ modi error eaque, debitis perferendis, hic iste libero dignissimos
+ ea! Quod inventore beatae aspernatur nulla rem perferendis aperiam
+ at debitis delectus odit quia animi ex mollitia vero molestias
+ itaque deleniti, quos exercitationem consequatur assumenda dolor?
+ Quod reiciendis in similique reprehenderit commodi quo blanditiis
+ nobis hic ea optio illum placeat officia alias quasi autem earum
+ quos obcaecati, voluptatum corporis quisquam. Quisquam iste, quas
+ explicabo omnis harum aut quam adipisci, voluptatem saepe
+ accusantium doloribus repellendus amet culpa magnam ex et dolores
+ accusamus commodi facere aliquam voluptatum alias? Officia
+ expedita ut vel? Beatae deserunt sequi id eos libero suscipit
+ totam cum, sed architecto atque quisquam et incidunt quod fuga
+ ullam repellat assumenda quos ab, voluptatum sint nesciunt? Ad
+ sapiente est laborum quam sint eius sequi. Eum, veniam
+ dignissimos.
+
+ ))}
+
+
+ );
+};
+
+export { ScrollFade };
diff --git a/src/components/primitives/shortcut-display.tsx b/src/components/primitives/shortcut-display.tsx
new file mode 100644
index 0000000..b22756d
--- /dev/null
+++ b/src/components/primitives/shortcut-display.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import * as React from "react";
+import { type ShortcutActionType, shortcutConfig } from "@/config/keyboard-shortcuts";
+import { useIsMac } from "@/hooks/use-is-mac";
+import { cn } from "@/lib/utils";
+
+interface ShortcutDisplayProps {
+ action: ShortcutActionType;
+ className?: string;
+ /** Render as a different component, e.g., DropdownMenuShortcut */
+ as?: React.ElementType<{ children?: React.ReactNode; className?: string }>;
+ /** Base styles to apply, defaults to kbd styles */
+ baseClassName?: string;
+}
+
+// Default styles mimicking Shadcn kbd
+const defaultKbdStyles =
+ "h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium";
+
+/**
+ * Finds the primary shortcut string for a given action.
+ * Ignores alternatives like '/' for OPEN_SEARCH.
+ */
+function findPrimaryShortcut(action: ShortcutActionType): string | null {
+ for (const [shortcut, act] of shortcutConfig) {
+ if (act === action) {
+ // Basic heuristic: prefer shortcuts with modifiers
+ if (
+ shortcut.includes("mod+") ||
+ shortcut.includes("shift+") ||
+ shortcut.includes("alt+") ||
+ shortcut.includes("ctrl+")
+ ) {
+ return shortcut;
+ }
+ // If no modified shortcut found yet, keep track of the first simple one
+ if (!shortcut.includes("+ ")) return shortcut; // Return simple keys like 'Escape' or '/'
+ }
+ }
+ // Fallback to the first match if no modified shortcut found
+ const firstMatch = shortcutConfig.find(([, act]) => act === action);
+ return firstMatch ? firstMatch[0] : null;
+}
+
+/**
+ * Parses a shortcut string (e.g., "mod+shift+K") into display parts.
+ */
+function parseShortcut(shortcut: string, isMac: boolean): string[] {
+ return shortcut.split("+").map((part) => {
+ switch (part.toLowerCase()) {
+ case "mod":
+ return isMac ? "⌘" : "Ctrl";
+ case "shift":
+ return isMac ? "⇧" : "Shift";
+ case "alt":
+ return isMac ? "⌥" : "Alt";
+ case "ctrl":
+ return "Ctrl";
+ case "enter":
+ return "Enter"; // Or maybe an icon?
+ case "escape":
+ return "Esc";
+ default:
+ return part.toUpperCase(); // Return the key itself, capitalized
+ }
+ });
+}
+
+export const ShortcutDisplay = ({
+ action,
+ className,
+ as: Component = "kbd", // Default to HTML kbd tag
+ baseClassName = defaultKbdStyles,
+}: ShortcutDisplayProps) => {
+ const isMac = useIsMac();
+ const primaryShortcut = findPrimaryShortcut(action);
+
+ if (!primaryShortcut) {
+ console.warn(`ShortcutDisplay: No shortcut found for action: ${action}`);
+ return null; // Don't render if no shortcut is defined
+ }
+
+ const parts = parseShortcut(primaryShortcut, isMac);
+
+ // For single keys like '/', just render the key without special styling
+ if (parts.length === 1 && primaryShortcut.length === 1) {
+ // Use baseClassName only if Component is kbd, otherwise just className
+ const finalClassName = Component === "kbd" ? cn(baseClassName, className) : className;
+ return
+
+ see the fade while scroll
+
+
+
+
+
+
+
+ {Array.from({ length: 11 }).map((_, index) => (
+
+
+ 00{index}
+
+ ))}
+