-
-
Notifications
You must be signed in to change notification settings - Fork 40
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
✨ Add Font Effects category with Variable Font Cursor component and p…
…review (#75)
- Loading branch information
1 parent
dda443c
commit 97953bd
Showing
8 changed files
with
307 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import type { CategoryMetaType } from "@/lib/types/component"; | ||
| import { CaseSensitiveIcon } from "lucide-react"; | ||
|
|
||
| export const Category: CategoryMetaType = { | ||
| name: "Font Effects", | ||
| description: | ||
| "An all bunch of creative effects that can be used in any project with any artisitic style", | ||
| latestUpdateDate: new Date("2025-01-05"), | ||
| icon: CaseSensitiveIcon, | ||
| }; | ||
|
|
||
| export default Category; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| export default function () { | ||
| return ( | ||
| <div className="w-fit p-4 bg-neutral-400/15 rounded-xl flex flex-col justify-center items-center space-y-2"> | ||
| {/* 3 characters in <p> */} | ||
| <p className="inline text-neutral-500/70 text-lg font-medium tracking-wide"> | ||
| <span className="text-xl">c</span> | ||
| <span className="text-2xl">u</span> | ||
| <span className="text-3xl">i</span> | ||
| <span className="text-xl">c</span> | ||
| <span className="text-2xl">u</span> | ||
| <span className="text-3xl">i</span> | ||
| </p> | ||
|
|
||
| {/* Variable font preview bars */} | ||
| <div className="w-32 h-1 bg-neutral-400/40 rounded-full" /> | ||
| <div className="w-32 h-2 bg-neutral-400/40 rounded-full" /> | ||
| <div className="w-32 h-3 bg-neutral-400/40 rounded-full" /> | ||
| </div> | ||
| ); | ||
| } |
12 changes: 12 additions & 0 deletions
12
packages/ui/cuicui/other/font-effects/variable-font-cursor/component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import type { ComponentMetaType } from "@/lib/types/component"; | ||
|
|
||
| export const Component: ComponentMetaType = { | ||
| name: "Variable Font Cursor", | ||
| description: | ||
| "A cursor that changes its font size based on the cursor position", | ||
| inspiration: "Fancy Components", | ||
| inspirationLink: | ||
| "https://www.fancycomponents.dev/docs/components/text/variable-font-cursor-proximity", | ||
| }; | ||
|
|
||
| export default Component; |
40 changes: 40 additions & 0 deletions
40
packages/ui/cuicui/other/font-effects/variable-font-cursor/variable-font-cursor.variant.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| "use client"; | ||
| import { useRef } from "react"; | ||
|
|
||
| import { cn } from "@/cuicui/utils/cn"; | ||
| import { VariableFontCursorProximity } from "@/cuicui/other/font-effects/variable-font-cursor/variable-font-proximity"; | ||
|
|
||
| export function PreviewVariableFontCursor() { | ||
| const containerRef = useRef<HTMLDivElement>(null); | ||
|
|
||
| return ( | ||
| <div | ||
| className="dark:text-neutral-50 text-neutral-700 *:block" | ||
| ref={containerRef} | ||
| > | ||
| <VariableFontCursorProximity | ||
| className={cn("text-2xl md:text-3xl lg:text-4xl")} | ||
| radiusZoomingZone={200} | ||
| containerRef={containerRef} | ||
| > | ||
| This is | ||
| </VariableFontCursorProximity> | ||
| <VariableFontCursorProximity | ||
| className={cn("text-3xl md:text-4xl lg:text-5xl")} | ||
| radiusZoomingZone={200} | ||
| containerRef={containerRef} | ||
| > | ||
| inspired by | ||
| </VariableFontCursorProximity> | ||
| <VariableFontCursorProximity | ||
| className={cn("text-4xl md:text-5xl lg:text-6xl")} | ||
| radiusZoomingZone={200} | ||
| containerRef={containerRef} | ||
| > | ||
| Fancy components | ||
| </VariableFontCursorProximity> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default PreviewVariableFontCursor; |
182 changes: 182 additions & 0 deletions
182
packages/ui/cuicui/other/font-effects/variable-font-cursor/variable-font-proximity.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,182 @@ | ||
| "use client"; | ||
| import { type ComponentProps, type RefObject, useMemo, useRef } from "react"; | ||
| import { motion, useAnimationFrame } from "motion/react"; | ||
| import { useMouse } from "@/cuicui/hooks/use-mouse"; | ||
|
|
||
| interface TextProps { | ||
| children: string; | ||
| fromFontVariationSettings?: string; | ||
| toFontVariationSettings?: string; | ||
| containerRef: RefObject<HTMLDivElement | null>; | ||
| radiusZoomingZone?: number; | ||
| falloff?: "linear" | "exponential" | "gaussian"; | ||
| } | ||
|
|
||
| export const VariableFontCursorProximity = ({ | ||
| children, | ||
| fromFontVariationSettings = "'wght' 400, 'slnt' 0", | ||
| toFontVariationSettings = "'wght' 900, 'slnt' -10", | ||
| containerRef, | ||
| radiusZoomingZone = 50, | ||
| falloff = "linear", | ||
| className, | ||
| onClick, | ||
| ref, | ||
| ...props | ||
| }: TextProps & ComponentProps<"span">) => { | ||
| const letterRefs = useRef<(HTMLSpanElement | null)[]>([]); | ||
| const interpolatedSettingsRef = useRef<string[]>([]); | ||
|
|
||
| const [mousePosition, _] = useMouse(containerRef); | ||
|
|
||
| // Parse the font variation settings strings. see the docs or the demo on how one should look like | ||
| const parsedSettings = useMemo(() => { | ||
| const fromSettings = new Map( | ||
| fromFontVariationSettings | ||
| .split(",") | ||
| .map((s) => s.trim()) | ||
| .map((s) => { | ||
| const [name, value] = s.split(" "); | ||
| return [name.replace(/['"]/g, ""), Number.parseFloat(value)]; | ||
| }), | ||
| ); | ||
|
|
||
| const toSettings = new Map( | ||
| toFontVariationSettings | ||
| .split(",") | ||
| .map((s) => s.trim()) | ||
| .map((s) => { | ||
| const [name, value] = s.split(" "); | ||
| return [name.replace(/['"]/g, ""), Number.parseFloat(value)]; | ||
| }), | ||
| ); | ||
|
|
||
| return Array.from(fromSettings.entries()).map(([axis, fromValue]) => ({ | ||
| axis, | ||
| fromValue, | ||
| toValue: toSettings.get(axis) ?? fromValue, | ||
| })); | ||
| }, [fromFontVariationSettings, toFontVariationSettings]); | ||
|
|
||
| const calculateDistance = ( | ||
| x1: number, | ||
| y1: number, | ||
| x2: number, | ||
| y2: number, | ||
| ): number => { | ||
| return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2); | ||
| }; | ||
|
|
||
| const calculateFalloff = (distance: number): number => { | ||
| const normalizedDistance = Math.min( | ||
| Math.max(1 - distance / radiusZoomingZone, 0), | ||
| 1, | ||
| ); | ||
|
|
||
| switch (falloff) { | ||
| case "exponential": | ||
| return normalizedDistance ** 2; | ||
| case "gaussian": | ||
| return Math.exp(-((distance / (radiusZoomingZone / 2)) ** 2) / 2); | ||
| // case "linear": | ||
| default: | ||
| return normalizedDistance; | ||
| } | ||
| }; | ||
|
|
||
| useAnimationFrame(() => { | ||
| if (!containerRef.current) { | ||
| return; | ||
| } | ||
| const containerRect = containerRef.current.getBoundingClientRect(); | ||
|
|
||
| letterRefs.current.forEach((letterRef, index) => { | ||
| if (!(mousePosition.elementX && mousePosition.elementY)) { | ||
| return; | ||
| } | ||
| if (!letterRef) { | ||
| return; | ||
| } | ||
|
|
||
| const rect = letterRef.getBoundingClientRect(); | ||
| const letterCenterX = rect.left + rect.width / 2 - containerRect.left; | ||
| const letterCenterY = rect.top + rect.height / 2 - containerRect.top; | ||
|
|
||
| const distance = calculateDistance( | ||
| mousePosition.elementX, | ||
| mousePosition.elementY, | ||
| letterCenterX, | ||
| letterCenterY, | ||
| ); | ||
|
|
||
| if (distance >= radiusZoomingZone) { | ||
| if ( | ||
| letterRef.style.fontVariationSettings !== fromFontVariationSettings | ||
| ) { | ||
| letterRef.style.fontVariationSettings = fromFontVariationSettings; | ||
| } | ||
| return; | ||
| } | ||
|
|
||
| const falloffValue = calculateFalloff(distance); | ||
|
|
||
| const newSettings = parsedSettings | ||
| .map(({ axis, fromValue, toValue }) => { | ||
| const interpolatedValue = | ||
| fromValue + (toValue - fromValue) * falloffValue; | ||
| return `'${axis}' ${interpolatedValue}`; | ||
| }) | ||
| .join(", "); | ||
|
|
||
| interpolatedSettingsRef.current[index] = newSettings; | ||
| letterRef.style.fontVariationSettings = newSettings; | ||
| }); | ||
| }); | ||
|
|
||
| const words = children.split(" "); | ||
| let letterIndex = 0; | ||
|
|
||
| return ( | ||
| <span | ||
| ref={ref} | ||
| className={`${className} inline`} | ||
| onClick={onClick} | ||
| {...props} | ||
| > | ||
| {words.map((word, wordIndex) => ( | ||
| <span | ||
| // biome-ignore lint/suspicious/noArrayIndexKey: <explanation> | ||
| key={`${wordIndex}-letter-effect`} | ||
| className="inline-block whitespace-nowrap" | ||
| > | ||
| {word.split("").map((letter) => { | ||
| const currentLetterIndex = letterIndex++; | ||
| return ( | ||
| <motion.span | ||
| key={currentLetterIndex} | ||
| ref={(el: HTMLSpanElement | null) => { | ||
| letterRefs.current[currentLetterIndex] = el; | ||
| }} | ||
| className="inline-block" | ||
| aria-hidden="true" | ||
| style={{ | ||
| fontVariationSettings: | ||
| interpolatedSettingsRef.current[currentLetterIndex], | ||
| }} | ||
| > | ||
| {letter} | ||
| </motion.span> | ||
| ); | ||
| })} | ||
| {wordIndex < words.length - 1 && ( | ||
| <span className="inline-block"> </span> | ||
| )} | ||
| </span> | ||
| ))} | ||
| <span className="sr-only">{children}</span> | ||
| </span> | ||
| ); | ||
| }; | ||
|
|
||
| VariableFontCursorProximity.displayName = "VariableFontCursorProximity"; | ||
| export default VariableFontCursorProximity; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters