+
+
+
+
+ {/* FAQ Accordion */}
+
+
+
+ Help Center
+
+ + FAQ +
++ Everything you need to know about Paraline. Can't find an answer? Reach out on GitHub. +
+
+ {faqs.map((faq, idx) => {
+ const isOpen = openIndex === idx;
+
+ return (
+
+
+
+
+ {isOpen && (
+
+
+ )}
+
+
+ );
+ })}
+
+
+
+
+ + {faq.answer} +
+
+
+
+
+
+ {/* Timeline Section */}
+
+
+
+
+
+
+ Setup Guide
+
+ + Installation +
++ Get your desktop audio visualizer up and running in under a minute. +
+
+ {/* Vertical Track */}
+
+
+ {steps.map((step, idx) => (
+
+ {/* Premium Timeline Icon */}
+
+ ))}
+
+
+ {/* Post-Installation Info Card */}
+
+
+
+
+
+
+ {step.title}
+{step.description}
+ + {step.action && ( +
+
+ Download Installer
+
+
+ )}
+ + Note: + Once started, Paraline runs as a seamless desktop overlay and reacts in real-time to the audio playing through your default output device. +
+
+ {/* Subtle background glow */}
+
+
+ {/* Professional 3D-style Hero Composition on the Right */}
+
+
+ {/* Theme Showcase Section */}
+
+ {/* Abstract glowing sphere/orb behind everything */}
+
+
+
+
+ {/* Floating Widget 1 - Pulse Lines (Front Layer Attached) */}
+
+
+
+ {/* Main Monitor Mockup Panel (Middle Layer) */}
+
+ {/* Fake Window Header */}
+
+
+ {/* Floating Widget 2 - Edge Crystals (Front Layer) */}
+
+
+
+ Pulse Lines
+
+
+
+
+
+
+
+ {/* Visualizer content inside */}
+
+
+ Active Theme
+ Edge Crystals
+
+
+
+
+ {/* Main Hero Content (Left aligned) */}
+
+
+
+ {/* Sparkle Text */}
+
+
+
+ {/* Massive Headline with Staggered Spring Animation and Continuous Float */}
+
+ {/* Continuous Float Wrapper */}
+
+ {/* Dynamic Backglow */}
+
+
+ {word}
+
+
+ ))}
+
+
+
+ {/* Action Buttons */}
+
+
+ {/* Button Inner Glow */}
+
+
+ DOWNLOAD INSTALLER
+
+
+
+
+
+ {/* Floating Bottom Cards - Fixed Spacing & Layout anchored to bottom */}
+ + Paraline provides services to deploy audio reactivity directly to your desktop. +
+
+
+ {/* Left Side: Wide Horizontal Card */}
+
+
+
+ {/* Right Side: Complex Grid */}
+
+
+
+
+
+
+
+
+
+
+ Zero Latency
+Direct WASAPI engine
+
+
+
+
+
+
+
+ {/* Text Box */}
+
+
+
+
+
+ {/* Second Text Box (To fill the height) */}
+
+
+
+
+
+
+
+
+ {/* Orange Stats Card */}
+ + 10+ Studio Themes Ready +
+Fully customizable
+Audio-reactive nodes
+
+ {/* Internal warm glow */}
+
+
+
+ + < 0.1% +
+CPU usage
+
+
+
+
+
+
+
+ Most visualizers are designed to grab attention.
+ Paraline was built to do something more interesting: +
+
+
+ {/* Subtle text glow behind the main text */}
+
+ Make the desktop feel alive,
without making it feel loud. + + + Make the desktop feel alive,
without making it feel loud. + +
+
+
+ The Core Philosophy
+ ++ Paraline was built to do something more interesting: +
without making it feel loud. + + + Make the desktop feel alive,
without making it feel loud. + +
+
+
+ {/* Cinematic Background Glow */}
+
+
+
+ {/* Left Column: Copy */}
+
+
+
+ {/* Right Column: Actions */}
+
+
+ Download Installer
+
+
+ View Source
+
+
+
+ + Bring your desktop edges to life. +
++ Install Paraline for Windows and turn the desktop into a softer, more reactive space. +
+Windows 10 / 11 Supported
+
+
+
+
+
+
+
+
+ Privacy
+
+ + Privacy Policy +
++ Last Updated: May 2026 +
+
+ {sections.map((section, idx) => (
+
+
+ ))}
+
+ + + {section.title} +
++ {section.content} +
+
+
+ {/* Header Section */}
+
+
+
+ {/* Bento Grid */}
+
+ {/* Subtle amber pulse */}
+
+
+
+
+
+ + System Requirements +
++ Make sure your machine is ready to run Paraline's high-performance audio engine and visualizers before downloading. +
+
+ {requirements.map((req, idx) => (
+
+ {/* Internal gradient sweep */}
+
+
+ {/* Radial glow behind icon */}
+
+
+
+ ))}
+
+
+ {/* Warning Banner */}
+
+
+
+
+
+
+
+ + {req.title} +
+
+ {/* Minimum Spec Box */}
+
+
+ {/* Subtitle / Note */}
+ {req.sub && (
+
+
+
+ {/* Recommended Spec Box */}
+ {req.rec ? (
+
+
+ Minimum
+
+ {req.min}
+
+
+ ) : (
+ // Spacer for grid alignment
+
+ )}
+
+
+ Recommended
+
+ {req.rec}
+
+
+ )}
+ + * {req.sub} +
+
+
+ + WINDOWS ONLY. + Paraline currently supports 64-bit Windows 10 and Windows 11. macOS and Linux builds are not available at this time. +
+
+
+
+
+
+
+
+ Configuration
+
+ + App Settings +
++ Preview of the desktop client configuration and hardware preferences. +
+
+ {groups.map((group, groupIdx) => (
+
+ {/* Group Header (Left Side) */}
+
+ ))}
+
+
+
+
+ {/* Settings List (Right Side) */}
+
+
+
+
+ {group.title}
+
+ {group.settings.map((setting, settingIdx) => (
+
+
+ {/* Hover Glow */}
+
+
+
+ ))}
+
+
+
+ {/* Premium Interactive Toggle */}
+
+ {setting.name}
+{setting.description}
+
+
+
+
+
+
+
+
+ Legal
+
+ + Terms & Conditions +
++ Last Updated: May 2026 +
+
+ {sections.map((section, idx) => (
+
+
+ ))}
+
+ + + {section.title} +
++ {section.content} +
+
+
+
+
+ );
+}
diff --git a/landing/src/components/DownloadButton.tsx b/landing/src/components/DownloadButton.tsx
new file mode 100644
index 0000000..0a3f05d
--- /dev/null
+++ b/landing/src/components/DownloadButton.tsx
@@ -0,0 +1,145 @@
+"use client";
+
+import { useState } from "react";
+import { Download, Loader2, CheckCircle2 } from "lucide-react";
+import { motion } from "framer-motion";
+import { cn } from "@/lib/utils";
+
+interface DownloadButtonProps {
+ className?: string;
+ variant?: "primary" | "secondary";
+ children?: React.ReactNode;
+ style?: React.CSSProperties;
+}
+
+export function DownloadButton({ className, variant = "primary", children, style }: DownloadButtonProps) {
+ const [status, setStatus] = useState<"idle" | "connecting" | "downloading" | "done">("idle");
+
+ const handleDownload = async (e: React.MouseEvent) => {
+ e.preventDefault();
+ if (status !== "idle") return;
+
+ setStatus("connecting");
+
+ try {
+ // Connect to our backend endpoint
+ const controller = new AbortController();
+ const timeoutId = setTimeout(() => controller.abort(), 10000);
+
+ const res = await fetch("/api/download", { signal: controller.signal });
+ clearTimeout(timeoutId);
+
+ if (!res.ok) throw new Error("Failed to connect");
+
+ const data = await res.json();
+
+ setStatus("downloading");
+
+ // Keep downloading state for a bit so it looks nice
+ setTimeout(() => {
+ try {
+ const parsedUrl = new URL(data.url);
+ const allowedHosts = ["github.com", "objects.githubusercontent.com"];
+
+ if (parsedUrl.protocol !== "https:" || !allowedHosts.includes(parsedUrl.hostname)) {
+ throw new Error("Untrusted download URL");
+ }
+
+ // Trigger the native download natively
+ const a = document.createElement("a");
+ a.href = parsedUrl.toString();
+ // if this was an actual exe we would use the download attribute
+ // a.download = data.filename;
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+
+ setStatus("done");
+
+ setTimeout(() => setStatus("idle"), 4000);
+ } catch (err) {
+ console.error("URL validation failed", err);
+ setStatus("idle");
+ alert("Invalid download URL. Please visit our GitHub releases directly.");
+ }
+ }, 800);
+
+ } catch (error: any) {
+ console.error(error);
+ setStatus("idle");
+
+ if (error?.name === 'AbortError') {
+ alert("The download request timed out. Please try again or visit our GitHub releases directly.");
+ } else {
+ // Fallback
+ window.open("https://github.com/SamXop123/Paraline/releases/latest", "_blank");
+ }
+ }
+ };
+
+ const isPrimary = variant === "primary";
+
+ // Base styles depending on status
+ let statusStyles = "";
+ if (status === "idle") {
+ // We let the parent className handle idle styles if they provide background, otherwise fallback
+ statusStyles = className?.includes("bg-") ? "" : (isPrimary
+ ? "bg-white text-black hover:shadow-[0_0_30px_0_rgba(255,255,255,0.3)] hover:scale-105"
+ : "bg-white text-black hover:scale-105 hover:bg-gray-200 shadow-[0_0_20px_rgba(255,255,255,0.2)]");
+ } else if (status === "connecting") {
+ statusStyles = "bg-none! bg-white! text-black! cursor-wait shadow-[0_0_20px_rgba(255,255,255,0.5)]!";
+ } else if (status === "downloading") {
+ statusStyles = "bg-none! bg-cyan-500! text-white! shadow-[0_0_40px_rgba(34,211,238,0.6)]!";
+ } else if (status === "done") {
+ statusStyles = "bg-none! bg-purple-500! text-white! shadow-[0_0_40px_rgba(168,85,247,0.6)]!";
+ }
+
+ return (
+
+
+
+
+
+ {/* We can reuse the showcase component here, but wrapper gives it context */}
+ Theme Gallery
+Browse and apply studio-grade edge visualizer themes.
+
+
+
- {edgeConfig.map((edge) => (
-
-
- ))}
-
-
-
-
- );
-}
diff --git a/landing/src/components/FeaturesBento.tsx b/landing/src/components/FeaturesBento.tsx
new file mode 100644
index 0000000..c0e7747
--- /dev/null
+++ b/landing/src/components/FeaturesBento.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+export function FeaturesBento() {
+ return (
+
+
+ {/* Left Column: Headlines & Small Cards */}
+
+
+
+
+
+
+
+ {/* Right Column: Massive Feature Card */}
+ Visual Experience
++ Light, pressure, motion. +
++ A restrained visual language built to feel ambient, architectural, and quietly alive. +
+
+ {[
+ { title: "Not another player window", desc: "Paraline stays in the periphery and turns the whole desktop into the stage.", color: "bg-cyan-400", shadow: "shadow-cyan-400/50" },
+ { title: "Soft by default", desc: "Glow, pressure, drift, and light that stays atmospheric even during long sessions.", color: "bg-purple-400", shadow: "shadow-purple-400/50" },
+ { title: "Reactive without shouting", desc: "Designed for focus setups, music nights, and ambient desktops that still feel alive.", color: "bg-emerald-400", shadow: "shadow-emerald-400/50" }
+ ].map((card, idx) => (
+
+
+
+
+ ))}
+
+
+
+
+
+
+ {card.title}
+{card.desc}
+
+
+ {/* Cinematic Background Gradients */}
+
+
+
+ {/* Top Inner Border line */}
+
+
+
+
+
+
+
+
+ {/* Abstract Animated Centerpiece (Radar/Sonar effect) */}
+ Screen Edge Presence
++ Designed to disappear until the beat lands. +
+
+
+
+
+ {/* Radar Sweep */}
+
+
+
+
+
+ {[
+ { title: "Platform: Windows", color: "text-cyan-400", desc: "Built as a transparent desktop overlay that seamlessly integrates with your screen edges." },
+ { title: "Built with Electron", color: "text-purple-400", desc: "Powered by Electron and a highly optimized C# engine, consuming <0.1% CPU." },
+ { title: "WASAPI Loopback", color: "text-emerald-400", desc: "Direct WASAPI audio loopback ensures zero latency between beat and visual response." }
+ ].map((card, idx) => (
+
+
+ ))}
+
+ {card.title}
+{card.desc}
+
+
+ );
+}
diff --git a/landing/src/components/MainWrapper.tsx b/landing/src/components/MainWrapper.tsx
new file mode 100644
index 0000000..2bab336
--- /dev/null
+++ b/landing/src/components/MainWrapper.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import { useSidebarStore } from "@/store/sidebar";
+import { cn } from "@/lib/utils";
+
+export function MainWrapper({ children }: { children: React.ReactNode }) {
+ const isOpen = useSidebarStore((state) => state.isOpen);
+
+ return (
+
+
+
+ Paraline
+
+
-
- );
-}
diff --git a/landing/src/components/SectionReveal.jsx b/landing/src/components/SectionReveal.jsx
deleted file mode 100644
index bde3306..0000000
--- a/landing/src/components/SectionReveal.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { motion } from "framer-motion";
-
-export default function SectionReveal({ children, className = "" }) {
- return (
- {eyebrow}
-{title}
-{body}
-
-
-
- {/* Navigation Items */}
-
-
-
-
- 
-
-
- PARALINE
-
-
-
- {/* Footer */}
-
- { setCurrentPage("home"); toggleSidebar(); }}
- />
- { setCurrentPage("installation"); toggleSidebar(); }}
- />
- { setCurrentPage("faq"); toggleSidebar(); }}
- />
-
- {/* ── NEW: System Requirements ── */}
- { setCurrentPage("system-requirements"); toggleSidebar(); }}
- />
-
- { setCurrentPage("home"); toggleSidebar(); }}
- />
- { setCurrentPage("home"); toggleSidebar(); }}
- />
-
-
- Menu
- -
-
-
- Support
- -
-
-
-
-
-
-
-
- Active
-
-
-
- );
-
- if (external) {
- return (
- {content}
- );
- }
- return (
- {content}
- );
-}
diff --git a/landing/src/components/Sidebar.tsx b/landing/src/components/Sidebar.tsx
new file mode 100644
index 0000000..d0cfe4d
--- /dev/null
+++ b/landing/src/components/Sidebar.tsx
@@ -0,0 +1,331 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { motion } from "framer-motion";
+import { useState, useEffect } from "react";
+import {
+ Home,
+ Image as ImageIcon,
+ Settings,
+ FileText,
+ HelpCircle,
+ Download,
+ HeadphonesIcon,
+ ChevronLeft,
+ ChevronRight,
+ Menu
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useSidebarStore } from "@/store/sidebar";
+import { GITHUB_URL } from "@/lib/paraline-api";
+import { Logo } from "./Logo";
+
+const Github = ({ className, strokeWidth = 2 }: { className?: string; strokeWidth?: number }) => (
+
+);
+
+const menuItems = [
+ { id: "home", label: "Home", icon: Home, href: "/" },
+ { id: "themes", label: "Theme Gallery", icon: ImageIcon, href: "/#themes" },
+ { id: "settings", label: "Configuration", icon: Settings, href: "/settings" },
+ { id: "download", label: "Get Paraline", icon: Download, href: "/#download" }
+];
+
+const resourceItems = [
+ { id: "requirements", label: "System Requirements", icon: Settings, href: "/requirements" },
+ { id: "faq", label: "FAQ", icon: HelpCircle, href: "/faq" },
+ { id: "install", label: "Installation Guide", icon: Download, href: "/installation" }
+];
+
+const supportItems = [
+ { name: "Contact Us", href: GITHUB_URL, icon: HeadphonesIcon, external: true },
+ { name: "Github", href: GITHUB_URL, icon: Github, external: true },
+];
+
+export function Sidebar() {
+ const { isOpen, toggle } = useSidebarStore();
+ const pathname = usePathname();
+ const [activeHash, setActiveHash] = useState("");
+
+ useEffect(() => {
+ setActiveHash(window.location.hash);
+
+ const handleHashChange = () => {
+ setActiveHash(window.location.hash);
+ };
+
+ const handleResize = () => {
+ if (window.innerWidth < 1024) {
+ useSidebarStore.getState().setIsOpen(false);
+ }
+ };
+
+ // Auto-close sidebar on mobile devices by default on mount
+ handleResize();
+
+ window.addEventListener("hashchange", handleHashChange);
+ window.addEventListener("resize", handleResize);
+ return () => {
+ window.removeEventListener("hashchange", handleHashChange);
+ window.removeEventListener("resize", handleResize);
+ };
+ }, [pathname]);
+
+ const checkIsActive = (href: string) => {
+ if (href.includes('#')) {
+ const [path, hash] = href.split('#');
+ return pathname === path && activeHash === '#' + hash;
+ }
+ if (href === '/') {
+ return pathname === '/' && !activeHash;
+ }
+ return pathname === href;
+ };
+
+ return (
+ <>
+ {/* Mobile Overlay */}
+
- 
-
-
- {label}
-
- { if (isOpen) toggle(); }}
+ />
+
+
+
+ );
+}
diff --git a/landing/src/components/ThemeComparisonModal.tsx b/landing/src/components/ThemeComparisonModal.tsx
new file mode 100644
index 0000000..498719f
--- /dev/null
+++ b/landing/src/components/ThemeComparisonModal.tsx
@@ -0,0 +1,159 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { motion, AnimatePresence } from "framer-motion";
+import { X, ChevronUp } from "lucide-react";
+import { specificThemes, Theme } from "./ThemeShowcase";
+
+interface ThemeComparisonModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ compareList: string[];
+}
+
+export function ThemeComparisonModal({ isOpen, onClose, compareList }: ThemeComparisonModalProps) {
+ const [mounted, setMounted] = useState(false);
+
+ useEffect(() => {
+ setMounted(true);
+ }, []);
+
+ if (!mounted) return null;
+
+ // Retrieve the actual theme objects in the order they were selected
+ const themesToCompare = compareList
+ .map(id => specificThemes.find(t => t.id === id))
+ .filter(Boolean) as Theme[];
+
+ const getBadgeColor = (value: string) => {
+ switch (value.toLowerCase()) {
+ case "low":
+ case "very low":
+ case "minimal":
+ return "border-emerald-500/30 bg-emerald-500/10 text-emerald-400";
+ case "medium":
+ case "moderate":
+ return "border-blue-500/30 bg-blue-500/10 text-blue-400";
+ case "high":
+ case "bold":
+ case "dynamic":
+ return "border-purple-500/30 bg-purple-500/10 text-purple-400";
+ default:
+ return "border-white/20 bg-white/5 text-white/70";
+ }
+ };
+
+ const modalContent = (
+
+ {isOpen && (
+
+ );
+
+ return createPortal(modalContent, document.body);
+}
diff --git a/landing/src/components/ThemeShowcase.tsx b/landing/src/components/ThemeShowcase.tsx
new file mode 100644
index 0000000..58ae7cd
--- /dev/null
+++ b/landing/src/components/ThemeShowcase.tsx
@@ -0,0 +1,376 @@
+"use client";
+
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { CheckCircle2, Plus, X } from "lucide-react";
+import { getThemesEndpoint } from "@/lib/paraline-api";
+
+import { AmbientWavePreview } from "./visualizers/AmbientWavePreview";
+import { FlowBorderPreview } from "./visualizers/FlowBorderPreview";
+import { PulseLinesPreview } from "./visualizers/PulseLinesPreview";
+import { SideBarsPreview } from "./visualizers/SideBarsPreview";
+import { DotParticlesPreview } from "./visualizers/DotParticlesPreview";
+import { ReactiveBorderPreview } from "./visualizers/ReactiveBorderPreview";
+import { RippleFlowPreview } from "./visualizers/RippleFlowPreview";
+import { EdgeCrystalsPreview } from "./visualizers/EdgeCrystalsPreview";
+import { SideBraidsPreview } from "./visualizers/SideBraidsPreview";
+import { AuroraDriftPreview } from "./visualizers/AuroraDriftPreview";
+import { SnowParticlesPreview } from "./visualizers/SnowParticlesPreview";
+import { ThemeComparisonModal } from "./ThemeComparisonModal";
+
+export type Theme = {
+ id: string;
+ name: string;
+ category: string;
+ description: string;
+ className: string;
+ Preview: React.FC<{ active: boolean }>;
+ animationStyle: string;
+ reactivity: string;
+ visualIntensity: string;
+ performanceImpact: string;
+ bestFor: string;
+};
+
+export const specificThemes: Theme[] = [
+
+ {
+ id: "ambient-wave",
+ name: "Ambient Wave",
+ category: "SOFT FREQUENCY DRIFT",
+ description: "Silky, low-frequency edge waves that gently breathe with atmospheric, minimal motion.",
+ className: "lg:col-span-2",
+ Preview: AmbientWavePreview,
+ animationStyle: "Wave",
+ reactivity: "Low",
+ visualIntensity: "Minimal",
+ performanceImpact: "Very Low",
+ bestFor: "Focus / Study"
+ },
+ {
+ id: "reactive-border",
+ name: "Reactive Border",
+ category: "HIGH-PRESENCE PERIMETER",
+ description: "An intense, full-perimeter energy field that surges powerfully to every heavy kick drum.",
+ className: "lg:col-span-1",
+ Preview: ReactiveBorderPreview,
+ animationStyle: "Glow",
+ reactivity: "High",
+ visualIntensity: "Bold",
+ performanceImpact: "Low",
+ bestFor: "Gaming / Music"
+ },
+ {
+ id: "flow-border",
+ name: "Flow Border",
+ category: "CONTINUOUS EDGE ENERGY",
+ description: "A sleek, continuous neon light-trace orbiting your screen edge with silky momentum.",
+ className: "lg:col-span-1",
+ Preview: FlowBorderPreview,
+ animationStyle: "Flow",
+ reactivity: "Medium",
+ visualIntensity: "Moderate",
+ performanceImpact: "Low",
+ bestFor: "Casual Listening"
+ },
+ {
+ id: "side-bars",
+ name: "Side Bars",
+ category: "LEFT-RIGHT EMPHASIS",
+ description: "Focused vertical equalizers anchored to the edges, perfect for intense bass drops.",
+ className: "lg:col-span-1",
+ Preview: SideBarsPreview,
+ animationStyle: "Bar",
+ reactivity: "High",
+ visualIntensity: "Moderate",
+ performanceImpact: "Very Low",
+ bestFor: "Music Monitoring"
+ },
+ {
+ id: "dot-particles",
+ name: "Dot Particles",
+ category: "REACTIVE SPARKLE FIELD",
+ description: "A dynamic cyber-field of glowing audio-reactive particles that scatter to the beat.",
+ className: "lg:col-span-1",
+ Preview: DotParticlesPreview,
+ animationStyle: "Particle",
+ reactivity: "High",
+ visualIntensity: "Dynamic",
+ performanceImpact: "Medium",
+ bestFor: "Gaming / Streams"
+ },
+ {
+ id: "pulse-lines",
+ name: "Pulse Lines",
+ category: "CENTER-ORIGIN BURSTS",
+ description: "Geometric energy bursts radiating from the center, locking flawlessly to your screen edges.",
+ className: "lg:col-span-1",
+ Preview: PulseLinesPreview,
+ animationStyle: "Pulse",
+ reactivity: "High",
+ visualIntensity: "Bold",
+ performanceImpact: "Low",
+ bestFor: "EDM / Beat-heavy"
+ },
+ {
+ id: "snow-particles",
+ name: "Snow Particles",
+ category: "SLOW EDGE SNOWFALL",
+ description: "Sparse, cool particles drifting around the frame for a more ambient winter-like feel.",
+ className: "lg:col-span-1",
+ Preview: SnowParticlesPreview,
+ animationStyle: "Particle",
+ reactivity: "Low",
+ visualIntensity: "Minimal",
+ performanceImpact: "Very Low",
+ bestFor: "Focus / Ambience"
+ },
+ {
+ id: "ripple-flow",
+ name: "Ripple Flow",
+ category: "PRESSURE RINGS",
+ description: "Symmetric, pressure-sensitive wavefronts that ripple outward in elegant neon rings.",
+ className: "lg:col-span-1",
+ Preview: RippleFlowPreview,
+ animationStyle: "Wave",
+ reactivity: "Medium",
+ visualIntensity: "Moderate",
+ performanceImpact: "Low",
+ bestFor: "Ambient / Chill"
+ },
+ {
+ id: "side-braids",
+ name: "Side Braids",
+ category: "GLOWING NEON FIBERS",
+ description: "Beautifully intertwined, glowing neon strands that organically braid along the vertical axis.",
+ className: "lg:col-span-1",
+ Preview: SideBraidsPreview,
+ animationStyle: "Flow",
+ reactivity: "Medium",
+ visualIntensity: "Bold",
+ performanceImpact: "Medium",
+ bestFor: "Lofi / Streams"
+ },
+ {
+ id: "edge-crystals",
+ name: "Edge Crystals",
+ category: "ANGULAR SHIMMER",
+ description: "Crisp, cold, faceted geometric glints providing a sharp, prismatic visual rhythm.",
+ className: "lg:col-span-2 h-[380px]",
+ Preview: EdgeCrystalsPreview,
+ animationStyle: "Geometric",
+ reactivity: "Medium",
+ visualIntensity: "Moderate",
+ performanceImpact: "Low",
+ bestFor: "Coding / Dark rooms"
+ },
+ {
+ id: "aurora-drift",
+ name: "Aurora Drift",
+ category: "ATMOSPHERIC CURTAINS",
+ description: "Stunning, layered northern-light curtains that soar dynamically with orchestral surges.",
+ className: "lg:col-span-2",
+ Preview: AuroraDriftPreview,
+ animationStyle: "Wave",
+ reactivity: "High",
+ visualIntensity: "Dynamic",
+ performanceImpact: "Medium",
+ bestFor: "Cinematic / Music"
+ }
+];
+
+export function ThemeShowcase() {
+ const [hoveredTheme, setHoveredTheme] = useState(null);
+ const [appliedTheme, setAppliedTheme] = useState(null);
+ const [compareList, setCompareList] = useState([]);
+ const [isCompareModalOpen, setIsCompareModalOpen] = useState(false);
+
+ const toggleCompare = (e: React.MouseEvent, themeId: string) => {
+ e.stopPropagation();
+ if (compareList.includes(themeId)) {
+ setCompareList(prev => prev.filter(id => id !== themeId));
+ } else {
+ if (compareList.length < 3) {
+ setCompareList(prev => [...prev, themeId]);
+ }
+ }
+ };
+
+ const handleApply = async (themeName: string) => {
+ try {
+ // Connect to the backend API to physically apply the theme on the desktop
+ const response = await fetch(getThemesEndpoint(), {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ action: "apply_theme", theme: themeName })
+ });
+
+ if (!response.ok) {
+ if (response.status === 404) {
+ // If the endpoint doesn't exist, intentionally throw to trigger simulation
+ throw new Error("Theme endpoint not found");
+ }
+ console.error("Failed to apply theme. Server responded with status:", response.status);
+ return; // Do not set applied state on failure
+ }
+ } catch (e) {
+ console.warn("Backend not running, simulating theme application:", e);
+ }
+
+ setAppliedTheme(themeName);
+ setTimeout(() => setAppliedTheme(null), 3000);
+ };
+
+ return (
+
+
+ {appliedTheme && (
+
+ {/* Animated border glow for the toast */}
+
+
+
+ )}
+
+
+ {/* Floating Compare Action Bar */}
+
+ {compareList.length > 0 && !isCompareModalOpen && (
+
+
+ )}
+
+
+ setIsCompareModalOpen(false)}
+ compareList={compareList}
+ />
+
+ );
+}
diff --git a/landing/src/components/pages/FAQPage.jsx b/landing/src/components/pages/FAQPage.jsx
deleted file mode 100644
index 32b8100..0000000
--- a/landing/src/components/pages/FAQPage.jsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import { motion, AnimatePresence } from "framer-motion";
-import { useState } from "react";
-
-export default function FAQPage({ setCurrentPage }) {
- const faqs = [
- {
- question: "What is Paraline?",
- answer: "Paraline is a modern audio visualizer for Windows that sits on the edges of your screen. It reacts to your system audio in real-time with beautiful themes and smooth animations."
- },
- {
- question: "Does it work on Windows 10 and 11?",
- answer: "Yes, Paraline is fully compatible with both Windows 10 and Windows 11. It's built specifically for the Windows desktop environment."
- },
- {
- question: "Will it impact my PC's performance?",
- answer: "Paraline is designed to be extremely lightweight. It uses efficient rendering techniques to ensure minimal CPU and GPU usage, so it won't impact your gaming or productivity."
- },
- {
- question: "How do I change themes?",
- answer: "Once Paraline is running, you can find its icon in the Windows system tray (bottom-right). Right-click the icon to see a list of available themes and switch between them instantly."
- },
- {
- question: "Can I customize the visualizer settings?",
- answer: "Absolutely. Through the system tray menu, you can access the Settings panel to adjust sensitivity, line thickness, opacity, and other theme-specific parameters."
- },
- {
- question: "Does Paraline record my audio?",
- answer: "No. Paraline only captures the output wave data from your system for visualization purposes. No audio is recorded, stored, or transmitted anywhere."
- },
- {
- question: "How do I update to the latest version?",
- answer: "You can download the latest installer from this website. Running the new installer will automatically update your existing Paraline installation while keeping your settings intact."
- }
- ];
-
- return (
-
-
-
-
- {isOpen && (
-
-
- )}
-
-
- );
-}
diff --git a/landing/src/components/pages/InstallationGuide.jsx b/landing/src/components/pages/InstallationGuide.jsx
deleted file mode 100644
index 256448c..0000000
--- a/landing/src/components/pages/InstallationGuide.jsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import { motion } from "framer-motion";
-
-export default function InstallationGuide({ setCurrentPage }) {
- const steps = [
- {
- num: "01",
- title: "Download",
- description: "Download the latest Paraline release setup executable directly to your Windows computer.",
- icon: (
-
- )
- },
- {
- num: "02",
- title: "Run Installer",
- description: "Launch the downloaded `.exe` setup file and follow the standard prompt to install.",
- icon: (
-
- )
- },
- {
- num: "03",
- title: "Launch App",
- description: "Open the newly installed Paraline application from your desktop or start menu shortcut.",
- icon: (
-
- )
- },
- {
- num: "04",
- title: "System Tray Controls",
- description: "Access the Windows system tray (bottom-right) to switch visualizer themes, pause flow, or open advanced settings.",
- icon: (
-
- )
- }
- ];
-
- return (
-
-
-
-
-
- 
-
-
-
-
-
- );
-}
diff --git a/landing/src/components/previews/ThemeCard.jsx b/landing/src/components/previews/ThemeCard.jsx
deleted file mode 100644
index 6194765..0000000
--- a/landing/src/components/previews/ThemeCard.jsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { useState } from "react";
-import PreviewStage from "./PreviewStage";
-
-export default function ThemeCard({
- theme,
- compareSelected = false,
- onCompareToggle,
- compareDisabled = false,
- onLearnMore,
-}) {
- const [hovered, setHovered] = useState(false);
-
- return (
-
-
-
-
- );
-}
diff --git a/landing/src/components/sections/ExperienceSection.jsx b/landing/src/components/sections/ExperienceSection.jsx
deleted file mode 100644
index 9db04e8..0000000
--- a/landing/src/components/sections/ExperienceSection.jsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { motion, useScroll, useTransform } from "framer-motion";
-import { useRef } from "react";
-import SectionIntro from "../SectionIntro";
-import SectionReveal from "../SectionReveal";
-
-const pillars = [
- {
- title: "Not another player window",
- copy: "Paraline stays in the periphery and turns the whole desktop into the stage.",
- },
- {
- title: "Soft by default",
- copy: "Glow, pressure, drift, and light that stays atmospheric even during long sessions.",
- },
- {
- title: "Reactive without shouting",
- copy: "Designed for focus setups, music nights, and ambient desktops that still feel alive.",
- },
-];
-
-export default function ExperienceSection() {
- const sectionRef = useRef(null);
- const { scrollYProgress } = useScroll({
- target: sectionRef,
- offset: ["start end", "end start"],
- });
-
- const stageY = useTransform(scrollYProgress, [0, 1], [80, -50]);
- const stageRotate = useTransform(scrollYProgress, [0, 1], [-4, 4]);
-
- return (
-
-
-
-
-
-
-
-
-
- );
-}
diff --git a/landing/src/components/sections/HeroSection.jsx b/landing/src/components/sections/HeroSection.jsx
deleted file mode 100644
index 52e27cd..0000000
--- a/landing/src/components/sections/HeroSection.jsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import { motion } from "framer-motion";
-import EdgePulseFrame from "../EdgePulseFrame";
-
-const heroLines = ["Audio reactive", "Edge-native", "Built for Windows"];
-
-export default function HeroSection({ downloadUrl, isHostedInstaller, onDownloadClick, setCurrentPage }) {
- return (
-
-
- );
-}
\ No newline at end of file
diff --git a/landing/src/components/sections/ThemeShowcaseSection.jsx b/landing/src/components/sections/ThemeShowcaseSection.jsx
deleted file mode 100644
index 3f19736..0000000
--- a/landing/src/components/sections/ThemeShowcaseSection.jsx
+++ /dev/null
@@ -1,188 +0,0 @@
-import { useState } from "react";
-import ThemeCard from "../previews/ThemeCard";
-import ThemeCompareDrawer from "../previews/ThemeCompareDrawer";
-import ThemeInfoModal from "../previews/ThemeInfoModal";
-import SectionIntro from "../SectionIntro";
-import SectionReveal from "../SectionReveal";
-import { themes } from "../../data/themes";
-
-const MAX_COMPARE = 3;
-
-export default function ThemeShowcaseSection() {
- const [compareSet, setCompareSet] = useState([]);
- const [drawerOpen, setDrawerOpen] = useState(false);
- const [activeTheme, setActiveTheme] = useState(null);
-
- const handleCompareToggle = (theme) => {
- setCompareSet((prev) => {
- const alreadyIn = prev.some((t) => t.key === theme.key);
-
- if (alreadyIn) {
- return prev.filter((t) => t.key !== theme.key);
- }
-
- if (prev.length >= MAX_COMPARE) {
- return prev;
- }
-
- return [...prev, theme];
- });
- };
-
- const handleRemoveFromCompare = (theme) => {
- setCompareSet((prev) => prev.filter((t) => t.key !== theme.key));
- };
-
- const handleClearCompare = () => {
- setCompareSet([]);
- setDrawerOpen(false);
- };
-
- const compareCount = compareSet.length;
- const canOpenDrawer = compareCount >= 2;
-
- return (
-
-
- );
-}
\ No newline at end of file
diff --git a/landing/src/components/visualizers/AmbientWavePreview.tsx b/landing/src/components/visualizers/AmbientWavePreview.tsx
new file mode 100644
index 0000000..e67f852
--- /dev/null
+++ b/landing/src/components/visualizers/AmbientWavePreview.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+export function AmbientWavePreview({ active }: { active: boolean }) {
+ const canvasRef = useRef(null);
+
+ useEffect(() => {
+ const canvas = canvasRef.current;
+ if (!canvas) return;
+ const ctx = canvas.getContext("2d");
+ if (!ctx) return;
+
+ let animationFrameId: number;
+ let time = 0;
+
+ const render = () => {
+ time += active ? 0.05 : 0.01;
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ // Draw two elegant cyan waves
+ const drawWave = (offsetY: number, amplitude: number, phaseOffset: number, opacity: number) => {
+ ctx.beginPath();
+ for (let x = 0; x < canvas.width; x++) {
+ const y = offsetY + Math.sin(x * 0.02 + time + phaseOffset) * amplitude;
+ if (x === 0) ctx.moveTo(x, y);
+ else ctx.lineTo(x, y);
+ }
+ ctx.strokeStyle = `rgba(56, 189, 248, ${opacity})`;
+ ctx.lineWidth = 2;
+ ctx.stroke();
+ };
+
+ // Add a subtle glow filter
+ ctx.shadowBlur = active ? 15 : 5;
+ ctx.shadowColor = "rgba(56, 189, 248, 0.5)";
+
+ // Top wave
+ drawWave(canvas.height * 0.3, active ? 15 : 5, 0, active ? 0.8 : 0.3);
+ // Bottom wave
+ drawWave(canvas.height * 0.7, active ? 10 : 3, Math.PI, active ? 0.5 : 0.2);
+
+ animationFrameId = requestAnimationFrame(render);
+ };
+
+ render();
+ return () => cancelAnimationFrame(animationFrameId);
+ }, [active]);
+
+ return (
+
+ );
+}
diff --git a/landing/src/components/visualizers/AuroraDriftPreview.tsx b/landing/src/components/visualizers/AuroraDriftPreview.tsx
new file mode 100644
index 0000000..4ec03ff
--- /dev/null
+++ b/landing/src/components/visualizers/AuroraDriftPreview.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { useId } from "react";
+
+export function AuroraDriftPreview({ active }: { active: boolean }) {
+ const instanceId = useId().replace(/:/g, "");
+ // We'll create several layered SVG paths that drift horizontally
+ // and scale vertically to simulate highly-reactive aurora curtains.
+ const curtains = [
+ { color: "text-purple-500", opacity: active ? 0.8 : 0.3, duration: 8, delay: 0, scale: active ? [1, 1.5, 1] : [1, 1.1, 1] },
+ { color: "text-cyan-400", opacity: active ? 0.9 : 0.4, duration: 12, delay: -2, scale: active ? [1, 1.8, 1] : [1, 1.05, 1] },
+ { color: "text-emerald-400", opacity: active ? 0.6 : 0.2, duration: 10, delay: -5, scale: active ? [1, 1.3, 1] : [1, 1.15, 1] },
+ { color: "text-indigo-500", opacity: active ? 0.7 : 0.3, duration: 15, delay: -7, scale: active ? [1, 1.6, 1] : [1, 1.2, 1] }
+ ];
+
+ return (
+
- ,
-);
diff --git a/landing/src/store/sidebar.ts b/landing/src/store/sidebar.ts
new file mode 100644
index 0000000..7658106
--- /dev/null
+++ b/landing/src/store/sidebar.ts
@@ -0,0 +1,13 @@
+import { create } from 'zustand';
+
+interface SidebarState {
+ isOpen: boolean;
+ toggle: () => void;
+ setIsOpen: (isOpen: boolean) => void;
+}
+
+export const useSidebarStore = create((set) => ({
+ isOpen: true,
+ toggle: () => set((state) => ({ isOpen: !state.isOpen })),
+ setIsOpen: (isOpen) => set({ isOpen }),
+}));
diff --git a/landing/tailwind.config.js b/landing/tailwind.config.js
deleted file mode 100644
index 6b39a6f..0000000
--- a/landing/tailwind.config.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
- content: ["./index.html", "./src/**/*.{js,jsx}"],
- theme: {
- extend: {
- colors: {
- midnight: "#050816",
- steel: "#7f92b0",
- mist: "#d8e1f2",
- glow: "#7dd3fc",
- mint: "#6ee7b7",
- },
- fontFamily: {
- display: ['"Syne"', "sans-serif"],
- sans: ['"Plus Jakarta Sans"', "sans-serif"],
- },
- boxShadow: {
- aura: "0 0 0 1px rgba(255,255,255,0.06), 0 20px 80px rgba(41, 121, 255, 0.18)",
- soft: "0 12px 40px rgba(4, 10, 28, 0.45)",
- },
- backgroundImage: {
- noise:
- "radial-gradient(circle at top, rgba(125,211,252,0.14), transparent 32%), radial-gradient(circle at 20% 20%, rgba(167,139,250,0.12), transparent 28%), radial-gradient(circle at 80% 0%, rgba(110,231,183,0.1), transparent 22%)",
- },
- },
- },
- plugins: [],
-};
diff --git a/landing/tsconfig.json b/landing/tsconfig.json
new file mode 100644
index 0000000..cf9c65d
--- /dev/null
+++ b/landing/tsconfig.json
@@ -0,0 +1,34 @@
+{
+ "compilerOptions": {
+ "target": "ES2017",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "bundler",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "react-jsx",
+ "incremental": true,
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ],
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ },
+ "include": [
+ "next-env.d.ts",
+ "**/*.ts",
+ "**/*.tsx",
+ ".next/types/**/*.ts",
+ ".next/dev/types/**/*.ts",
+ "**/*.mts"
+ ],
+ "exclude": ["node_modules"]
+}
diff --git a/landing/vite.config.js b/landing/vite.config.js
deleted file mode 100644
index 081c8d9..0000000
--- a/landing/vite.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-
-export default defineConfig({
- plugins: [react()],
-});
+ {/* Backdrop */}
+
+ {/* Header */}
+
+
+ )}
+
+
+
+ {/* Scrollable Content */}
+
+
+
+ + Comparing +
++ {themesToCompare.map(t => t.name).join(" vs ")} +
+
+ {/* Previews Row */}
+
+
+ {/* Bottom Gradient overlay for scroll affordance */}
+
+
+ {themesToCompare.map((theme) => (
+
+
+ {/* Comparison Table */}
+
+
+ ))}
+
+
+
+
+ {theme.name}
++ {theme.category} +
+
+ {[
+ { label: "ANIMATION STYLE", key: "animationStyle" },
+ { label: "REACTIVITY", key: "reactivity", badge: true },
+ { label: "VISUAL INTENSITY", key: "visualIntensity", badge: true },
+ { label: "PERFORMANCE IMPACT", key: "performanceImpact", badge: true },
+ { label: "BEST FOR", key: "bestFor" }
+ ].map((row, idx) => (
+
+
+
+ ))}
+
+ {row.label}
+
+
+ {themesToCompare.map(theme => (
+
+
+ {row.badge ? (
+
+ {theme[row.key as keyof Theme] as string}
+
+ ) : (
+
+ {theme[row.key as keyof Theme] as string}
+
+ )}
+
+ ))}
+
+
+
+
+
+ {/* Elegant Toast Notification */}
+
+
+
+
+
+ Studio-Grade Presets
++ Premium Motion Aesthetics. +
++ Click any theme below to instantly apply it to your desktop and watch it react to your system audio in real-time. +
+
+
+
+
+
+
+ Zero Latency Active
+
+ {specificThemes.map((theme, idx) => (
+ setHoveredTheme(theme.id)}
+ onMouseLeave={() => setHoveredTheme(null)}
+ onClick={() => handleApply(theme.name)}
+ className={`group relative flex flex-col sm:flex-row cursor-pointer overflow-hidden rounded-[28px] border border-white/5 bg-[#0a0d16]/80 backdrop-blur-md p-6 sm:p-8 transition-all duration-500 hover:border-cyan-500/30 hover:shadow-[0_20px_60px_-15px_rgba(34,211,238,0.2)] ${theme.className}`}
+ >
+ {/* Premium Glow effect on hover */}
+
+
+ {/* Compare Button Toggle */}
+
+
+ {/* Left Column: Text Content */}
+
+ ))}
+
+
+
+
+ {/* Right Column: Visualizer Box */}
+ {theme.category}
+{theme.name}
+{theme.description}
+
+
+
+
+ {/* Subtle glass reflection overlay */}
+
+
+
+ + Activated {appliedTheme} +
+
+
+ {compareList.length === 1
+ ? "Select at least 2 themes to compare"
+ : `${compareList.length} themes selected`}
+
+
+ (Max 3)
+
+
+
+
+
+
+
+
+
- {/* Background Glows */}
-
-
-
-
- {/* Header Block */}
-
-
- );
-}
-
-function FAQItem({ faq, idx }) {
- const [isOpen, setIsOpen] = useState(false);
-
- return (
-
-
-
- Support Center
-
-
-
- {/* FAQ List */}
- - FAQ -
-- Everything you need to know about Paraline. Can't find an answer? Reach out on GitHub. -
-
- {faqs.map((faq, idx) => (
-
-
- {/* Action Button */}
-
-
-
-
- {faq.answer}
-
-
- {/* Dynamic ambient backdrop glowing layers */}
-
-
-
-
- {/* Header Block */}
-
- {/* Subtle glow orb */}
-
-
-
-
- {/* Interactive Navigation Action */}
- setCurrentPage("home")}
- className="relative group overflow-hidden px-8 py-3.5 rounded-full bg-white/5 border border-white/10 hover:border-sky-400/40 text-[10px] tracking-[0.22em] uppercase font-bold text-white/90 hover:text-white transition-all duration-300"
- >
-
-
-
- Back to Dashboard
-
-
-
-
- );
-}
diff --git a/landing/src/components/pages/PrivacyPolicy.jsx b/landing/src/components/pages/PrivacyPolicy.jsx
deleted file mode 100644
index 6e55d76..0000000
--- a/landing/src/components/pages/PrivacyPolicy.jsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { motion } from "framer-motion";
-
-export default function PrivacyPolicy({ setCurrentPage }) {
- const sections = [
- {
- title: "Introduction",
- content: "Paraline is committed to protecting your privacy while providing a high-performance desktop visualizer experience. This Privacy Policy explains how we handle data and sets out our commitment to transparency."
- },
- {
- title: "Data Collection",
- content: "We currently collect limited anonymous analytics to understand how users interact with our platform. This includes website visits, download interactions, approximate device/browser information, and regional usage trends. We do NOT collect sensitive personal information, files, passwords, or private user content."
- },
- {
- title: "Local Processing",
- content: "Paraline is designed as a local-first application. Most operations, including audio processing and visual rendering, occur entirely on your device. Your local settings and theme configurations are stored locally and are not transmitted to our servers."
- },
- {
- title: "Third-Party Services",
- content: "We use standard web services like Vercel Analytics and Google Analytics to monitor website performance. These services help us understand compatibility and performance needs across different platforms."
- },
- {
- title: "GitHub & External Links",
- content: "Our website contains links to external sites, including GitHub for source code and releases. We are not responsible for the privacy practices or content of these third-party platforms."
- },
- {
- title: "Future Analytics Notice",
- content: "As Paraline evolves, we may implement additional anonymous telemetry to help debug performance issues and improve theme stability. Any such changes will always prioritize user anonymity and data minimization."
- },
- {
- title: "Contact Information",
- content: "If you have questions regarding our privacy practices, please reach out via GitHub Issues or contact the project maintainers directly through the official repository."
- }
- ];
-
- return (
-
-
-
- Quick Setup
-
-
-
- {/* Step-by-Step Responsive Grid */}
- - Installation Guide -
-- Follow these simple steps to configure and run Paraline on your Windows system. -
-
- {steps.map((step, idx) => (
-
- {/* Inner glowing hover sheet */}
-
-
-
- ))}
-
-
- {/* Ambient Highlight Banner */}
-
-
-
- {/* Icon Frame */}
-
-
-
- {step.icon}
-
- {/* Step Index */}
-
- {step.num}
-
- - {step.title} -
-- {step.description} -
-
- {/* Visualizer reactive ring icon */}
-
-
-
-
-
- - Once started, Paraline runs as a transparent desktop overlay and reacts in real time to the audio playing through your current output device. -
-
- {/* Dynamic ambient backdrop glowing layers */}
-
-
-
-
- {/* Back Button */}
-
-
- {/* Header Block */}
-
-
- );
-}
diff --git a/landing/src/components/pages/TermsPage.jsx b/landing/src/components/pages/TermsPage.jsx
deleted file mode 100644
index 72059a1..0000000
--- a/landing/src/components/pages/TermsPage.jsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import { motion } from "framer-motion";
-
-export default function TermsPage({ setCurrentPage }) {
- const sections = [
- {
- title: "Acceptance of Terms",
- content: "By accessing or using Paraline, you agree to be bound by these Terms and Conditions. If you do not agree with any part of these terms, you must not use the software."
- },
- {
- title: "Open Source Notice",
- content: "Paraline is an open-source project. While the source code is available under the MIT License, your use of the software hosted or distributed by us is still subject to these terms. Please refer to the LICENSE file in the repository for specific code-level permissions."
- },
- {
- title: "Usage Disclaimer",
- content: "Paraline is provided 'as is' for visual enhancement purposes. You are responsible for ensuring that your use of the software complies with all local laws and regulations. We do not guarantee compatibility with all hardware configurations or Windows versions."
- },
- {
- title: "No Warranty / Liability",
- content: "Paraline is provided without warranty of any kind, express or implied. In no event shall the authors or copyright holders be liable for any claim, damages, or other liability, whether in an action of contract, tort, or otherwise, arising from, out of, or in connection with the software or the use or other dealings in the software."
- },
- {
- title: "External Links",
- content: "Our website and application may contain links to external sites (such as GitHub). We have no control over the content or practices of these sites and cannot be held responsible for their privacy policies or terms of service."
- },
- {
- title: "Software Modifications",
- content: "We reserve the right to modify, suspend, or discontinue Paraline at any time without notice. We are not liable to you or any third party for any modification, price change, suspension, or discontinuance of the service."
- },
- {
- title: "Future Changes to Terms",
- content: "We may update our Terms and Conditions from time to time. You are advised to review this page periodically for any changes. Changes to these Terms and Conditions are effective when they are posted on this page."
- }
- ];
-
- return (
-
-
- Privacy & Trust
-
-
-
- {/* Content Sections */}
- - Privacy Policy -
-- Last updated: May 2026. This policy outlines our commitment to transparency and the limited ways we handle data. -
-
- {sections.map((section, idx) => (
-
-
- ))}
-
-
- {/* Footer Note */}
- - {section.title} -
-- {section.content} -
-
-
- - Paraline Visualizer Experience -
-
- {/* Background Effects */}
-
-
-
-
- {/* Header */}
-
-
-
-
-
-
- );
-}
diff --git a/landing/src/components/previews/PreviewStage.jsx b/landing/src/components/previews/PreviewStage.jsx
deleted file mode 100644
index 80d336e..0000000
--- a/landing/src/components/previews/PreviewStage.jsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { motion } from "framer-motion";
-
-export default function PreviewStage({ theme }) {
- return (
-
-
- Legal Information
-
-
-
- {/* Content Sections */}
- - Terms & Conditions -
-- Please read these terms carefully before using the Paraline visualizer. -
-
- {sections.map((section, idx) => (
-
-
- ))}
-
-
- {/* Footer Action */}
- - - {section.title} -
-- {section.content} -
-
- Last Updated: May 19, 2026
-
- setHovered(true)}
- onMouseLeave={() => setHovered(false)}
- >
-
-
-
- );
-}
\ No newline at end of file
diff --git a/landing/src/components/previews/ThemeInfoModal.jsx b/landing/src/components/previews/ThemeInfoModal.jsx
deleted file mode 100644
index 0067110..0000000
--- a/landing/src/components/previews/ThemeInfoModal.jsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import { useEffect, useRef } from "react";
-import PreviewStage from "./PreviewStage";
-
-export default function ThemeInfoModal({ theme, onClose }) {
- const modalRef = useRef(null);
-
- useEffect(() => {
- const handler = (e) => e.key === "Escape" && onClose?.();
- window.addEventListener("keydown", handler);
- return () => window.removeEventListener("keydown", handler);
- }, [onClose]);
-
- useEffect(() => { modalRef.current?.focus(); }, []);
-
- if (!theme) return null;
-
- return (
- <>
-
-
-
-
- - {theme.name} -
-{theme.tag}
-- {theme.blurb} -
- - -
-
-
-
-
- );
-}
diff --git a/landing/src/components/sections/CTASection.jsx b/landing/src/components/sections/CTASection.jsx
deleted file mode 100644
index a83b8d6..0000000
--- a/landing/src/components/sections/CTASection.jsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { motion } from "framer-motion";
-import SectionReveal from "../SectionReveal";
-
-const githubUrl = "https://github.com/SamXop123/Paraline";
-
-export default function CTASection({ downloadUrl, isHostedInstaller, onDownloadClick, setCurrentPage }) {
- return (
- e.stopPropagation()}
- >
- {/* Close button */}
-
-
-
-
-
- {/* Left — preview */}
-
-
-
-
- {/* Right — details */}
- Preview
-
- {[
- { label: "Style", value: theme.style },
- { label: "Reactivity", value: theme.reactivity },
- { label: "Intensity", value: theme.intensity },
- { label: "Performance", value: theme.performance },
- ].map(({ label, value }) => (
-
-
-
- ))}
- {label}
-{value}
-
-
- {/* Header */}
-
-
-
-
- {/* Ideal for */}
- {theme.tag}
-{theme.name}
-{theme.detailedDescription}
-
-
-
- {/* Customization controls */}
- Ideal For
-
- {theme.idealFor?.map((use) => (
-
- {use}
-
- ))}
-
-
-
-
- {/* Recommended for */}
- Customization Controls
-
- {theme.customizationControls?.map((ctrl) => (
-
- {ctrl}
-
- ))}
-
-
-
- Recommended For
-{theme.recommendedFor}
-
-
-
-
-
-
-
-
-
-
-
- Download
-Bring your desktop edges to life.
-
- Install Paraline for Windows and turn the desktop into a softer,
more reactive space.
-
-
-
-
- {pillars.map((pillar) => (
-
-
-
- ))}
- {pillar.title}
-{pillar.copy}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Screen Edge Presence
-Designed to disappear until the beat lands.
-
-
-
-
- Motion
-Parallax layers and edge traces keep the page calm but active.
-
-
- Performance
-CSS gradients, transforms, and a few motion loops. No heavy scene rendering.
-
-
-
- Desktop Atmosphere
-
-
-
- Paraline
-
-
-
- Audio-reactive edge visualizer for Windows desktops that makes your music feel ambient.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {heroLines.map((line) => (
-
- {line}
-
- ))}
-
-
-
-
-
- setDrawerOpen(false)}
- onRemove={(theme) => {
- handleRemoveFromCompare(theme);
-
- if (compareCount - 1 < 2) {
- setDrawerOpen(false);
- }
- }}
- />
- )}
-
- {/* Info modal */}
- {activeTheme && (
- setActiveTheme(null)}
- />
- )}
-
-
- {themes.map((theme) => {
- const isSelected = compareSet.some(
- (t) => t.key === theme.key
- );
- const isDisabled =
- !isSelected && compareCount >= MAX_COMPARE;
-
- return (
-
-
- {/* Floating compare bar */}
- {compareCount > 0 && (
-
-
-
-
- )}
-
- {/* Compare drawer */}
- {drawerOpen && (
-
- {compareSet.map((t) => (
-
- {t.name}
-
-
-
- ))}
-
- {Array.from({
- length: MAX_COMPARE - compareCount,
- }).map((_, i) => (
-
- +
-
- ))}
-
-
-
-
-
-
-
-
+ {/* Background stars / dust */}
+
+
+ {curtains.map((curtain, i) => (
+
+
+
+ ))}
+
+ {/* Base grounding shadow to hide the sharp bottom edge */}
+
+
+ );
+}
diff --git a/landing/src/components/visualizers/DotParticlesPreview.tsx b/landing/src/components/visualizers/DotParticlesPreview.tsx
new file mode 100644
index 0000000..ecc9992
--- /dev/null
+++ b/landing/src/components/visualizers/DotParticlesPreview.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { useEffect, useState } from "react";
+
+export function DotParticlesPreview({ active }: { active: boolean }) {
+ const [dots, setDots] = useState<{ id: number; left: string; top: string; delay: number }[]>([]);
+
+ useEffect(() => {
+ // Generate static dot positions around the perimeter
+ const generatedDots = Array.from({ length: 40 }).map((_, i) => {
+ const isTopBottom = Math.random() > 0.5;
+ const isLeft = Math.random() > 0.5;
+
+ let left = "0%";
+ let top = "0%";
+
+ if (isTopBottom) {
+ left = `${Math.random() * 100}%`;
+ top = isLeft ? "0px" : "calc(100% - 4px)";
+ } else {
+ top = `${Math.random() * 100}%`;
+ left = isLeft ? "0px" : "calc(100% - 4px)";
+ }
+
+ return {
+ id: i,
+ left,
+ top,
+ delay: Math.random() * 2
+ };
+ });
+ setDots(generatedDots);
+ }, []);
+
+ return (
+
+ {dots.map((dot) => (
+ 0.7 ? "#a855f7" : "#38bdf8", // occasionally flash magenta
+ }}
+ transition={{
+ duration: active ? 0.3 + Math.random() * 0.5 : 2,
+ repeat: Infinity,
+ delay: dot.delay,
+ ease: "easeInOut"
+ }}
+ />
+ ))}
+
+ );
+}
diff --git a/landing/src/components/visualizers/EdgeCrystalsPreview.tsx b/landing/src/components/visualizers/EdgeCrystalsPreview.tsx
new file mode 100644
index 0000000..126ea2d
--- /dev/null
+++ b/landing/src/components/visualizers/EdgeCrystalsPreview.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+export function EdgeCrystalsPreview({ active }: { active: boolean }) {
+ // Crystals placed along the left and right edges (increased count to remove gaps)
+ const crystals = Array.from({ length: 10 });
+ const midpoint = (crystals.length - 1) / 2;
+
+ return (
+
+
+
+ {/* Left Crystals */}
+
+ );
+}
diff --git a/landing/src/components/visualizers/FlowBorderPreview.tsx b/landing/src/components/visualizers/FlowBorderPreview.tsx
new file mode 100644
index 0000000..fa69aa6
--- /dev/null
+++ b/landing/src/components/visualizers/FlowBorderPreview.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+export function FlowBorderPreview({ active }: { active: boolean }) {
+ return (
+
+ {crystals.map((_, i) => (
+
+
+ {/* Right Crystals */}
+
+ {crystals.map((_, i) => (
+
+
+ {/* Background Dimming */}
+
+
+ {/* SVG Trace */}
+
+
+ );
+}
diff --git a/landing/src/components/visualizers/PulseLinesPreview.tsx b/landing/src/components/visualizers/PulseLinesPreview.tsx
new file mode 100644
index 0000000..4ca14c2
--- /dev/null
+++ b/landing/src/components/visualizers/PulseLinesPreview.tsx
@@ -0,0 +1,108 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+export function PulseLinesPreview({ active }: { active: boolean }) {
+ return (
+
+
+ );
+}
diff --git a/landing/src/components/visualizers/ReactiveBorderPreview.tsx b/landing/src/components/visualizers/ReactiveBorderPreview.tsx
new file mode 100644
index 0000000..f723f86
--- /dev/null
+++ b/landing/src/components/visualizers/ReactiveBorderPreview.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { useId } from "react";
+
+export function ReactiveBorderPreview({ active }: { active: boolean }) {
+ const gradientId = `reactive-gradient-${useId().replace(/:/g, "")}`;
+
+ return (
+
+
+ {/* Baseline ambient track */}
+
+
+ {/* Center intense core glow */}
+
+
+
+
+ {/* Left Primary Pulse */}
+
+ {/* Head dot */}
+
+
+
+ {/* Left Secondary Pulse (Echo) */}
+
+ {/* Head dot */}
+
+
+
+ {/* Right Secondary Pulse (Echo) */}
+
+
+
+
+
+
+ );
+}
diff --git a/landing/src/components/visualizers/RippleFlowPreview.tsx b/landing/src/components/visualizers/RippleFlowPreview.tsx
new file mode 100644
index 0000000..a1b3903
--- /dev/null
+++ b/landing/src/components/visualizers/RippleFlowPreview.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+export function RippleFlowPreview({ active }: { active: boolean }) {
+ return (
+
+
+
+ {/* Left Ripples */}
+
+ );
+}
diff --git a/landing/src/components/visualizers/SideBarsPreview.tsx b/landing/src/components/visualizers/SideBarsPreview.tsx
new file mode 100644
index 0000000..6adf03c
--- /dev/null
+++ b/landing/src/components/visualizers/SideBarsPreview.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+export function SideBarsPreview({ active }: { active: boolean }) {
+ // 12 bars on each side for higher fidelity
+ const bars = Array.from({ length: 12 });
+
+ return (
+
+ {[0, 1, 2].map((i) => (
+
+
+ {/* Right Ripples */}
+
+ {[0, 1, 2].map((i) => (
+
+
+ {/* Left Equalizer */}
+
+ );
+}
diff --git a/landing/src/components/visualizers/SideBraidsPreview.tsx b/landing/src/components/visualizers/SideBraidsPreview.tsx
new file mode 100644
index 0000000..973711f
--- /dev/null
+++ b/landing/src/components/visualizers/SideBraidsPreview.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+export function SideBraidsPreview({ active }: { active: boolean }) {
+ return (
+
+ {bars.map((_, i) => {
+ // Create a curved EQ shape (longer in the middle)
+ const distanceFromCenter = Math.abs(i - 5.5);
+ const baseWidth = Math.max(5, 20 - distanceFromCenter * 3);
+
+ return (
+
+
+ {/* Right Equalizer */}
+
+ {bars.map((_, i) => {
+ const distanceFromCenter = Math.abs(i - 5.5);
+ const baseWidth = Math.max(5, 20 - distanceFromCenter * 3);
+
+ return (
+
+
+
+
+ {/* Left Braid */}
+
+ );
+}
diff --git a/landing/src/components/visualizers/SnowParticlesPreview.tsx b/landing/src/components/visualizers/SnowParticlesPreview.tsx
new file mode 100644
index 0000000..79c09c8
--- /dev/null
+++ b/landing/src/components/visualizers/SnowParticlesPreview.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { useEffect, useState } from "react";
+
+export function SnowParticlesPreview({ active }: { active: boolean }) {
+ const [flakes, setFlakes] = useState<{ id: number; left: string; top: string; size: number; delay: number; duration: number; isPink: boolean }[]>([]);
+
+ useEffect(() => {
+ // Generate sparse snow flakes
+ const generatedFlakes = Array.from({ length: 15 }).map((_, i) => {
+ return {
+ id: i,
+ left: `${10 + Math.random() * 80}%`, // Keep mostly towards the center
+ top: `${-10 + Math.random() * 40}%`, // Start in the top half
+ size: 2 + Math.random() * 3, // 2px to 5px
+ delay: Math.random() * 5,
+ duration: 3 + Math.random() * 4,
+ isPink: Math.random() > 0.6 // 40% chance to be pink/reddish
+ };
+ });
+ setFlakes(generatedFlakes);
+ }, []);
+
+ return (
+
+
+
+
+ {/* Right Braid */}
+
+
+
+
+ {/* Top ambient glow */}
+ 0.5 ? 20 : -20, Math.random() > 0.5 ? -10 : 10] : 0,
+ opacity: active ? [0, 0.8, 0] : [0.1, 0.4, 0.1],
+ }}
+ transition={{
+ y: { duration: active ? flake.duration : flake.duration * 2, repeat: Infinity, ease: "linear", delay: flake.delay },
+ x: { duration: flake.duration, repeat: Infinity, repeatType: "reverse", ease: "easeInOut", delay: flake.delay },
+ opacity: { duration: active ? flake.duration : flake.duration * 2, repeat: Infinity, ease: "linear", delay: flake.delay }
+ }}
+ />
+ ))}
+
+ );
+}
diff --git a/landing/src/data/themes.js b/landing/src/data/themes.js
deleted file mode 100644
index dc17ca2..0000000
--- a/landing/src/data/themes.js
+++ /dev/null
@@ -1,289 +0,0 @@
-export const themes = [
- {
- key: "ambient-wave",
- name: "Ambient Wave",
- tag: "Soft frequency drift",
- blurb: "Soft ambient edge waves for minimal desktop motion.",
- preview: "/previews/ambient-wave-preview.svg",
- style: "Wave",
- reactivity: "Low",
- intensity: "Minimal",
- performance: "Very Low",
- recommendedFor: "Focus / Study",
- detailedDescription:
- "Ambient Wave draws slow, sinuous curves along the screen edges that breathe in time with your audio. The motion stays subtle enough to forget it is there, but alive enough to feel the room change when a track builds.",
- customizationControls: [
- "Tone",
- "Edge Mode",
- "Sensitivity",
- "Glow Strength",
- ],
- idealFor: [
- "Focus sessions",
- "Background music",
- "Study environments",
- "Long work sessions",
- ],
- },
-
- {
- key: "reactive-border",
- name: "Reactive Border",
- tag: "High-presence perimeter",
- blurb: "Full-border audio-reactive glow with stronger presence.",
- preview: "/previews/reactive-border-preview.svg",
- style: "Glow",
- reactivity: "High",
- intensity: "Bold",
- performance: "Low",
- recommendedFor: "Gaming / Music",
- detailedDescription:
- "Reactive Border wraps the entire screen in a glow that pulses hard with every beat. It is the most visually assertive theme in the set — built for setups where you want the desktop to feel charged and alive.",
- customizationControls: [
- "Color Style",
- "Intensity",
- "Border Thickness",
- "Glow Strength",
- ],
- idealFor: [
- "Gaming setups",
- "Music listening sessions",
- "Concert streaming",
- "High-energy environments",
- ],
- },
-
- {
- key: "flow-border",
- name: "Flow Border",
- tag: "Continuous edge energy",
- blurb: "Directional light motion traveling around the screen perimeter.",
- preview: "/previews/flow-border-preview.svg",
- style: "Flow",
- reactivity: "Medium",
- intensity: "Moderate",
- performance: "Low",
- recommendedFor: "Casual Listening",
- detailedDescription:
- "Flow Border sends a continuous stream of light traveling around the perimeter of your screen. The direction and speed shift with audio energy, creating a sense of motion that feels more like water than electricity.",
- customizationControls: [
- "Direction",
- "Speed Mode",
- "Segment Length",
- "Glow Strength",
- "Color Style",
- ],
- idealFor: [
- "Casual music listening",
- "Lofi sessions",
- "Creative work",
- "Ambient setups",
- ],
- },
-
- {
- key: "side-bars",
- name: "Side Bars",
- tag: "Left-right emphasis",
- blurb: "Left-right edge bars with centered musical emphasis.",
- preview: "/previews/side-bars-preview.svg",
- style: "Bar",
- reactivity: "High",
- intensity: "Moderate",
- performance: "Very Low",
- recommendedFor: "Music Monitoring",
- detailedDescription:
- "Side Bars places two vertical bars at the left and right edges of your screen, growing and contracting in real time with audio levels. It is the most frequency-accurate theme — ideal for monitoring mixes or simply watching the music.",
- customizationControls: [
- "Color Style",
- "Bar Thickness",
- "Sensitivity",
- "Bar Count",
- ],
- idealFor: [
- "Music production monitoring",
- "DJ setups",
- "Audio-focused sessions",
- "Minimal aesthetic desktops",
- ],
- },
-
- {
- key: "pulse-lines",
- name: "Pulse Lines",
- tag: "Center-origin bursts",
- blurb: "Center-origin pulse motion locked to the screen edges.",
- preview: "/previews/pulse-lines-preview.svg",
- style: "Pulse",
- reactivity: "High",
- intensity: "Bold",
- performance: "Low",
- recommendedFor: "EDM / Beat-heavy",
- detailedDescription:
- "Pulse Lines fires outward from a central origin point on each edge with every beat hit. The effect is sharp, snappy, and physically satisfying — built for music with strong transients.",
- customizationControls: ["Mode", "Intensity", "Speed", "Color"],
- idealFor: [
- "EDM and electronic music",
- "Gaming with beat-heavy soundtracks",
- "Party setups",
- "High-energy streams",
- ],
- },
-
- {
- key: "dot-particles",
- name: "Dot Particles",
- tag: "Reactive sparkle field",
- blurb: "Full-border dot motion with beat-reactive energy and direction changes.",
- preview: "/previews/dot-particles-preview.svg",
- style: "Particle",
- reactivity: "High",
- intensity: "Dynamic",
- performance: "Medium",
- recommendedFor: "Gaming / Streams",
- detailedDescription:
- "Dot Particles fills the screen perimeter with a field of small particles that scatter, cluster, and reverse direction on beat hits. The result is organic and unpredictable — no two seconds look the same.",
- customizationControls: [
- "Density",
- "Motion Style",
- "Direction Behavior",
- "Glow Strength",
- ],
- idealFor: [
- "Live streaming setups",
- "Gaming sessions",
- "Music visualizer displays",
- "Creative desktops",
- ],
- },
-
- {
- key: "ripple-flow",
- name: "Ripple Flow",
- tag: "Pressure rings",
- blurb: "Symmetric edge wavefronts expanding outward from a center origin.",
- preview: "/previews/ripple-flow-preview.svg",
- style: "Wave",
- reactivity: "Medium",
- intensity: "Moderate",
- performance: "Low",
- recommendedFor: "Ambient / Chill",
- detailedDescription:
- "Ripple Flow sends concentric wavefronts outward from the center of each screen edge in perfect symmetry. The motion feels like dropping a stone into still water — calm, spreading, and hypnotic.",
- customizationControls: ["Mode", "Intensity", "Sensitivity", "Color"],
- idealFor: [
- "Chill and ambient music",
- "Meditation or focus playlists",
- "Minimal desktop aesthetics",
- "Long background sessions",
- ],
- },
-
- {
- key: "snow-particles",
- name: "Snow Particles",
- tag: "Slow edge snowfall",
- blurb: "Sparse, cool particles drifting around the frame for a more ambient winter-like feel.",
- preview: "/previews/snow-particles-preview.svg",
- style: "Particle",
- reactivity: "Low",
- intensity: "Minimal",
- performance: "Very Low",
- recommendedFor: "Focus / Ambience",
- detailedDescription:
- "Snow Particles drifts sparse cool-white dots slowly around the screen frame. Audio barely disturbs the motion — this theme is about atmosphere over reactivity, built for desktops that should feel quiet and considered.",
- customizationControls: [
- "Density",
- "Drift Speed",
- "Particle Size",
- "Opacity",
- ],
- idealFor: [
- "Winter ambience setups",
- "Reading or study sessions",
- "Minimal always-on aesthetics",
- "Quiet work environments",
- ],
- },
-
- {
- key: "edge-crystals",
- name: "Edge Crystals",
- tag: "Angular shimmer",
- blurb: "Sharper faceted glints along the perimeter, tuned for a colder, prismatic mood.",
- preview: "/previews/edge-crystals-preview.svg",
- style: "Geometric",
- reactivity: "Medium",
- intensity: "Moderate",
- performance: "Low",
- recommendedFor: "Coding / Dark rooms",
- detailedDescription:
- "Edge Crystals generates sharp faceted light fragments along the perimeter that catch and refract on audio transients. The aesthetic is cold, geometric, and precise — more ice than fire.",
- customizationControls: [
- "Crystal Size",
- "Refraction Intensity",
- "Color Temperature",
- "Density",
- ],
- idealFor: [
- "Late-night coding sessions",
- "Dark room setups",
- "Cyberpunk or tech aesthetics",
- "Ambient instrumental music",
- ],
- },
-
- {
- key: "side-braids",
- name: "Side Braids",
- tag: "Glowing neon fibers",
- blurb: "Intertwined glowing neon strands braiding and flowing vertically along screen edges.",
- preview: "/previews/side-braids-preview.svg",
- style: "Flow",
- reactivity: "Medium",
- intensity: "Bold",
- performance: "Medium",
- recommendedFor: "Lofi / Streams",
- detailedDescription:
- "Side Braids weaves two or more glowing neon strands together along the vertical edges of your screen. The braiding motion is smooth and hypnotic, brightening when the audio swells and calming between phrases.",
- customizationControls: [
- "Strand Count",
- "Glow Color",
- "Braid Speed",
- "Intensity",
- ],
- idealFor: [
- "Lofi and chill streams",
- "Aesthetic desktop recordings",
- "Music-focused setups",
- "Creative and artistic environments",
- ],
- },
-
- {
- key: "aurora-drift",
- name: "Aurora Drift",
- tag: "Atmospheric curtains",
- blurb: "Layered northern-lights curtains flowing upward with highly-reactive musical surges.",
- preview: "/previews/aurora-drift-preview.svg",
- style: "Wave",
- reactivity: "High",
- intensity: "Dynamic",
- performance: "Medium",
- recommendedFor: "Cinematic / Music",
- detailedDescription:
- "Aurora Drift layers translucent curtains of light that flow upward along the screen edges, shifting color and intensity with the music. On loud passages the curtains surge; in quiet moments they barely move. It is the most cinematic theme in Paraline.",
- customizationControls: [
- "Layer Count",
- "Color Palette",
- "Surge Sensitivity",
- "Drift Speed",
- ],
- idealFor: [
- "Cinematic soundtracks",
- "Orchestral and classical music",
- "Mood lighting setups",
- "Immersive listening sessions",
- ],
- },
-];
\ No newline at end of file
diff --git a/landing/src/index.css b/landing/src/index.css
deleted file mode 100644
index 4b928ec..0000000
--- a/landing/src/index.css
+++ /dev/null
@@ -1,121 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Syne:wght@500;600;700;800&display=swap");
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
- color-scheme: dark;
-}
-
-html {
- scroll-behavior: smooth;
-}
-
-body {
- margin: 0;
- min-width: 320px;
- background:
- radial-gradient(circle at top, rgba(123, 212, 255, 0.1), transparent 28%),
- linear-gradient(180deg, #050816 0%, #040611 55%, #02040c 100%);
- color: #f8fbff;
- font-family: "Plus Jakarta Sans", sans-serif;
-}
-
-* {
- box-sizing: border-box;
-}
-
-a {
- text-decoration: none;
-}
-
-::selection {
- background: rgba(125, 211, 252, 0.22);
- color: white;
-}
-
-.hero-wave-shell {
- height: 2px;
- border-radius: 999px;
- background: linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.95), transparent);
- box-shadow:
- 0 0 18px rgba(125, 211, 252, 0.7),
- 0 0 48px rgba(125, 211, 252, 0.25);
-}
-
-.hero-wave-shell::before,
-.hero-wave-shell::after {
- content: "";
- position: absolute;
- inset: 0;
- border-radius: inherit;
- background: inherit;
-}
-
-.hero-wave-shell::before {
- transform: translateY(-18px) scaleX(0.8);
- opacity: 0.5;
-}
-
-.hero-wave-shell::after {
- transform: translateY(18px) scaleX(0.9);
- opacity: 0.35;
-}
-
-.preview-image {
- background: linear-gradient(180deg, rgba(11, 21, 32, 0.98), rgba(6, 16, 24, 0.98));
-}
-
-@media (prefers-reduced-motion: reduce) {
- html {
- scroll-behavior: auto;
- }
-
- *,
- *::before,
- *::after {
- animation-duration: 0.01ms !important;
- animation-iteration-count: 1 !important;
- transition-duration: 0.01ms !important;
- }
-}
-
-:root {
- --scrollbar-track: rgba(248, 251, 255, 0.08);
- --scrollbar-thumb: rgba(125, 211, 252, 0.18);
- --scrollbar-thumb-hover: rgba(125, 211, 252, 0.32);
-}
-
-html,
-body {
- scrollbar-width: thin;
- scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
-}
-
-*::-webkit-scrollbar {
- width: 10px;
- height: 10px;
-}
-
-*::-webkit-scrollbar-track {
- background: var(--scrollbar-track);
- border-radius: 999px;
-}
-
-*::-webkit-scrollbar-thumb {
- background: var(--scrollbar-thumb);
- border-radius: 999px;
- border: 2px solid transparent;
- background-clip: content-box;
-}
-
-*::-webkit-scrollbar-thumb:hover {
- background: var(--scrollbar-thumb-hover);
-}
-
-*::-webkit-scrollbar-corner {
- background: transparent;
-}
-
-
diff --git a/landing/src/lib/paraline-api.ts b/landing/src/lib/paraline-api.ts
new file mode 100644
index 0000000..db57ee0
--- /dev/null
+++ b/landing/src/lib/paraline-api.ts
@@ -0,0 +1,35 @@
+/**
+ * Paraline API Adapter
+ *
+ * This file acts as an adapter layer to ensure the Next.js frontend
+ * remains 100% compatible with the existing backend endpoints.
+ *
+ * NO CHANGES should be made to these return values without verifying
+ * against the main Electron/backend configuration.
+ */
+
+// Core GitHub URL for the Paraline project
+export const GITHUB_URL = "https://github.com/SamXop123/Paraline";
+
+/**
+ * Returns the download URL for the Paraline Windows installer.
+ * Currently pointing to the direct release or /api/download endpoint.
+ */
+export function getDownloadUrl(): string {
+ // Can be swapped to an internal Next.js API route if needed: return "/api/download"
+ return `${GITHUB_URL}/releases/latest`;
+}
+
+/**
+ * (Optional) Returns the API endpoint to fetch GitHub stats if implemented.
+ */
+export function getGithubStatsEndpoint(): string {
+ return "/api/github-stats";
+}
+
+/**
+ * (Optional) Returns the endpoint to fetch theme configurations.
+ */
+export function getThemesEndpoint(): string {
+ return "/api/themes";
+}
diff --git a/landing/src/lib/utils.ts b/landing/src/lib/utils.ts
new file mode 100644
index 0000000..365058c
--- /dev/null
+++ b/landing/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
diff --git a/landing/src/main.jsx b/landing/src/main.jsx
deleted file mode 100644
index 0945fa7..0000000
--- a/landing/src/main.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App";
-import "./index.css";
-
-window.dataLayer = window.dataLayer || [];
-window.gtag = window.gtag || function gtagProxy() {
- window.dataLayer.push(arguments);
-};
-
-ReactDOM.createRoot(document.getElementById("root")).render(
-