ChartCard

Animated finance chart with data

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. Features 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 Data Source Modes 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. Property Controls Data Source Data source type — static, JSON Content Title text · Change percentage text Colors Container Buttons Text Chart Typography — title font · change font · button font · size, weight, spacing, line height 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

Animated finance chart with data