SpellCard

The SpellCard component displays a single spell or tool in the magic.mov platform. It provides an attractive, interactive card with visual cues based on the spell’s status and thematic styling.

Usage

<script>
  import SpellCard from "$lib/components/SpellCard.svelte";
</script>

<SpellCard
  name="KinoScripter"
  description="AI-powered screenplay writing and script analysis tool"
  status="live"
  slug="kinoscripter"
  icon="VideoIcon"
/>

Examples

API Reference

SpellCard Properties

Property	Type	Default	Description
name	string	Required	The name of the spell.
description	string	Required	A short description of the spell’s functionality.
status	"live" \| "wip" \| "concept"	Required	The current development status of the spell.
slug	string	Required	URL-friendly identifier for routing.
icon	keyof typeof Icons	"Wand2"	The Lucide icon to display (must be a valid Lucide icon name).
releaseDate	string \| undefined	undefined	Optional release date to display for live spells.

Implementation

The SpellCard component uses the MagicCard component for visual effects and Lucide icons for the spell icons. It dynamically adapts styling based on the spell’s status:

<script lang="ts">
	import { Card } from '$lib/components/ui/card';
	import { Badge } from '$lib/components/ui/badge';
	import { Wand2 } from 'lucide-svelte';
	import { goto } from '$app/navigation';
	import * as Icons from 'lucide-svelte';
	import type { SpellStatus } from '$lib/config/spells';
	import MagicCard from './ui/magic-card/magic-card.svelte';
	import type { ComponentType } from 'svelte';

	export let name: string;
	export let description: string;
	export let status: SpellStatus;
	export let releaseDate: string | undefined = undefined;
	export let slug: string;
	export let icon: keyof typeof Icons = 'Wand2';

	// Status-specific gradient colors using our semantic color system
	$: gradientColors = {
		live: {
			from: 'hsl(var(--accent-cool-h) var(--accent-cool-s) var(--accent-cool-l))',
			to: 'hsl(var(--cyan-600))'
		},
		wip: {
			from: 'hsl(var(--orange-400))',
			to: 'hsl(var(--orange-600))'
		},
		concept: { from: 'hsl(var(--blue-500))', to: 'hsl(var(--blue-600))' }
	}[status];

	// Compute the badge classes and text based on status
	$: badgeClasses = {
		live: 'bg-accent-cool/10 text-accent-cool border-accent-cool/20 hover:bg-accent-cool/20',
		wip: 'bg-orange-400/10 text-orange-400 border-orange-400/20 hover:bg-orange-400/20',
		concept: 'bg-blue-500/10 text-blue-500 border-blue-500/20 hover:bg-blue-500/20'
	}[status];

	// Handle navigation when card is clicked
	function handleClick() {
		if (slug === 'kinoscripter') {
			goto(`/spells/kinoscripter/cast`);
		} else {
			goto(`/spells/${slug}`);
		}
	}
</script>

<MagicCard
	on:click={handleClick}
	className="group aspect-square cursor-pointer..."
	gradientFrom={gradientColors.from}
	gradientTo={gradientColors.to}
	gradientSize={300}
	{gradientOpacity}
>
	<!-- Card Content -->
</MagicCard>

The component includes special handling for navigation, dynamically computed styling based on the spell’s status, and interactive hover effects.