An animated financial chart card with interactive time period selection, three data source modes, and a drawing SVG path animation. Gradient border, bottom glow, radial card background and vertical grid lines. Built for crypto dashboards, stock trackers, analytics displays, and any fintech interface that needs a premium data visualization card.
Animated SVG chart path — draws and redraws on an 8-second infinite loop
Hover zoom on chart — 1.5x scale with smooth transition
Interactive time period selector — 1H, 1D, 1W, 1M, ALL
Selected period button scales to 1.1x with gradient background
Three data source modes — static and JSON
Gradient border top to bottom
Bottom glow effect with 70px blur
Radial gradient card background for depth
Four vertical grid lines with gradient opacity
Gradient text effects on title and change percentage
15+ color controls across container, buttons, text and chart
Three font controls — title, change and buttons
No dependencies
Static — hardcoded title and change % set directly in Framer properties. Best for mockups and fixed displays.
JSON — direct JSON input for custom datasets. Useful for testing or static complex data.
Data Source
Data source type — static, JSON
Content
Title text · Change percentage text
Colors
Container — shadow, border gradient start/end, card center, bottom glow
Buttons — text, hover, selected background, selected inner
Text — title gradient (3 stops) · change gradient (2 stops)
Chart — chart gradient (3 stops) · vertical lines color
Typography — title font · change font · button font · size, weight, spacing, line height
SVG stroke-dasharray animation for chart path drawing effect
CSS keyframe draw animation — 0% to 50% to 100% loop
useMemo for optimized JSON parsing and data calculation
startTransition for non-blocking state updates
Proper interval cleanup on unmount
GPU-accelerated CSS transforms for all animations
Radio inputs for keyboard-accessible period selection
Static data source · BTC title · +1.5% change
Periods — 1H, 1D, 1W, 1M, ALL
300×300px · 32px border radius
Dark radial gradient background · bottom glow enabled
Crypto dashboards · Stock market displays · Portfolio performance cards · Trading platform widgets · KPI cards · Revenue tracking · Analytics displays · Marketing metric cards · SaaS dashboards
SEO Keywords
framer chart card · framer crypto card · framer finance component · framer data visualization · framer chart component · framer crypto dashboard · framer stock chart · framer KPI card · framer analytics card · framer financial dashboard · framer animated chart · framer data card · framer metric card · framer code component · framer dashboard component
Hamim Reza
