Feature 121 block design & features
Feature121 is a compact interactive matrix built with shadcn/ui-friendly classes, using pointer and click behavior to reveal detail copy. A two-column grid on small screens expands into a tight checkerboard capped in width, with single-pixel gutters revealing the page background between tiles. Each tile shows an uppercase title, a centered circular primary badge hosting an inverted Lucide icon, and hidden descriptive text that fades in when a tile is toggled active. Hover gently scales the badge and deepens its shadow to signal affordance.
Palette-wise the tiles sit on accented surfaces with hover lightening, while icons invert against the primary circle for punch. Motion is short-eased CSS transitions rather than continuous animation, so the block feels tactile without becoming noisy.
This is a distinctive, interaction-heavy take on feature grids: more playful and exploratory than a static icon list. It is also more elaborate because each cell coordinates hover emphasis with a click-to-reveal detail state. Expect to tune copy length so expanded paragraphs do not collide with neighboring tiles on short viewports.
On mobile the grid keeps two columns with touch-friendly targets; descriptions swap in over the same footprint, so plan content that fits square cells without requiring multi-page depth.