-
-
Palette
-
-
- {AVAILABLE_COLOR_PALETTES.map((p) => (
-
setPalette(p)}
- aria-selected={p === palette}
- />
- ))}
-
-
-
-
- {
- setColorBackground(e);
- }}
- />
-
-
-
-
{
- setPaletteTrackEnergy(e);
- }}
+
+
+
+
Palette
+
+
+ {AVAILABLE_COLOR_PALETTES.map((p) => (
+
setAppearance({ palette: p })}
+ aria-selected={p === palette}
/>
-
-
-
- 0}
- onCheckedChange={(e) => {
- setCameraMode(
- e
- ? CAMERA_CONTROLS_MODE.AUTO_ORBIT
- : CAMERA_CONTROLS_MODE.ORBIT_CONTROLS,
- );
- setAutoOrbitAfterSleepMs(e ? 3500 : 0);
- }}
- />
-
-
-
-
-
+ ))}
-
-
+
+
+ setAppearance({ colorBackground: e })}
+ />
+
+
+
+ setAppearance({ paletteTrackEnergy: e })}
+ />
+
+
+
+ 0}
+ onCheckedChange={(e) => {
+ setCamera(
+ e
+ ? {
+ mode: "AUTO_ORBIT",
+ autoOrbitAfterSleepMs: 3500,
+ }
+ : {
+ mode: "ORBIT_CONTROLS",
+ autoOrbitAfterSleepMs: 0,
+ },
+ );
+ }}
+ />
+
+
+
+
+
);
};
diff --git a/app/src/components/controls/visualsDock.tsx b/app/src/components/controls/visualsDock.tsx
deleted file mode 100644
index 71bc3234..00000000
--- a/app/src/components/controls/visualsDock.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { type HTMLAttributes } from "react";
-import {
- AVAILABLE_VISUALS,
- VISUAL,
- type VisualType,
-} from "@/components/visualizers/common";
-import { useVisualContext, useVisualContextSetters } from "@/context/visual";
-import {
- Box,
- Boxes,
- CircleDashed,
- Dna,
- Footprints,
- Globe,
- Grid3x3,
- HelpCircle,
- Ribbon,
-} from "lucide-react";
-
-import { Dock, DockItem, DockNav } from "./dock";
-
-const VisualIcon = ({ visual }: { visual: VisualType }) => {
- switch (visual) {
- case VISUAL.GRID:
- return
;
- case VISUAL.CUBE:
- return
;
- case VISUAL.SPHERE:
- return
;
- case VISUAL.DIFFUSED_RING:
- return
;
- case VISUAL.DNA:
- return
;
- case VISUAL.BOXES:
- return
;
- case VISUAL.RIBBONS:
- return
;
- case VISUAL.WALK:
- return
;
- default:
- return
;
- }
-};
-
-export const VisualsDock = ({ ...props }: HTMLAttributes
) => {
- const { visual: activeVisual } = useVisualContext();
- const { setVisual } = useVisualContextSetters();
-
- return (
-
-
- {AVAILABLE_VISUALS.map((visual) => (
- setVisual(visual)}
- >
-
-
- ))}
-
-
- );
-};
-
-export default VisualsDock;
diff --git a/app/src/components/ui/dock.tsx b/app/src/components/ui/dock.tsx
new file mode 100644
index 00000000..41b28819
--- /dev/null
+++ b/app/src/components/ui/dock.tsx
@@ -0,0 +1,392 @@
+"use client";
+
+/* eslint-disable */
+import {
+ createContext,
+ useCallback,
+ useContext,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+ type ReactNode,
+} from "react";
+import { cn } from "@/lib/utils";
+import {
+ animate,
+ AnimatePresence,
+ motion,
+ useAnimation,
+ useMotionValue,
+ useSpring,
+ useTransform,
+ type MotionValue,
+} from "framer-motion";
+
+// Interface to define the types for our Dock context
+interface DockContextType {
+ width: number; // Width of the dock
+ hovered: boolean; // If the dock is hovered
+ setIsZooming: (value: boolean) => void; // Function to set zooming state
+ zoomLevel: MotionValue; // Motion value for zoom level
+ mouseX: MotionValue; // Motion value for mouse X position
+}
+
+// Initial width for the dock
+const INITIAL_WIDTH = 48;
+
+// Create a context to manage Dock state
+const DockContext = createContext({
+ width: 0,
+ hovered: false,
+ /* eslint-disable @typescript-eslint/no-empty-function */
+ setIsZooming: () => {},
+ zoomLevel: null as any,
+ mouseX: null as any,
+});
+
+// Custom hook to use Dock context
+const useDock = () => useContext(DockContext);
+
+// Props for the Dock component
+interface DockProps {
+ className?: string;
+ children: ReactNode; // React children to be rendered within the dock
+ fixedChildren: ReactNode;
+}
+
+// Main Dock component: orchestrating the dock's animation behavior
+function Dock({ className, children, fixedChildren }: DockProps) {
+ const [hovered, setHovered] = useState(false); // State to track if the dock is hovered. When the mouse hovers over the dock, this state changes to true.
+ const [width, setWidth] = useState(0); // State to track the width of the dock. This dynamically updates based on the dock's current width.
+ const dockRef = useRef(null); // Reference to the dock element in the DOM. This allows direct manipulation and measurement of the dock.
+ const isZooming = useRef(false); // Reference to track if the zooming animation is active. This prevents conflicting animations.
+
+ // Callback to toggle the zooming state. This ensures that we don't trigger hover animations while zooming.
+ const setIsZooming = useCallback((value: boolean) => {
+ isZooming.current = value; // Update the zooming reference
+ setHovered(!value); // Update the hover state based on zooming
+ }, []);
+
+ const zoomLevel = useMotionValue(1); // Motion value for the zoom level of the dock. This provides a smooth zooming animation.
+
+ // Hook to handle window resize events and update the dock's width accordingly.
+ useWindowResize(() => {
+ setWidth(dockRef.current?.clientWidth || 0); // Set width to the dock's current width or 0 if undefined
+ });
+
+ const mouseX = useMotionValue(Infinity); // Motion value to track the mouse's X position relative to the viewport. Initialized to Infinity to denote no tracking initially.
+
+ return (
+ // Provide the dock's state and control methods to the rest of the application through context.
+
+ {
+ mouseX.set(e.pageX); // Update the mouseX motion value to the current mouse position
+ if (!isZooming.current) {
+ // Only set hovered if not zooming
+ setHovered(true); // Set hovered state to true
+ } else {
+ // setHovered(false); // Set hovered state to false
+ }
+ }}
+ // Event handler for when the mouse leaves the dock
+ onMouseLeave={() => {
+ mouseX.set(Infinity); // Reset mouseX motion value
+ setHovered(false); // Set hovered state to false
+ }}
+ style={{
+ x: "-50%", // Center the dock horizontally
+ scale: zoomLevel, // Bind the zoom level to the scale style property
+ }}
+ >
+
+ {children}
+
+ {fixedChildren && (
+ <>
+ {fixedChildren}
+
+ )}
+
+
+ );
+}
+
+// Props for the DockCard component
+interface DockCardProps {
+ className?: string; // Additional classes to be applied to the dock card
+ children: ReactNode; // React children to be rendered within the dock card
+ id: string; // Unique identifier for the dock card
+ active?: boolean;
+ handleClick?: () => void;
+}
+
+// DockCard component: manages individual card behavior within the dock
+function DockCard({
+ className,
+ children,
+ id,
+ handleClick,
+ active = false,
+}: DockCardProps) {
+ const cardRef = useRef(null); // Reference to the card button element for direct DOM manipulation and measurement
+ const [elCenterX, setElCenterX] = useState(0); // State to store the center X position of the card for accurate mouse interaction calculations
+ const dock = useDock(); // Access the Dock context to get shared state and control functions
+
+ // Spring animation for the size of the card, providing a smooth and responsive scaling effect
+ const size = useSpring(INITIAL_WIDTH, {
+ stiffness: 320,
+ damping: 20,
+ mass: 0.1,
+ });
+
+ // Spring animation for the opacity of the card, enabling smooth fade-in and fade-out effects
+ const opacity = useSpring(0, {
+ stiffness: 300,
+ damping: 20,
+ });
+
+ // Custom hook to track mouse position and update the card size dynamically based on proximity to the mouse
+ useMousePosition(
+ {
+ onChange: ({ value }) => {
+ const mouseX = value.x;
+ if (dock.width > 0) {
+ // Calculate transformed value based on mouse position and card center, using a cosine function for a smooth curve
+ const transformedValue =
+ INITIAL_WIDTH +
+ 36 *
+ Math.cos((((mouseX - elCenterX) / dock.width) * Math.PI) / 2) **
+ 12;
+
+ // Only animate size if the dock is hovered
+ if (dock.hovered) {
+ animate(size, transformedValue);
+ }
+ }
+ },
+ },
+ [elCenterX, dock],
+ );
+
+ // Hook to update the center X position of the card on window resize for accurate mouse interaction
+ useWindowResize(() => {
+ const { x } = cardRef.current?.getBoundingClientRect() || { x: 0 };
+ setElCenterX(x + 24); // 24 is the half of INITIAL_WIDTH (48 / 2), centering the element
+ });
+
+ const isAnimating = useRef(false); // Reference to track if the card is currently animating to avoid conflicting animations
+ const controls = useAnimation(); // Animation controls for managing card's Y position during the animation loop
+ const timeoutRef = useRef(null); // Reference to manage timeout cleanup on component unmount
+
+ // Handle click event to start or stop the card's animation
+ useEffect(() => {
+ if (active === isAnimating.current) {
+ return;
+ }
+ if (active) {
+ isAnimating.current = true;
+ opacity.set(0.5); // Set opacity for the animation
+ controls.start({
+ y: -5, // Move the card up by 24 pixels
+ transition: {
+ repeat: Infinity, // Repeat the animation indefinitely
+ repeatType: "reverse", // Reverse the direction of the animation each cycle
+ duration: 0.75, // Duration of each cycle
+ },
+ });
+ } else {
+ isAnimating.current = false;
+ opacity.set(0); // Reset opacity
+ controls.start({
+ y: 0, // Reset Y position to the original state
+ transition: { duration: 0.75 }, // Smooth transition back to original state
+ });
+ }
+ }, [active]);
+
+ // Cleanup timeout on component unmount to prevent memory leaks
+ useEffect(() => {
+ return () => clearTimeout(timeoutRef.current!);
+ }, []);
+
+ // Calculate the distance from the mouse position to the center of the card
+ const distance = useTransform(dock.mouseX, (val) => {
+ const bounds = cardRef.current?.getBoundingClientRect() ?? {
+ x: 0,
+ width: 0,
+ };
+ return val - bounds.x - bounds.width / 2; // Calculate distance to the center of the card
+ });
+
+ // Transform the calculated distance into a responsive width for the card
+ let widthSync = useTransform(distance, [-150, 0, 150], [40, 80, 40]);
+ let width = useSpring(widthSync, { mass: 0.1, stiffness: 150, damping: 12 });
+
+ return (
+
+ {/* Motion button for the card, handling click events and animations */}
+
handleClick() : undefined}
+ style={{
+ width: width, // Responsive width based on mouse distance
+ }}
+ animate={controls} // Animation controls for Y position
+ whileTap={{ scale: 0.95 }} // Scale down slightly on tap for a tactile feel
+ >
+ {children}{" "}
+ {/* Render the children of the DockCard inside the motion button */}
+
+
+ {/* AnimatePresence to manage the presence and layout animations of the card's indicator */}
+
+ {isAnimating.current ? (
+
+
+
+ ) : null}
+
+
+
+
+ {[...Object.keys(presetOptions), "custom"].map((p) => (
+
+ ))}
+
+ {!activePreset && (
+ <>
+
+
setParams({ nPerSide: e[0] })}
+ />
+
+ setParams({ cubeSpacingScalar: e[0] })}
+ />
+
+
+ {
+ setParams({ volume: e });
+ }}
+ />
+
+
+ )}
+
+
+
+ {[...Object.keys(presetOptions), "custom"].map((p) => (
+
+ ))}
+
+ {!activePreset && (
+ <>
+
+
setParams({ radius: e[0] })}
+ />
+
+ setParams({ pointSize: e[0] })}
+ />
+
+
+ {
+ setParams({ mirrorEffects: e });
+ }}
+ />
+
+
+ )}
+
+
+
+ {[...Object.keys(presetOptions), "custom"].map((p) => (
+
+ ))}
+
+ {!activePreset && (
+ <>
+
+
setParams({ nGridRows: e[0] })}
+ />
+
+ setParams({ nGridCols: e[0] })}
+ />
+
+ setParams({ cubeSpacingScalar: e[0] })}
+ />
+
+ )}
+
+
+
+ {[...Object.keys(presetOptions), "custom"].map((p) => (
+
+ ))}
+
+ {!activePreset && (
+ <>
+
+
setParams({ nPoints: e[0] })}
+ />
+
+
+ setParams({ radius: e[0] })}
+ />
+
+ )}
+
+
+
+ {[...Object.keys(presetOptions), "custom"].map((p) => (
+
+ ))}
+
+ {!activePreset && (
+ <>
+
+
setParams({ amplitude: e[0] })}
+ />
+
+ setParams({ spatialScale: e[0] })}
+ />
+
+ ({ timeScale: e[0] })}
+ />
+
+ ({ nIterations: e[0] })}
+ />
+
+ )}
+
+
+
+ {[...Object.keys(presetOptions), "custom"].map((p) => (
+
+ ))}
+
+ {!activePreset && (
+ <>
+
+
+ 1}
+ defaultChecked={params.waveformFrequenciesHz.length > 1}
+ onCheckedChange={(e) => {
+ setParams({
+ waveformFrequenciesHz: e ? [2.0, 10] : [2.0],
+ });
+ }}
+ />
+
+
+
setParams({ maxAmplitude: e[0] })}
+ />
+ {params.waveformFrequenciesHz.map((hz, i) => (
+
+
+
+ setParams({
+ waveformFrequenciesHz: params.waveformFrequenciesHz.map(
+ (v, j) => (i == j ? e[0] : v),
+ ),
+ })
+ }
+ />
+
+ ))}
+
+ )}
+