Stats 13 block design & features
Stats13 is a centered comparison section built with shadcn/ui. A large heading and muted paragraph sit above four tall animated bars. Three bars represent competitors and one highlighted bar is labeled shadcnblocks, with a conversions tooltip floating above it. Each bar fills from the bottom to a percentage and shows that value in a rounded readout.
Bar tracks use a diagonal candy-stripe hatch. Filled portions are rounded at a large radius; the highlighted bar is sky blue while the others use a primary tint. Percentage readouts sit in frosted pills near the top of each fill, with a percent icon on wider screens. Bars spring upward on load. The tooltip is a small dark chip with a pointer.
The mood is competitive and playful rather than a sober metric table. Animated comparison bars with a callout tooltip are more distinctive than a standard number grid. This is an elaborate, code-driven block: the bars, hatch, and counting percentages are built in the layout, so you mainly need real competitor labels and values.
The four bars stay in a row and get narrow on small screens; the percent icon in each readout hides at that size.