Skip to content

Repository navigation

Remove unused UI components and font dependencies #79

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
thelight08 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Remove unused UI components and font dependencies #79

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d34fa1b
Merge pull request #22 from zeemscript/claude/codebase-review-pwgv0z
zeemscript Oct 6, 2026
e56d5e4
fix: address Parallax issue #10
thelight08 Oct 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 0 additions & 20 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 0 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,6 @@
"dependencies": {
"@fontsource-variable/inter": "^5.3.0",
"@fontsource-variable/jetbrains-mono": "^5.3.0",
"@fontsource-variable/plus-jakarta-sans": "^5.3.0",
"@fontsource/ibm-plex-mono": "^5.3.0",
"lucide-react": "^1.50.0",
"motion": "^13.5.1",
"react": "^19.3.0",
Expand Down
99 changes: 2 additions & 97 deletions src/components/bits/motion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@
* this project's design tokens and the `motion` runtime already in use.
*/
import {
useCallback, useEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode,
useEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode,
} from 'react';
import {
AnimatePresence, motion, useInView, useMotionValue, useSpring, useTransform,
AnimatePresence, motion, useInView, useMotionValue, useSpring,
} from 'motion/react';

const EASE = [0.2, 0.8, 0.2, 1] as const;
Expand Down Expand Up @@ -40,35 +40,11 @@ export function Aurora({ className = '' }: { className?: string }) {
);
}

/* ----------------------------------------------------------------- DotGrid */
/** Dot lattice that brightens around the cursor. */
export function DotGrid({ className = '' }: { className?: string }) {
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
const onMove = (e: PointerEvent) => {
const r = el.getBoundingClientRect();
el.style.setProperty('--mx', `${e.clientX - r.left}px`);
el.style.setProperty('--my', `${e.clientY - r.top}px`);
};
window.addEventListener('pointermove', onMove, { passive: true });
return () => window.removeEventListener('pointermove', onMove);
}, []);
return <div ref={ref} className={`bit-dotgrid ${className}`} aria-hidden="true" />;
}

/* ------------------------------------------------------------ GradientText */
export function GradientText({ children, className = '' }: { children: ReactNode; className?: string }) {
return <span className={`bit-gradient ${className}`}>{children}</span>;
}

/* --------------------------------------------------------------- ShinyText */
/** Light sweeps across the text on a loop. */
export function ShinyText({ children, className = '' }: { children: ReactNode; className?: string }) {
return <span className={`bit-shiny ${className}`}>{children}</span>;
}

/* ---------------------------------------------------------------- SplitText */
/** Reveals per word, staggered, once the element scrolls into view. */
export function SplitText({
Expand Down Expand Up @@ -139,30 +115,6 @@ export function CountUp({
);
}

/* ----------------------------------------------------------- SpotlightCard */
/** Radial highlight that tracks the cursor across the card. */
export function SpotlightCard({
children, className = '', as = 'div',
}: {
children: ReactNode; className?: string; as?: 'div' | 'article';
}) {
const ref = useRef<HTMLDivElement>(null);
const onMove = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
const el = ref.current;
if (!el) return;
const r = el.getBoundingClientRect();
el.style.setProperty('--sx', `${e.clientX - r.left}px`);
el.style.setProperty('--sy', `${e.clientY - r.top}px`);
}, []);
const Tag = as as 'div';
return (
<Tag ref={ref} className={`bit-spotlight ${className}`} onPointerMove={onMove}>
<span className="bit-spotlight-glow" aria-hidden="true" />
<span className="bit-spotlight-body">{children}</span>
</Tag>
);
}

/* -------------------------------------------------------------- StarBorder */
/** Conic gradient that travels around the border. */
export function StarBorder({
Expand Down Expand Up @@ -318,26 +270,6 @@ export function AnimatedContent({
);
}

/* ----------------------------------------------------------------- Marquee */
/** Seamless infinite strip. Content is duplicated so the loop never gaps. */
export function Marquee({
children, speed = 34, reverse = false, className = '',
}: {
children: ReactNode; speed?: number; reverse?: boolean; className?: string;
}) {
return (
<div className={`bit-marquee ${className}`}>
<div
className="bit-marquee-track"
style={{ animationDuration: `${speed}s`, animationDirection: reverse ? 'reverse' : 'normal' } as CSSProperties}
>
<div className="bit-marquee-set">{children}</div>
<div className="bit-marquee-set" aria-hidden="true">{children}</div>
</div>
</div>
);
}

/* -------------------------------------------------------------- GlareHover */
/** Diagonal sheen that sweeps once on hover. */
export function GlareHover({ children, className = '' }: { children: ReactNode; className?: string }) {
Expand All @@ -349,33 +281,6 @@ export function GlareHover({ children, className = '' }: { children: ReactNode;
);
}

/* ------------------------------------------------------------- TiltedCard */
/** Subtle 3D tilt following the pointer. */
export function TiltedCard({ children, className = '', max = 7 }: { children: ReactNode; className?: string; max?: number }) {
const ref = useRef<HTMLDivElement>(null);
const mx = useMotionValue(0);
const my = useMotionValue(0);
const rx = useSpring(useTransform(my, [-0.5, 0.5], [max, -max]), { stiffness: 220, damping: 20 });
const ry = useSpring(useTransform(mx, [-0.5, 0.5], [-max, max]), { stiffness: 220, damping: 20 });

return (
<motion.div
ref={ref}
className={className}
style={{ rotateX: rx, rotateY: ry, transformPerspective: 900 }}
onPointerMove={e => {
const r = ref.current?.getBoundingClientRect();
if (!r) return;
mx.set((e.clientX - r.left) / r.width - 0.5);
my.set((e.clientY - r.top) / r.height - 0.5);
}}
onPointerLeave={() => { mx.set(0); my.set(0); }}
>
{children}
</motion.div>
);
}

/* -------------------------------------------------------------- ScrollLine */
/** Reading-progress bar pinned to the top of the viewport. */
export function ScrollProgress() {
Expand Down
70 changes: 1 addition & 69 deletions src/styles/bits.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,21 +42,6 @@
@keyframes bit-drift-b { to { transform: translate3d(-11%, 8%, 0) scale(1.08); } }
@keyframes bit-drift-c { to { transform: translate3d(6%, -12%, 0) scale(1.16); } }

/* --------------------------------------------------------------- DotGrid */
.bit-dotgrid {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
--mx: 50%; --my: 50%;
background-image: radial-gradient(circle at center, var(--ink-4) 1px, transparent 1px);
background-size: 22px 22px;
opacity: .22;
-webkit-mask-image: radial-gradient(320px circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.35) 45%, transparent 78%);
mask-image: radial-gradient(320px circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.35) 45%, transparent 78%);
}
:root[data-theme='dark'] .bit-dotgrid { opacity: .4; }

/* ---------------------------------------------------------- GradientText */
.bit-gradient {
background: linear-gradient(96deg, var(--acc-3) 0%, var(--acc) 42%, var(--acc-2) 100%);
Expand All @@ -68,46 +53,10 @@
}
@keyframes bit-pan { to { background-position: 220% 0; } }

/* ------------------------------------------------------------- ShinyText */
.bit-shiny {
position: relative;
background: linear-gradient(110deg, var(--ink-3) 40%, var(--ink) 50%, var(--ink-3) 60%);
background-size: 250% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: bit-shine 4.5s linear infinite;
}
@keyframes bit-shine { to { background-position: -250% 0; } }

/* -------------------------------------------------------------- SplitText */
.bit-split-word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.bit-split-inner { display: inline-block; will-change: transform; }

/* ---------------------------------------------------------- SpotlightCard */
.bit-spotlight {
position: relative;
isolation: isolate;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--r3);
background: var(--panel);
--sx: 50%; --sy: 50%;
transition: border-color var(--base) var(--ease), transform var(--base) var(--ease);
}
.bit-spotlight:hover { border-color: var(--acc-line); transform: translateY(-2px); }
.bit-spotlight-glow {
position: absolute;
inset: 0;
z-index: 0;
opacity: 0;
pointer-events: none;
background: radial-gradient(260px circle at var(--sx) var(--sy), var(--acc-soft), transparent 72%);
transition: opacity var(--base) var(--ease);
}
.bit-spotlight:hover .bit-spotlight-glow { opacity: 1; }
.bit-spotlight-body { position: relative; z-index: 1; display: block; }

/* -------------------------------------------------------------- StarBorder */
.bit-starborder {
position: relative;
Expand Down Expand Up @@ -163,21 +112,6 @@
.bit-rotate-sizer { visibility: hidden; white-space: nowrap; }
.bit-rotate-word { position: absolute; inset: 0; white-space: nowrap; }

/* ----------------------------------------------------------------- Marquee */
.bit-marquee {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.bit-marquee-track {
display: flex;
width: max-content;
animation: bit-scroll linear infinite;
}
.bit-marquee:hover .bit-marquee-track { animation-play-state: paused; }
.bit-marquee-set { display: flex; align-items: center; gap: var(--s7); padding-right: var(--s7); }
@keyframes bit-scroll { to { transform: translateX(-50%); } }

/* -------------------------------------------------------------- GlareHover */
.bit-glare { position: relative; display: inline-flex; overflow: hidden; border-radius: inherit; }
.bit-glare-sheen {
Expand All @@ -203,7 +137,5 @@
@media (prefers-reduced-motion: reduce) {
.bit-aurora span,
.bit-gradient,
.bit-shiny,
.bit-starborder-ring,
.bit-marquee-track { animation: none !important; }
.bit-starborder-ring { animation: none !important; }
}