{ "schemaVersion": "1.0", "item": { "slug": "animated-financial-display", "name": "Animated Financial Display Design System", "source": "tencent", "type": "skill", "category": "AI 智能", "sourceUrl": "https://clawhub.ai/wpank/animated-financial-display", "canonicalUrl": "https://clawhub.ai/wpank/animated-financial-display", "targetPlatform": "OpenClaw" }, "install": { "downloadMode": "redirect", "downloadUrl": "/downloads/animated-financial-display", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=animated-financial-display", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "installMethod": "Manual import", "extraction": "Extract archive", "prerequisites": [ "OpenClaw" ], "packageFormat": "ZIP package", "includedAssets": [ "README.md", "SKILL.md" ], "primaryDoc": "SKILL.md", "quickSetup": [ "Download the package from Yavira.", "Extract the archive and review SKILL.md first.", "Import or place the package into your OpenClaw setup." ], "agentAssist": { "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.", "steps": [ "Download the package from Yavira.", "Extract it into a folder your agent can access.", "Paste one of the prompts below and point your agent at the extracted folder." ], "prompts": [ { "label": "New install", "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete." }, { "label": "Upgrade existing", "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run." } ] }, "sourceHealth": { "source": "tencent", "status": "healthy", "reason": "direct_download_ok", "recommendedAction": "download", "checkedAt": "2026-04-23T16:43:11.935Z", "expiresAt": "2026-04-30T16:43:11.935Z", "httpStatus": 200, "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard", "contentType": "application/zip", "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard", "contentDisposition": "attachment; filename=\"4claw-imageboard-1.0.1.zip\"", "redirectLocation": null, "bodySnippet": null }, "scope": "source", "summary": "Source download looks usable.", "detail": "Yavira can redirect you to the upstream package for this source.", "primaryActionLabel": "Download for OpenClaw", "primaryActionHref": "/downloads/animated-financial-display" }, "validation": { "installChecklist": [ "Use the Yavira download entry.", "Review SKILL.md after the package is downloaded.", "Confirm the extracted package contains the expected setup assets." ], "postInstallChecks": [ "Confirm the extracted package includes the expected docs or setup files.", "Validate the skill or prompts are available in your target agent workspace.", "Capture any manual follow-up steps the agent could not complete." ] }, "downloadPageUrl": "https://openagent3.xyz/downloads/animated-financial-display", "agentPageUrl": "https://openagent3.xyz/skills/animated-financial-display/agent", "manifestUrl": "https://openagent3.xyz/skills/animated-financial-display/agent.json", "briefUrl": "https://openagent3.xyz/skills/animated-financial-display/agent.md" }, "agentAssist": { "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.", "steps": [ "Download the package from Yavira.", "Extract it into a folder your agent can access.", "Paste one of the prompts below and point your agent at the extracted folder." ], "prompts": [ { "label": "New install", "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete." }, { "label": "Upgrade existing", "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run." } ] }, "documentation": { "source": "clawhub", "primaryDoc": "SKILL.md", "sections": [ { "title": "Animated Financial Display", "body": "Create engaging financial number displays with smooth animations, proper formatting, and visual feedback on value changes." }, { "title": "When to Use", "body": "Building trading dashboards with live prices\nShowing portfolio values that update in real-time\nDisplaying metrics that need attention on change\nAny financial UI that benefits from motion" }, { "title": "Pattern 1: Spring-Animated Number", "body": "Using framer-motion's spring physics:\n\nimport { useSpring, animated } from '@react-spring/web';\nimport { useEffect, useRef } from 'react';\n\ninterface AnimatedNumberProps {\n value: number;\n prefix?: string;\n suffix?: string;\n decimals?: number;\n duration?: number;\n}\n\nexport function AnimatedNumber({\n value,\n prefix = '',\n suffix = '',\n decimals = 2,\n duration = 500,\n}: AnimatedNumberProps) {\n const prevValue = useRef(value);\n\n const { number } = useSpring({\n from: { number: prevValue.current },\n to: { number: value },\n config: { duration },\n });\n\n useEffect(() => {\n prevValue.current = value;\n }, [value]);\n\n return (\n \n {number.to((n) => `${prefix}${n.toFixed(decimals)}${suffix}`)}\n \n );\n}" }, { "title": "Usage", "body": "\n" }, { "title": "Pattern 2: Value with Flash Effect", "body": "Flash color on value change:\n\nimport { useEffect, useState, useRef } from 'react';\nimport { cn } from '@/lib/utils';\n\ninterface FlashingValueProps {\n value: number;\n formatter: (value: number) => string;\n}\n\nexport function FlashingValue({ value, formatter }: FlashingValueProps) {\n const [flash, setFlash] = useState<'up' | 'down' | null>(null);\n const prevValue = useRef(value);\n\n useEffect(() => {\n if (value !== prevValue.current) {\n setFlash(value > prevValue.current ? 'up' : 'down');\n prevValue.current = value;\n \n const timer = setTimeout(() => setFlash(null), 600);\n return () => clearTimeout(timer);\n }\n }, [value]);\n\n return (\n \n {formatter(value)}\n \n );\n}" }, { "title": "Pattern 3: Financial Number Formatting", "body": "// lib/formatters.ts\nexport function formatCurrency(\n value: number,\n options: {\n currency?: string;\n compact?: boolean;\n decimals?: number;\n } = {}\n): string {\n const { currency = 'USD', compact = false, decimals = 2 } = options;\n\n if (compact && Math.abs(value) >= 1_000_000_000) {\n return `$${(value / 1_000_000_000).toFixed(1)}B`;\n }\n if (compact && Math.abs(value) >= 1_000_000) {\n return `$${(value / 1_000_000).toFixed(1)}M`;\n }\n if (compact && Math.abs(value) >= 1_000) {\n return `$${(value / 1_000).toFixed(1)}K`;\n }\n\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency,\n minimumFractionDigits: decimals,\n maximumFractionDigits: decimals,\n }).format(value);\n}\n\nexport function formatPercentage(\n value: number,\n options: { showSign?: boolean; decimals?: number } = {}\n): string {\n const { showSign = true, decimals = 2 } = options;\n const sign = showSign && value > 0 ? '+' : '';\n return `${sign}${value.toFixed(decimals)}%`;\n}\n\nexport function formatNumber(\n value: number,\n options: { compact?: boolean; decimals?: number } = {}\n): string {\n const { compact = false, decimals = 0 } = options;\n\n if (compact) {\n return Intl.NumberFormat('en-US', {\n notation: 'compact',\n maximumFractionDigits: 1,\n }).format(value);\n }\n\n return new Intl.NumberFormat('en-US', {\n minimumFractionDigits: decimals,\n maximumFractionDigits: decimals,\n }).format(value);\n}" }, { "title": "Pattern 4: Price Ticker Component", "body": "interface PriceTickerProps {\n symbol: string;\n price: number;\n change24h: number;\n changePercent24h: number;\n}\n\nexport function PriceTicker({\n symbol,\n price,\n change24h,\n changePercent24h,\n}: PriceTickerProps) {\n const isPositive = changePercent24h >= 0;\n\n return (\n
\n
\n {symbol}\n
\n \n
\n \n \n \n {formatPercentage(changePercent24h)}\n \n
\n
\n );\n}" }, { "title": "Pattern 5: Metric Card with Animation", "body": "interface MetricCardProps {\n label: string;\n value: number;\n previousValue?: number;\n format: 'currency' | 'percent' | 'number';\n}\n\nexport function MetricCard({\n label,\n value,\n previousValue,\n format,\n}: MetricCardProps) {\n const formatValue = (v: number) => {\n switch (format) {\n case 'currency': return formatCurrency(v, { compact: true });\n case 'percent': return formatPercentage(v);\n case 'number': return formatNumber(v, { compact: true });\n }\n };\n\n const change = previousValue ? ((value - previousValue) / previousValue) * 100 : null;\n\n return (\n \n
\n {label}\n
\n \n
\n \n
\n \n {change !== null && (\n
= 0 ? 'text-success' : 'text-destructive'\n )}>\n {formatPercentage(change)} from previous\n
\n )}\n \n );\n}" }, { "title": "Pattern 6: CSS Value Flash Animation", "body": "@keyframes value-flash-up {\n 0% { \n color: hsl(var(--success));\n text-shadow: 0 0 8px hsl(var(--success) / 0.5);\n }\n 100% { \n color: inherit;\n text-shadow: none;\n }\n}\n\n@keyframes value-flash-down {\n 0% { \n color: hsl(var(--destructive));\n text-shadow: 0 0 8px hsl(var(--destructive) / 0.5);\n }\n 100% { \n color: inherit;\n text-shadow: none;\n }\n}\n\n.animate-flash-up {\n animation: value-flash-up 0.6s ease-out;\n}\n\n.animate-flash-down {\n animation: value-flash-down 0.6s ease-out;\n}" }, { "title": "Related Skills", "body": "Meta-skill: ai/skills/meta/design-system-creation/ — Complete design system workflow\nfinancial-data-visualization — Chart theming and data visualization\nrealtime-react-hooks — Real-time data hooks for live updates" }, { "title": "NEVER Do", "body": "Skip tabular-nums — Numbers will jump as they change\nUse linear animations — Spring/ease-out feels more natural\nAnimate decimals rapidly — Too much motion is distracting\nForget compact formatting — Large numbers need abbreviation\nShow raw floats — Always format with appropriate precision\nFlash on every render — Only flash on actual value changes" }, { "title": "Typography for Numbers", "body": ".metric {\n font-family: var(--font-mono);\n font-variant-numeric: tabular-nums;\n font-weight: 600;\n letter-spacing: -0.02em;\n}\n\n.price-large {\n font-size: 2rem;\n font-weight: 800;\n}\n\n.percentage {\n font-size: 0.875rem;\n font-weight: 500;\n}" } ], "body": "Animated Financial Display\n\nCreate engaging financial number displays with smooth animations, proper formatting, and visual feedback on value changes.\n\nWhen to Use\nBuilding trading dashboards with live prices\nShowing portfolio values that update in real-time\nDisplaying metrics that need attention on change\nAny financial UI that benefits from motion\nPattern 1: Spring-Animated Number\n\nUsing framer-motion's spring physics:\n\nimport { useSpring, animated } from '@react-spring/web';\nimport { useEffect, useRef } from 'react';\n\ninterface AnimatedNumberProps {\n value: number;\n prefix?: string;\n suffix?: string;\n decimals?: number;\n duration?: number;\n}\n\nexport function AnimatedNumber({\n value,\n prefix = '',\n suffix = '',\n decimals = 2,\n duration = 500,\n}: AnimatedNumberProps) {\n const prevValue = useRef(value);\n\n const { number } = useSpring({\n from: { number: prevValue.current },\n to: { number: value },\n config: { duration },\n });\n\n useEffect(() => {\n prevValue.current = value;\n }, [value]);\n\n return (\n \n {number.to((n) => `${prefix}${n.toFixed(decimals)}${suffix}`)}\n \n );\n}\n\nUsage\n\n\n\nPattern 2: Value with Flash Effect\n\nFlash color on value change:\n\nimport { useEffect, useState, useRef } from 'react';\nimport { cn } from '@/lib/utils';\n\ninterface FlashingValueProps {\n value: number;\n formatter: (value: number) => string;\n}\n\nexport function FlashingValue({ value, formatter }: FlashingValueProps) {\n const [flash, setFlash] = useState<'up' | 'down' | null>(null);\n const prevValue = useRef(value);\n\n useEffect(() => {\n if (value !== prevValue.current) {\n setFlash(value > prevValue.current ? 'up' : 'down');\n prevValue.current = value;\n \n const timer = setTimeout(() => setFlash(null), 600);\n return () => clearTimeout(timer);\n }\n }, [value]);\n\n return (\n \n {formatter(value)}\n \n );\n}\n\nPattern 3: Financial Number Formatting\n// lib/formatters.ts\nexport function formatCurrency(\n value: number,\n options: {\n currency?: string;\n compact?: boolean;\n decimals?: number;\n } = {}\n): string {\n const { currency = 'USD', compact = false, decimals = 2 } = options;\n\n if (compact && Math.abs(value) >= 1_000_000_000) {\n return `$${(value / 1_000_000_000).toFixed(1)}B`;\n }\n if (compact && Math.abs(value) >= 1_000_000) {\n return `$${(value / 1_000_000).toFixed(1)}M`;\n }\n if (compact && Math.abs(value) >= 1_000) {\n return `$${(value / 1_000).toFixed(1)}K`;\n }\n\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency,\n minimumFractionDigits: decimals,\n maximumFractionDigits: decimals,\n }).format(value);\n}\n\nexport function formatPercentage(\n value: number,\n options: { showSign?: boolean; decimals?: number } = {}\n): string {\n const { showSign = true, decimals = 2 } = options;\n const sign = showSign && value > 0 ? '+' : '';\n return `${sign}${value.toFixed(decimals)}%`;\n}\n\nexport function formatNumber(\n value: number,\n options: { compact?: boolean; decimals?: number } = {}\n): string {\n const { compact = false, decimals = 0 } = options;\n\n if (compact) {\n return Intl.NumberFormat('en-US', {\n notation: 'compact',\n maximumFractionDigits: 1,\n }).format(value);\n }\n\n return new Intl.NumberFormat('en-US', {\n minimumFractionDigits: decimals,\n maximumFractionDigits: decimals,\n }).format(value);\n}\n\nPattern 4: Price Ticker Component\ninterface PriceTickerProps {\n symbol: string;\n price: number;\n change24h: number;\n changePercent24h: number;\n}\n\nexport function PriceTicker({\n symbol,\n price,\n change24h,\n changePercent24h,\n}: PriceTickerProps) {\n const isPositive = changePercent24h >= 0;\n\n return (\n
\n
\n {symbol}\n
\n \n
\n \n \n \n {formatPercentage(changePercent24h)}\n \n
\n
\n );\n}\n\nPattern 5: Metric Card with Animation\ninterface MetricCardProps {\n label: string;\n value: number;\n previousValue?: number;\n format: 'currency' | 'percent' | 'number';\n}\n\nexport function MetricCard({\n label,\n value,\n previousValue,\n format,\n}: MetricCardProps) {\n const formatValue = (v: number) => {\n switch (format) {\n case 'currency': return formatCurrency(v, { compact: true });\n case 'percent': return formatPercentage(v);\n case 'number': return formatNumber(v, { compact: true });\n }\n };\n\n const change = previousValue ? ((value - previousValue) / previousValue) * 100 : null;\n\n return (\n \n
\n {label}\n
\n \n
\n \n
\n \n {change !== null && (\n
= 0 ? 'text-success' : 'text-destructive'\n )}>\n {formatPercentage(change)} from previous\n
\n )}\n \n );\n}\n\nPattern 6: CSS Value Flash Animation\n@keyframes value-flash-up {\n 0% { \n color: hsl(var(--success));\n text-shadow: 0 0 8px hsl(var(--success) / 0.5);\n }\n 100% { \n color: inherit;\n text-shadow: none;\n }\n}\n\n@keyframes value-flash-down {\n 0% { \n color: hsl(var(--destructive));\n text-shadow: 0 0 8px hsl(var(--destructive) / 0.5);\n }\n 100% { \n color: inherit;\n text-shadow: none;\n }\n}\n\n.animate-flash-up {\n animation: value-flash-up 0.6s ease-out;\n}\n\n.animate-flash-down {\n animation: value-flash-down 0.6s ease-out;\n}\n\nRelated Skills\nMeta-skill: ai/skills/meta/design-system-creation/ — Complete design system workflow\nfinancial-data-visualization — Chart theming and data visualization\nrealtime-react-hooks — Real-time data hooks for live updates\nNEVER Do\nSkip tabular-nums — Numbers will jump as they change\nUse linear animations — Spring/ease-out feels more natural\nAnimate decimals rapidly — Too much motion is distracting\nForget compact formatting — Large numbers need abbreviation\nShow raw floats — Always format with appropriate precision\nFlash on every render — Only flash on actual value changes\nTypography for Numbers\n.metric {\n font-family: var(--font-mono);\n font-variant-numeric: tabular-nums;\n font-weight: 600;\n letter-spacing: -0.02em;\n}\n\n.price-large {\n font-size: 2rem;\n font-weight: 800;\n}\n\n.percentage {\n font-size: 0.875rem;\n font-weight: 500;\n}" }, "trust": { "sourceLabel": "tencent", "provenanceUrl": "https://clawhub.ai/wpank/animated-financial-display", "publisherUrl": "https://clawhub.ai/wpank/animated-financial-display", "owner": "wpank", "version": "1.0.0", "license": null, "verificationStatus": "Indexed source record" }, "links": { "detailUrl": "https://openagent3.xyz/skills/animated-financial-display", "downloadUrl": "https://openagent3.xyz/downloads/animated-financial-display", "agentUrl": "https://openagent3.xyz/skills/animated-financial-display/agent", "manifestUrl": "https://openagent3.xyz/skills/animated-financial-display/agent.json", "briefUrl": "https://openagent3.xyz/skills/animated-financial-display/agent.md" } }