github-such-software/such.software
1
0
Fork 0
mirror of https://github.com/Such-Software/such.software.git synced 2026-10-17 05:32:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: computer animation positioning

Browse Source
This commit is contained in:
jwinterm
2026-01-20 09:34:14 -05:00
parent 0df4c3d09c
commit 6f8c2ba325
3 changed files with 66 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/procedural/nebula-field.tsx
+9 -6
View File
@@ -9,6 +9,8 @@ interface NebulaProps {
className?: string;
density?: number;
themeMode?: 'light' | 'dark';
/** Dynamic position as percentage of viewport. If not provided, uses default fixed position. */
position?: { x: number; y: number };
}
interface StreamLineProps {
@@ -77,7 +79,7 @@ const StreamLine = ({ d, themeMode, onHit, width, index }: StreamLineProps) => {
);
};
export const NebulaField = ({ className, density = 8, themeMode = 'dark' }: NebulaProps) => {
export const NebulaField = ({ className, density = 8, themeMode = 'dark', position }: NebulaProps) => {
const monitorControls = useAnimation();
const [monitorColor, setMonitorColor] = useState(themeMode === 'light' ? "text-slate-400" : "text-emerald-500/60");
const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
@@ -118,13 +120,14 @@ export const NebulaField = ({ className, density = 8, themeMode = 'dark' }: Nebu
const yRange = useTransform(scrollY, [0, 1000], [0, 250]);
// 1. Computer Position: Where the icon sits on the screen (%)
const computerX = 18;
const computerY = 18;
// Use dynamic position if provided, otherwise fall back to defaults
const computerX = position?.x ?? 18;
const computerY = position?.y ?? 18;
// 2. Streamer Convergence: Where the streamers actually head (%)
// If streamers hit "up and to the left", increase these values slightly.
const targetX = 19.8; // Tweak this to move streamer hit point right
const targetY = 19.8; // Tweak this to move streamer hit point down
// Offset from computer position so streamers hit the center of the monitor
const targetX = computerX + 2.5;
const targetY = computerY + 2.5;
const paths = useMemo(() => {
return Array.from({ length: density }).map(() => {