@inklu/docs 0.2.0

package/src/components/motion-primitives/text-effect.tsx

@@ -0,0 +1,290 @@
+"use client";
+import type {
+  TargetAndTransition,
+  Transition,
+  Variant,
+  Variants,
+} from "motion/react";
+import { AnimatePresence, motion } from "motion/react";
+import React from "react";
+import { cn } from "@/lib/utils";
+
+export type PresetType = "blur" | "fade-in-blur" | "scale" | "fade" | "slide";
+
+export type PerType = "word" | "char" | "line";
+
+export type TextEffectProps = {
+  children: string;
+  per?: PerType;
+  as?: keyof React.JSX.IntrinsicElements;
+  variants?: {
+    container?: Variants;
+    item?: Variants;
+  };
+  className?: string;
+  preset?: PresetType;
+  delay?: number;
+  speedReveal?: number;
+  speedSegment?: number;
+  trigger?: boolean;
+  onAnimationComplete?: () => void;
+  onAnimationStart?: () => void;
+  segmentWrapperClassName?: string;
+  containerTransition?: Transition;
+  segmentTransition?: Transition;
+  style?: React.CSSProperties;
+};
+
+const defaultStaggerTimes: Record<PerType, number> = {
+  char: 0.03,
+  word: 0.05,
+  line: 0.1,
+};
+
+const defaultContainerVariants: Variants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.05,
+    },
+  },
+  exit: {
+    transition: { staggerChildren: 0.05, staggerDirection: -1 },
+  },
+};
+
+const defaultItemVariants: Variants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+  },
+  exit: { opacity: 0 },
+};
+
+const presetVariants: Record<
+  PresetType,
+  { container: Variants; item: Variants }
+> = {
+  blur: {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { opacity: 0, filter: "blur(12px)" },
+      visible: { opacity: 1, filter: "blur(0px)" },
+      exit: { opacity: 0, filter: "blur(12px)" },
+    },
+  },
+  "fade-in-blur": {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { opacity: 0, y: 8, filter: "blur(12px)" },
+      visible: { opacity: 1, y: 0, filter: "blur(0px)" },
+      exit: { opacity: 0, y: 8, filter: "blur(12px)" },
+    },
+  },
+  scale: {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { opacity: 0, scale: 0.95 },
+      visible: { opacity: 1, scale: 1 },
+      exit: { opacity: 0, scale: 0.95 },
+    },
+  },
+  fade: {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { opacity: 0 },
+      visible: { opacity: 1 },
+      exit: { opacity: 0 },
+    },
+  },
+  slide: {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { opacity: 0, y: 8 },
+      visible: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: 8 },
+    },
+  },
+};
+
+const AnimationComponent: React.FC<{
+  segment: string;
+  variants: Variants;
+  per: "line" | "word" | "char";
+  segmentWrapperClassName?: string;
+}> = React.memo(({ segment, variants, per, segmentWrapperClassName }) => {
+  const content =
+    per === "line" ? (
+      <motion.span variants={variants} className="block">
+        {segment}
+      </motion.span>
+    ) : per === "word" ? (
+      <motion.span
+        aria-hidden="true"
+        variants={variants}
+        className="inline-block whitespace-pre"
+      >
+        {segment}
+      </motion.span>
+    ) : (
+      <motion.span className="inline-block whitespace-pre">
+        {segment.split("").map((char, charIndex) => (
+          <motion.span
+            // biome-ignore lint/suspicious/noArrayIndexKey: Characters are static and don't change order
+            key={`char-${charIndex}`}
+            aria-hidden="true"
+            variants={variants}
+            className="inline-block whitespace-pre"
+          >
+            {char}
+          </motion.span>
+        ))}
+      </motion.span>
+    );
+
+  if (!segmentWrapperClassName) {
+    return content;
+  }
+
+  const defaultWrapperClassName = per === "line" ? "block" : "inline-block";
+
+  return (
+    <span className={cn(defaultWrapperClassName, segmentWrapperClassName)}>
+      {content}
+    </span>
+  );
+});
+
+AnimationComponent.displayName = "AnimationComponent";
+
+const splitText = (text: string, per: PerType) => {
+  if (per === "line") return text.split("\n");
+  return text.split(/(\s+)/);
+};
+
+const hasTransition = (
+  variant?: Variant,
+): variant is TargetAndTransition & { transition?: Transition } => {
+  if (!variant) return false;
+  return typeof variant === "object" && "transition" in variant;
+};
+
+const createVariantsWithTransition = (
+  baseVariants: Variants,
+  transition?: Transition & { exit?: Transition },
+): Variants => {
+  if (!transition) return baseVariants;
+
+  const { exit: _, ...mainTransition } = transition;
+
+  return {
+    ...baseVariants,
+    visible: {
+      ...baseVariants.visible,
+      transition: {
+        ...(hasTransition(baseVariants.visible)
+          ? baseVariants.visible.transition
+          : {}),
+        ...mainTransition,
+      },
+    },
+    exit: {
+      ...baseVariants.exit,
+      transition: {
+        ...(hasTransition(baseVariants.exit)
+          ? baseVariants.exit.transition
+          : {}),
+        ...mainTransition,
+        staggerDirection: -1,
+      },
+    },
+  };
+};
+
+export function TextEffect({
+  children,
+  per = "word",
+  as = "p",
+  variants,
+  className,
+  preset = "fade",
+  delay = 0,
+  speedReveal = 1,
+  speedSegment = 1,
+  trigger = true,
+  onAnimationComplete,
+  onAnimationStart,
+  segmentWrapperClassName,
+  containerTransition,
+  segmentTransition,
+  style,
+}: TextEffectProps) {
+  const segments = splitText(children, per);
+  const MotionTag = motion[as as keyof typeof motion] as typeof motion.div;
+
+  const baseVariants = preset
+    ? presetVariants[preset]
+    : { container: defaultContainerVariants, item: defaultItemVariants };
+
+  const stagger = defaultStaggerTimes[per] / speedReveal;
+
+  const baseDuration = 0.3 / speedSegment;
+
+  const customStagger = hasTransition(variants?.container?.visible ?? {})
+    ? (variants?.container?.visible as TargetAndTransition).transition
+        ?.staggerChildren
+    : undefined;
+
+  const customDelay = hasTransition(variants?.container?.visible ?? {})
+    ? (variants?.container?.visible as TargetAndTransition).transition
+        ?.delayChildren
+    : undefined;
+
+  const computedVariants = {
+    container: createVariantsWithTransition(
+      variants?.container || baseVariants.container,
+      {
+        staggerChildren: customStagger ?? stagger,
+        delayChildren: customDelay ?? delay,
+        ...containerTransition,
+        exit: {
+          staggerChildren: customStagger ?? stagger,
+          staggerDirection: -1,
+        },
+      },
+    ),
+    item: createVariantsWithTransition(variants?.item || baseVariants.item, {
+      duration: baseDuration,
+      ...segmentTransition,
+    }),
+  };
+
+  return (
+    <AnimatePresence mode="popLayout">
+      {trigger && (
+        <MotionTag
+          initial="hidden"
+          animate="visible"
+          exit="exit"
+          variants={computedVariants.container}
+          className={className}
+          onAnimationComplete={onAnimationComplete}
+          onAnimationStart={onAnimationStart}
+          style={style}
+        >
+          {per !== "line" ? <span className="sr-only">{children}</span> : null}
+          {segments.map((segment, index) => (
+            <AnimationComponent
+              key={`${per}-${index}-${segment}`}
+              segment={segment}
+              variants={computedVariants.item}
+              per={per}
+              segmentWrapperClassName={segmentWrapperClassName}
+            />
+          ))}
+        </MotionTag>
+      )}
+    </AnimatePresence>
+  );
+}

package/src/components/motion-primitives/text-morph.tsx

@@ -0,0 +1,77 @@
+"use client";
+import {
+  AnimatePresence,
+  motion,
+  type Transition,
+  type Variants,
+} from "motion/react";
+import { useId, useMemo } from "react";
+import { cn } from "@/lib/utils";
+
+export type TextMorphProps = {
+  children: string;
+  as?: React.ElementType;
+  className?: string;
+  style?: React.CSSProperties;
+  variants?: Variants;
+  transition?: Transition;
+};
+
+export function TextMorph({
+  children,
+  as: Component = "p",
+  className,
+  style,
+  variants,
+  transition,
+}: TextMorphProps) {
+  const uniqueId = useId();
+
+  const characters = useMemo(() => {
+    const charCounts: Record<string, number> = {};
+
+    return children.split("").map((char) => {
+      const lowerChar = char.toLowerCase();
+      charCounts[lowerChar] = (charCounts[lowerChar] || 0) + 1;
+
+      return {
+        id: `${uniqueId}-${lowerChar}${charCounts[lowerChar]}`,
+        label: char === " " ? "\u00A0" : char,
+      };
+    });
+  }, [children, uniqueId]);
+
+  const defaultVariants: Variants = {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+  };
+
+  const defaultTransition: Transition = {
+    type: "spring",
+    bounce: 0,
+    duration: 0.3,
+  };
+
+  return (
+    <Component className={cn(className)} aria-label={children} style={style}>
+      <AnimatePresence mode="popLayout" initial={false}>
+        {characters.map((character) => (
+          <motion.span
+            key={character.id}
+            layoutId={character.id}
+            className="inline-block"
+            aria-hidden="true"
+            initial="initial"
+            animate="animate"
+            exit="exit"
+            variants={variants || defaultVariants}
+            transition={transition || defaultTransition}
+          >
+            {character.label}
+          </motion.span>
+        ))}
+      </AnimatePresence>
+    </Component>
+  );
+}

package/src/components/motion-primitives/text-scramble.tsx

@@ -0,0 +1,87 @@
+"use client";
+import { type MotionProps, motion } from "motion/react";
+import { type JSX, useEffect, useState } from "react";
+
+export type TextScrambleProps = {
+  children: string;
+  duration?: number;
+  speed?: number;
+  characterSet?: string;
+  as?: React.ElementType;
+  className?: string;
+  trigger?: boolean;
+  onScrambleComplete?: () => void;
+} & MotionProps;
+
+const defaultChars =
+  "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+
+export function TextScramble({
+  children,
+  duration = 0.8,
+  speed = 0.04,
+  characterSet = defaultChars,
+  className,
+  as: Component = "p",
+  trigger = true,
+  onScrambleComplete,
+  ...props
+}: TextScrambleProps) {
+  const MotionComponent = motion.create(
+    Component as keyof JSX.IntrinsicElements,
+  );
+  const [scrambledText, setScrambledText] = useState<string | null>(null);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const text = children;
+  const displayText = scrambledText ?? children;
+
+  const scramble = async () => {
+    if (isAnimating) return;
+    setIsAnimating(true);
+
+    const steps = duration / speed;
+    let step = 0;
+
+    const interval = setInterval(() => {
+      let scrambled = "";
+      const progress = step / steps;
+
+      for (let i = 0; i < text.length; i++) {
+        if (text[i] === " ") {
+          scrambled += " ";
+          continue;
+        }
+
+        if (progress * text.length > i) {
+          scrambled += text[i];
+        } else {
+          scrambled +=
+            characterSet[Math.floor(Math.random() * characterSet.length)];
+        }
+      }
+
+      setScrambledText(scrambled);
+      step++;
+
+      if (step > steps) {
+        clearInterval(interval);
+        setScrambledText(null);
+        setIsAnimating(false);
+        onScrambleComplete?.();
+      }
+    }, speed * 1000);
+  };
+
+  useEffect(() => {
+    if (!trigger) return;
+
+    scramble();
+    // biome-ignore lint/correctness/useExhaustiveDependencies: trigger controls the animation
+  }, [trigger, scramble]);
+
+  return (
+    <MotionComponent className={className} {...props}>
+      {displayText}
+    </MotionComponent>
+  );
+}

package/src/components/shared/command-block.tsx

@@ -0,0 +1,193 @@
+"use client";
+
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { anchoredToastManager } from "@/components/ui/toast";
+import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";
+import { cn } from "@/lib/utils";
+import { deny, tap } from "@/lib/utils/audio";
+import { TextMorph } from "../motion-primitives/text-morph";
+
+const SLIDE_SPRING = { type: "spring", stiffness: 520, damping: 34 } as const;
+
+const MORPH_EASE = { duration: 0.16, ease: "easeOut" } as const;
+
+export function CopyMorphIcon({ copied }: { copied: boolean }) {
+  const reduced = useReducedMotion() ?? false;
+  const t = reduced ? { duration: 0 } : MORPH_EASE;
+
+  return (
+    <span
+      aria-hidden="true"
+      className="relative grid size-3.5 place-items-center"
+    >
+      <AnimatePresence initial={false} mode="popLayout">
+        {copied ? (
+          <motion.svg
+            key="check"
+            aria-hidden="true"
+            width="15"
+            height="15"
+            viewBox="0 0 16 16"
+            fill="none"
+            className="absolute text-foreground"
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.8 }}
+            transition={t}
+          >
+            <motion.path
+              d="M1.83398 10.0625L6.00065 13.5L14.1673 2.5"
+              stroke="currentColor"
+              strokeWidth="1.25"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              initial={{ pathLength: reduced ? 1 : 0 }}
+              animate={{ pathLength: 1 }}
+              transition={
+                reduced ? { duration: 0 } : { duration: 0.18, ease: "easeOut" }
+              }
+            />
+          </motion.svg>
+        ) : (
+          <motion.svg
+            key="copy"
+            aria-hidden="true"
+            width="15"
+            height="15"
+            viewBox="0 0 16 16"
+            fill="none"
+            className="absolute"
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.8 }}
+            transition={t}
+          >
+            <path
+              d="M10.1667 3.16634H12.8334V14.1663H3.16675V3.16634H5.83341M5.83341 1.83301H10.1667V4.83301H5.83341V1.83301Z"
+              stroke="currentColor"
+              strokeWidth="1.25"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </motion.svg>
+        )}
+      </AnimatePresence>
+    </span>
+  );
+}
+
+export function CommandBlock({
+  items,
+}: {
+  items: { id: string; command: string }[];
+}) {
+  const [active, setActive] = useState(0);
+  const { copyToClipboard, isCopied } = useCopyToClipboard({ timeout: 2000 });
+  const reduced = useReducedMotion() ?? false;
+  const cur = items[active];
+  const copyButtonRef = useRef<HTMLButtonElement>(null);
+
+  const handleCopy = async () => {
+    const success = await copyToClipboard(cur.command);
+    if (success) {
+      tap();
+      anchoredToastManager.add({
+        title: "Copied!",
+        positionerProps: {
+          anchor: copyButtonRef.current,
+          sideOffset: 6,
+        },
+        data: {
+          tooltipStyle: true,
+        },
+        timeout: 2000,
+      });
+    } else {
+      deny();
+      anchoredToastManager.add({
+        title: "Failed to copy",
+        positionerProps: {
+          anchor: copyButtonRef.current,
+          sideOffset: 6,
+        },
+        data: {
+          tooltipStyle: true,
+        },
+        timeout: 2000,
+      });
+    }
+  };
+
+  return (
+    <div className="not-typeset mt-6 rounded-2xl border-0 bg-code overflow-hidden">
+      {items.length > 1 && (
+        <div className="flex items-center gap-0.5 px-3 pb-1.5 pt-3 justify-between">
+          <div className="flex items-center gap-0.5 ">
+            {items.map((it, i) => {
+              const isActive = i === active;
+              return (
+                <button
+                  key={it.id}
+                  type="button"
+                  onClick={() => setActive(i)}
+                  className={cn(
+                    "relative cursor-pointer rounded-md px-1.5 py-0.5 font-mono outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring",
+                    isActive
+                      ? "text-foreground"
+                      : "text-muted-foreground hover:bg-accent hover:text-foreground",
+                  )}
+                >
+                  {isActive && (
+                    <motion.span
+                      aria-hidden="true"
+                      layoutId="pkg-tab-active"
+                      transition={reduced ? { duration: 0 } : SLIDE_SPRING}
+                      className="absolute inset-0 rounded-md bg-accent"
+                    />
+                  )}
+                  <span className="relative">{it.id}</span>
+                </button>
+              );
+            })}
+          </div>
+          <Button
+            ref={copyButtonRef}
+            variant="ghost"
+            size="icon"
+            onClick={handleCopy}
+            className="ml-auto text-muted-foreground hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring"
+            title="Copy to clipboard"
+            aria-label="Copy install command"
+          >
+            <CopyMorphIcon copied={isCopied} />
+          </Button>
+        </div>
+      )}
+
+      <div className="flex items-center">
+        <div className="flex-1 overflow-x-auto">
+          <pre className="flex items-center overflow-x-auto px-5 py-4 font-mono text-foreground">
+            <code>
+              <TextMorph>{cur.command}</TextMorph>
+            </code>
+          </pre>
+        </div>
+        {items.length === 1 && (
+          <Button
+            ref={copyButtonRef}
+            variant="ghost"
+            size="icon-sm"
+            onClick={handleCopy}
+            className="mr-2 text-muted-foreground hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring"
+            title="Copy to clipboard"
+            aria-label="Copy install command"
+          >
+            <CopyMorphIcon copied={isCopied} />
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/shared/scroll-fade.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export function ScrollFade() {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => setVisible(window.scrollY > 50);
+    handleScroll();
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  return (
+    <div
+      className={`pointer-events-none fixed inset-x-0 top-0 z-(--z-scroll-fade) h-20 bg-gradient-to-b from-background to-transparent transition-opacity duration-300 ${
+        visible ? "opacity-100" : "opacity-0"
+      }`}
+    />
+  );
+}