reusable-svelte-components

Table of Contents

• AnimatedGradient
• DarkModeToggle
• FilterPanel
• HolographicCard
• HolographicLayer
• HolographicToggle
• PageSkeleton
• RippleNavigate
• Spotlight
• StreamingContent
• VirtualList

---

AnimatedGradient

A background visual effect component with animated gradients and shapes. Accepts optional mouse position props for interactive effects.

Props:

• mouseX?: number (default: 50)
• mouseY?: number (default: 50)

Usage:

<AnimatedGradient mouseX={50} mouseY={50} />

---

DarkModeToggle

A button to toggle between dark and light mode, with animated icon transitions and support for view transitions.

Usage:

<DarkModeToggle />

---

FilterPanel

A flexible filter/search panel with support for search, buttons, date range, and select filters. Displays active filters and allows clearing all.

Props:

• filters: FilterConfig[] (see source for full config)
• activeFilters: ActiveFilter[]
• onClearAll: () => void

Usage:

<FilterPanel
  {filters}
  {activeFilters}
  onClearAll={clearAllFilters}
/>

---

HolographicCard

A 3D interactive card with holographic effects, parallax tilt, and customizable palette, glare, and noise.

Props:

• intensity?: number (default: 0.9)
• disableParallax?: boolean (default: false)
• noise?: boolean (default: true)
• palette?: string[]
• glareColor?: string (default: rgba(255,255,255,0.15))
• springConfig?: { stiffness: number; damping: number }
• class?: string
• children?: any

Usage:

<HolographicCard>
  <h2>Holographic Card Content</h2>
</HolographicCard>

---

HolographicLayer.svelte

A layer for use inside HolographicCard, supporting 3D depth, shine effects, and idle shimmer animation.

Props:

• depth?: number (default: 0)
• shine?: boolean (default: false)
• shineBackground?: boolean (default: false)
• shinePalette?: string[]
• idleShimmer?: boolean (default: false)
• class?: string
• children?: any

Usage:

<HolographicLayer depth={10} shine>
  <span>Shiny Layer</span>
</HolographicLayer>

---

HolographicToggle

A button to toggle the global holographic effect, with animated SVG icon.

Usage:

<HolographicToggle />

---

PageSkeleton

A flexible skeleton loader for pages, supporting dashboard, table, cards, form, marketing, and custom layouts.

Props:

• show?: boolean (default: false)
• type?: 'dashboard' | 'table' | 'cards' | 'form' | 'marketing' | 'custom' (default: dashboard)
• customConfig?: SkeletonConfig

Usage:

<PageSkeleton show type="dashboard" />

---

RippleNavigate

A navigation trigger with a ripple view transition effect. Falls back to normal navigation if transitions are not supported.

Props:

• href: string
• children: any
• class?: string

Usage:

<RippleNavigate href="/about">
  <span>Go to About</span>
</RippleNavigate>

---

Spotlight

A container that adds a spotlight effect following the mouse, with customizable colors and size.

Props:

• fromColor?: string (default: rgba(120,119,198,0.4))
• toColor?: string (default: transparent 80%)
• size?: number (default: 400)
• children?: any

Usage:

<Spotlight>
  <h2>Spotlight Content</h2>
</Spotlight>

---

StreamingContent

Handles a streaming promise and displays skeletons, content, or error UI based on the state. Supports custom skeletons and error slots.

Props:

• promise: Promise<any> | undefined | null
• skeletonType?: 'dashboard' | 'table' | 'cards' | 'form' | 'marketing' | 'custom'
• customSkeletonConfig?: any
• children: Snippet<[any]>
• error?: Snippet<[{ error: any }]>

Usage:

<StreamingContent
  promise={dataPromise}
  skeletonType="dashboard"
  let:data
>
  <div slot="children">{data && JSON.stringify(data)}</div>
</StreamingContent>

---

VirtualList

A performant virtualized list for large data sets. Only renders visible items for efficiency.

Props:

• items: any[]
• height?: string (default: 100%)
• itemHeight?: number
• children: Snippet<[item: any]>

Usage:

<VirtualList items={myItems} itemHeight={40} let:item>
  <div>{item.name}</div>
</VirtualList>