[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"summary-d64f00928ca0913f-bulletproof-css-color-systems-with-contrast-color-summary":3,"summaries-facets-categories":173,"summary-related-d64f00928ca0913f-bulletproof-css-color-systems-with-contrast-color-summary":3758},{"id":4,"title":5,"ai":6,"body":13,"categories":114,"created_at":116,"date_modified":116,"description":108,"extension":117,"faq":116,"featured":118,"kicker_label":116,"meta":119,"navigation":152,"path":153,"published_at":154,"question":116,"scraped_at":155,"seo":156,"sitemap":157,"source_id":158,"source_name":159,"source_type":160,"source_url":161,"stem":162,"tags":163,"thumbnail_url":168,"tldr":169,"tweet":170,"unknown_tags":171,"__hash__":172},"summaries\u002Fsummaries\u002Fd64f00928ca0913f-bulletproof-css-color-systems-with-contrast-color-summary.md","Bulletproof CSS Color Systems with contrast-color()",{"provider":7,"model":8,"input_tokens":9,"output_tokens":10,"processing_time_ms":11,"cost_usd":12},"openrouter","x-ai\u002Fgrok-4.1-fast",7048,1824,25620,0.00181475,{"type":14,"value":15,"toc":107},"minimark",[16,21,38,41,45,64,78,82,100],[17,18,20],"h2",{"id":19},"auto-contrast-text-without-manual-declarations","Auto-Contrast Text Without Manual Declarations",[22,23,24,25,29,30,33,34,37],"p",{},"CSS ",[26,27,28],"code",{},"contrast-color()"," automatically selects white or black text for optimal readability against any background, eliminating hardcoded colors. Apply it like ",[26,31,32],{},"color: contrast-color(var(--bg-color));"," on buttons or components. For a neutral-900 background (near white), text switches to black; on rebecca-purple or firebrick hover states, it flips to white. This works because the function computes contrast against the exact background var passed in, ensuring WCAG-compliant ratios without extra logic. Limitation: it only chooses between white or black—no custom palettes yet, unlike the deprecated ",[26,35,36],{},"color-contrast()"," spec which allowed fallback lists.",[22,39,40],{},"Trade-off: Binary choice simplifies implementation but may not suit branded designs needing specific accents; monitor browser support as it's nearing baseline availability.",[17,42,44],{"id":43},"private-properties-for-themed-fallbacks","Private Properties for Themed Fallbacks",[22,46,47,48,51,52,55,56,59,60,63],{},"Define private custom properties (prefixed with ",[26,49,50],{},"_",") to create robust theming layers: ",[26,53,54],{},"--_button-surface: var(--button-surface, white);",". The underscore makes it 'private'—ignored by consumers—while providing fallbacks. Set backgrounds as ",[26,57,58],{},"background-color: var(--_button-surface);"," and ",[26,61,62],{},"color: contrast-color(var(--_button-surface));",".",[22,65,66,67,59,70,73,74,77],{},"For variants, override publicly: ",[26,68,69],{},"[data-theme=\"primary\"] { --button-surface: var(--primary); }",[26,71,72],{},"[data-theme=\"accent\"] { --button-surface: var(--accent); }",". Hover uses ",[26,75,76],{},"--_button-surface-hover: var(--button-surface-hover, firebrick);",". This cascades cleanly: undefined vars fall back (e.g., to white\u002Ffirebrick), then theme overrides propagate, auto-adjusting text contrast. Benefits: Centralizes color logic in CSS vars, scales to web components, and avoids repetition across states.",[17,79,81],{"id":80},"dynamic-hovers-and-lightdark-mode-integration","Dynamic Hovers and Light\u002FDark Mode Integration",[22,83,84,85,88,89,92,93,96,97,99],{},"Generate hover states with ",[26,86,87],{},"color-mix(in srgb, var(--primary) 50%, var(--neutral-100));",", blending theme colors with neutrals for subtle shifts (e.g., 20-90% mix ratios control darkening\u002Flightening). Pair with ",[26,90,91],{},"light-dark()"," on neutrals: ",[26,94,95],{},"--neutral-900: light-dark(black, white);"," ensures hovers adapt—dark mode darkens primaries, light mode lightens them—while ",[26,98,28],{}," flips text accordingly.",[22,101,102,103,106],{},"Example outcomes: Primary button hovers darken via neutral mix; accent follows suit. Toggle ",[26,104,105],{},"prefers-color-scheme"," in dev tools to test: neutrals swap, mixes recompute, text contrasts update live. This builds 'bulletproof' systems handling arbitrary themes without breakage, ideal for design systems where colors evolve.",{"title":108,"searchDepth":109,"depth":109,"links":110},"",2,[111,112,113],{"id":19,"depth":109,"text":20},{"id":43,"depth":109,"text":44},{"id":80,"depth":109,"text":81},[115],"Design & Frontend",null,"md",false,{"content_references":120,"triage":147},[121,126,129,134,137,141,144],{"type":122,"title":123,"url":124,"context":125},"other","light-dark() video","https:\u002F\u002Fyoutube.com\u002Fshorts\u002F1-yzpfTTGIg","recommended",{"type":122,"title":127,"url":128,"context":125},"color-mix() video","https:\u002F\u002Fyoutu.be\u002FI9zHX-jSKpA",{"type":130,"title":131,"url":132,"context":133},"event","CSS Day","https:\u002F\u002Fcssday.nl\u002F","mentioned",{"type":130,"title":135,"url":136,"context":133},"ZurichJS","https:\u002F\u002Fconf.zurichjs.com\u002F",{"type":138,"title":139,"url":140,"context":133},"tool","CodePen","https:\u002F\u002Fcodepen.io\u002F",{"type":138,"title":142,"url":143,"context":133},"Zed","https:\u002F\u002Fzed.dev\u002F",{"type":138,"title":145,"url":146,"context":133},"VS Code","https:\u002F\u002Fcode.visualstudio.com\u002F",{"relevance":148,"novelty":149,"quality":148,"actionability":148,"composite":150,"reasoning":151},4,3,3.8,"Category: Design & Frontend. The article provides practical insights into using CSS functions for creating accessible color systems, addressing a specific pain point for designers and developers in maintaining readability across themes. It includes actionable techniques like using `contrast-color()` and private properties for theming, which can be directly applied in frontend development.",true,"\u002Fsummaries\u002Fd64f00928ca0913f-bulletproof-css-color-systems-with-contrast-color-summary","2026-05-13 13:00:38","2026-05-13 19:00:32",{"title":5,"description":108},{"loc":153},"d64f00928ca0913f","Kevin Powell","video","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=JEJbSGtZxOw","summaries\u002Fd64f00928ca0913f-bulletproof-css-color-systems-with-contrast-color-summary",[164,165,166,167],"frontend","design-systems","ui-ux","css","https:\u002F\u002Fi.ytimg.com\u002Fvi\u002FJEJbSGtZxOw\u002Fhqdefault.jpg","Use contrast-color() to auto-pick white or black text for any background, combined with private custom properties for fallbacks and color-mix() for dynamic hovers that adapt to light\u002Fdark modes.","Explains CSS `contrast-color()` for auto-switching text to black\u002Fwhite against any background, with a button demo starting basic then scaling to themeable vars via Lea Verou's private-property pattern (`--_button-surface`). References prior [light-dark()](https:\u002F\u002Fyoutube.com\u002Fshorts\u002F1-yzpfTTGIg) and [color-mix()](https:\u002F\u002Fyoutu.be\u002FI9zHX-jSKpA) videos.",[167],"U9Alj68lZz3PISIslY_1G8DZAUuS17WYG1jXGzjLs4s",[174,177,180,183,186,189,191,193,195,197,199,201,204,206,208,210,212,214,216,218,220,222,224,227,229,231,234,236,238,241,243,245,247,249,251,253,255,257,259,261,263,265,267,269,271,273,275,277,279,281,283,285,287,289,291,293,295,297,299,301,303,305,307,309,311,313,315,317,319,321,323,325,327,329,331,333,335,337,339,341,343,345,347,349,351,353,355,357,359,361,363,365,367,369,371,373,375,377,379,381,383,385,387,389,391,393,395,397,399,401,403,405,407,409,411,413,415,417,419,421,423,425,427,429,431,433,435,437,439,441,443,445,447,449,451,453,455,457,459,461,463,465,467,469,471,473,475,477,479,481,483,485,487,489,491,493,495,498,500,502,504,506,508,510,512,514,516,518,520,522,524,526,528,530,532,534,536,538,540,542,544,546,548,550,552,554,556,558,560,562,564,566,568,570,572,574,576,578,580,582,584,586,588,590,592,594,596,598,600,602,604,606,608,610,612,614,616,618,620,622,624,626,628,630,632,634,636,638,640,642,644,646,648,650,652,654,656,658,660,662,664,666,668,670,672,674,676,678,680,682,684,686,688,690,692,694,696,698,700,702,704,706,708,710,712,714,716,718,720,722,724,726,728,730,732,734,736,738,740,742,744,746,748,750,752,754,756,758,760,762,764,766,768,770,772,774,776,778,780,782,784,786,788,790,792,794,796,798,800,802,804,806,808,810,812,814,816,818,820,822,824,826,828,830,832,834,836,838,840,842,844,846,848,850,852,854,856,858,860,862,864,866,868,870,872,874,876,878,880,882,884,886,888,890,892,894,896,898,900,902,904,906,908,910,912,914,916,918,920,922,924,926,928,930,932,934,936,938,940,942,944,946,948,950,952,954,956,958,960,962,964,966,968,970,972,974,976,978,980,982,984,986,988,990,992,994,996,998,1000,1002,1004,1006,1008,1010,1012,1014,1016,1018,1020,1022,1024,1026,1028,1030,1032,1034,1036,1038,1040,1042,1044,1046,1048,1050,1052,1054,1056,1058,1060,1062,1064,1066,1068,1070,1072,1074,1076,1078,1080,1082,1084,1086,1088,1090,1092,1094,1096,1098,1100,1102,1104,1106,1108,1110,1112,1114,1116,1118,1120,1122,1124,1126,1128,1130,1132,1134,1136,1138,1140,1142,1144,1146,1148,1150,1152,1154,1156,1158,1160,1162,1164,1166,1168,1170,1172,1174,1176,1178,1180,1182,1184,1186,1188,1190,1192,1194,1196,1198,1200,1202,1204,1206,1208,1210,1212,1214,1216,1218,1220,1222,1224,1226,1228,1230,1232,1234,1236,1238,1240,1242,1244,1246,1248,1250,1252,1254,1256,1258,1260,1262,1264,1266,1268,1270,1272,1274,1276,1278,1280,1282,1284,1286,1288,1290,1292,1294,1296,1298,1300,1302,1304,1306,1308,1310,1312,1314,1316,1318,1320,1322,1324,1326,1328,1330,1332,1334,1336,1338,1340,1342,1344,1346,1348,1350,1352,1354,1356,1358,1360,1362,1364,1366,1368,1370,1372,1374,1376,1378,1380,1382,1384,1386,1388,1390,1392,1394,1396,1398,1400,1402,1404,1406,1408,1410,1412,1414,1416,1418,1420,1422,1424,1426,1428,1430,1432,1434,1436,1438,1440,1442,1444,1446,1448,1450,1452,1454,1456,1458,1460,1462,1464,1466,1468,1470,1472,1474,1476,1478,1480,1482,1484,1486,1488,1490,1492,1494,1496,1498,1500,1502,1504,1506,1508,1510,1512,1514,1516,1518,1520,1522,1524,1526,1528,1530,1532,1534,1536,1538,1540,1542,1544,1546,1548,1550,1552,1554,1556,1558,1560,1562,1564,1566,1568,1570,1572,1574,1576,1578,1580,1582,1584,1586,1588,1590,1592,1594,1596,1598,1600,1602,1604,1606,1608,1610,1612,1614,1616,1618,1620,1622,1624,1626,1628,1630,1632,1634,1636,1638,1640,1642,1644,1646,1648,1650,1652,1654,1656,1658,1660,1662,1664,1666,1668,1670,1672,1674,1676,1678,1680,1682,1684,1686,1688,1690,1692,1694,1696,1698,1700,1702,1704,1706,1708,1710,1712,1714,1716,1718,1720,1722,1724,1726,1728,1730,1732,1734,1736,1738,1740,1742,1744,1746,1748,1750,1752,1754,1756,1758,1760,1762,1764,1766,1768,1770,1772,1774,1776,1778,1780,1782,1784,1786,1788,1790,1792,1794,1796,1798,1800,1802,1804,1806,1808,1810,1812,1814,1816,1818,1820,1822,1824,1826,1828,1830,1832,1834,1836,1838,1840,1842,1844,1846,1848,1850,1852,1854,1856,1858,1860,1862,1864,1866,1868,1870,1872,1874,1876,1878,1880,1882,1884,1886,1888,1890,1892,1894,1896,1898,1900,1902,1904,1906,1908,1910,1912,1914,1916,1918,1920,1922,1924,1926,1928,1930,1932,1934,1936,1938,1940,1942,1944,1946,1948,1950,1952,1954,1956,1958,1960,1962,1964,1966,1968,1970,1972,1974,1976,1978,1980,1982,1984,1986,1988,1990,1992,1994,1996,1998,2000,2002,2004,2006,2008,2010,2012,2014,2016,2018,2020,2022,2024,2026,2028,2030,2032,2034,2036,2038,2040,2042,2044,2046,2048,2050,2052,2054,2056,2058,2060,2062,2064,2066,2068,2070,2072,2074,2076,2078,2080,2082,2084,2086,2088,2090,2092,2094,2096,2098,2100,2102,2104,2106,2108,2110,2112,2114,2116,2118,2120,2122,2124,2126,2128,2130,2132,2134,2136,2138,2140,2142,2144,2146,2148,2150,2152,2154,2156,2158,2160,2162,2164,2166,2168,2170,2172,2174,2176,2178,2180,2182,2184,2186,2188,2190,2192,2194,2196,2198,2200,2202,2204,2206,2208,2210,2212,2214,2216,2218,2220,2222,2224,2226,2228,2230,2232,2234,2236,2238,2240,2242,2244,2246,2248,2250,2252,2254,2256,2258,2260,2262,2264,2266,2268,2270,2272,2274,2276,2278,2280,2282,2284,2286,2288,2290,2292,2294,2296,2298,2300,2302,2304,2306,2308,2310,2312,2314,2316,2318,2320,2322,2324,2326,2328,2330,2332,2334,2336,2338,2340,2342,2344,2346,2348,2350,2352,2354,2356,2358,2360,2362,2364,2366,2368,2370,2372,2374,2376,2378,2380,2382,2384,2386,2388,2390,2392,2394,2396,2398,2400,2402,2404,2406,2408,2410,2412,2414,2416,2418,2420,2422,2424,2426,2428,2430,2432,2434,2436,2438,2440,2442,2444,2446,2448,2450,2452,2454,2456,2458,2460,2462,2464,2466,2468,2470,2472,2474,2476,2478,2480,2482,2484,2486,2488,2490,2492,2494,2496,2498,2500,2502,2504,2506,2508,2510,2512,2514,2516,2518,2520,2522,2524,2526,2528,2530,2532,2534,2536,2538,2540,2542,2544,2546,2548,2550,2552,2554,2556,2558,2560,2562,2564,2566,2568,2570,2572,2574,2576,2578,2580,2582,2584,2586,2588,2590,2592,2594,2596,2598,2600,2602,2604,2606,2608,2610,2612,2614,2616,2618,2620,2622,2624,2626,2628,2630,2632,2634,2636,2638,2640,2642,2644,2646,2648,2650,2652,2654,2656,2658,2660,2662,2664,2666,2668,2670,2672,2674,2676,2678,2680,2682,2684,2686,2688,2690,2692,2694,2696,2698,2700,2702,2704,2706,2708,2710,2712,2714,2716,2718,2720,2722,2724,2726,2728,2730,2732,2734,2736,2738,2740,2742,2744,2746,2748,2750,2752,2754,2756,2758,2760,2762,2764,2766,2768,2770,2772,2774,2776,2778,2780,2782,2784,2786,2788,2790,2792,2794,2796,2798,2800,2802,2804,2806,2808,2810,2812,2814,2816,2818,2820,2822,2824,2826,2828,2830,2832,2834,2836,2838,2840,2842,2844,2846,2848,2850,2852,2854,2856,2858,2860,2862,2864,2866,2868,2870,2872,2874,2876,2878,2880,2882,2884,2886,2888,2890,2892,2894,2896,2898,2900,2902,2904,2906,2908,2910,2912,2914,2916,2918,2920,2922,2924,2926,2928,2930,2932,2934,2936,2938,2940,2942,2944,2946,2948,2950,2952,2954,2956,2958,2960,2962,2964,2966,2968,2970,2972,2974,2976,2978,2980,2982,2984,2986,2988,2990,2992,2994,2996,2998,3000,3002,3004,3006,3008,3010,3012,3014,3016,3018,3020,3022,3024,3026,3028,3030,3032,3034,3036,3038,3040,3042,3044,3046,3048,3050,3052,3054,3056,3058,3060,3062,3064,3066,3068,3070,3072,3074,3076,3078,3080,3082,3084,3086,3088,3090,3092,3094,3096,3098,3100,3102,3104,3106,3108,3110,3112,3114,3116,3118,3120,3122,3124,3126,3128,3130,3132,3134,3136,3138,3140,3142,3144,3146,3148,3150,3152,3154,3156,3158,3160,3162,3164,3166,3168,3170,3172,3174,3176,3178,3180,3182,3184,3186,3188,3190,3192,3194,3196,3198,3200,3202,3204,3206,3208,3210,3212,3214,3216,3218,3220,3222,3224,3226,3228,3230,3232,3234,3236,3238,3240,3242,3244,3246,3248,3250,3252,3254,3256,3258,3260,3262,3264,3266,3268,3270,3272,3274,3276,3278,3280,3282,3284,3286,3288,3290,3292,3294,3296,3298,3300,3302,3304,3306,3308,3310,3312,3314,3316,3318,3320,3322,3324,3326,3328,3330,3332,3334,3336,3338,3340,3342,3344,3346,3348,3350,3352,3354,3356,3358,3360,3362,3364,3366,3368,3370,3372,3374,3376,3378,3380,3382,3384,3386,3388,3390,3392,3394,3396,3398,3400,3402,3404,3406,3408,3410,3412,3414,3416,3418,3420,3422,3424,3426,3428,3430,3432,3434,3436,3438,3440,3442,3444,3446,3448,3450,3452,3454,3456,3458,3460,3462,3464,3466,3468,3470,3472,3474,3476,3478,3480,3482,3484,3486,3488,3490,3492,3494,3496,3498,3500,3502,3504,3506,3508,3510,3512,3514,3516,3518,3520,3522,3524,3526,3528,3530,3532,3534,3536,3538,3540,3542,3544,3546,3548,3550,3552,3554,3556,3558,3560,3562,3564,3566,3568,3570,3572,3574,3576,3578,3580,3582,3584,3586,3588,3590,3592,3594,3596,3598,3600,3602,3604,3606,3608,3610,3612,3614,3616,3618,3620,3622,3624,3626,3628,3630,3632,3634,3636,3638,3640,3642,3644,3646,3648,3650,3652,3654,3656,3658,3660,3662,3664,3666,3668,3670,3672,3674,3676,3678,3680,3682,3684,3686,3688,3690,3692,3694,3696,3698,3700,3702,3704,3706,3708,3710,3712,3714,3716,3718,3720,3722,3724,3726,3728,3730,3732,3734,3736,3738,3740,3742,3744,3746,3748,3750,3752,3754,3756],{"categories":175},[176],"Developer Productivity",{"categories":178},[179],"Business & SaaS",{"categories":181},[182],"AI & LLMs",{"categories":184},[185],"AI Automation",{"categories":187},[188],"Product Strategy",{"categories":190},[182],{"categories":192},[176],{"categories":194},[179],{"categories":196},[],{"categories":198},[182],{"categories":200},[],{"categories":202},[203],"AI News & Trends",{"categories":205},[185],{"categories":207},[203],{"categories":209},[185],{"categories":211},[185],{"categories":213},[182],{"categories":215},[182],{"categories":217},[203],{"categories":219},[182],{"categories":221},[],{"categories":223},[115],{"categories":225},[226],"Data Science & Visualization",{"categories":228},[203],{"categories":230},[],{"categories":232},[233],"Software Engineering",{"categories":235},[182],{"categories":237},[185],{"categories":239},[240],"Marketing & Growth",{"categories":242},[182],{"categories":244},[185],{"categories":246},[],{"categories":248},[],{"categories":250},[115],{"categories":252},[185],{"categories":254},[176],{"categories":256},[115],{"categories":258},[182],{"categories":260},[185],{"categories":262},[203],{"categories":264},[],{"categories":266},[],{"categories":268},[185],{"categories":270},[233],{"categories":272},[],{"categories":274},[179],{"categories":276},[],{"categories":278},[],{"categories":280},[185],{"categories":282},[185],{"categories":284},[182],{"categories":286},[],{"categories":288},[233],{"categories":290},[],{"categories":292},[],{"categories":294},[],{"categories":296},[182],{"categories":298},[240],{"categories":300},[115],{"categories":302},[115],{"categories":304},[182],{"categories":306},[185],{"categories":308},[182],{"categories":310},[182],{"categories":312},[185],{"categories":314},[185],{"categories":316},[226],{"categories":318},[203],{"categories":320},[185],{"categories":322},[240],{"categories":324},[185],{"categories":326},[188],{"categories":328},[],{"categories":330},[185],{"categories":332},[],{"categories":334},[185],{"categories":336},[233],{"categories":338},[115],{"categories":340},[182],{"categories":342},[],{"categories":344},[],{"categories":346},[185],{"categories":348},[],{"categories":350},[182],{"categories":352},[],{"categories":354},[176],{"categories":356},[233],{"categories":358},[179],{"categories":360},[203],{"categories":362},[182],{"categories":364},[],{"categories":366},[182],{"categories":368},[],{"categories":370},[233],{"categories":372},[226],{"categories":374},[],{"categories":376},[182],{"categories":378},[115],{"categories":380},[],{"categories":382},[115],{"categories":384},[185],{"categories":386},[],{"categories":388},[185],{"categories":390},[203],{"categories":392},[179],{"categories":394},[182],{"categories":396},[],{"categories":398},[185],{"categories":400},[182],{"categories":402},[188],{"categories":404},[],{"categories":406},[182],{"categories":408},[185],{"categories":410},[185],{"categories":412},[],{"categories":414},[226],{"categories":416},[182],{"categories":418},[],{"categories":420},[176],{"categories":422},[179],{"categories":424},[182],{"categories":426},[185],{"categories":428},[233],{"categories":430},[182],{"categories":432},[],{"categories":434},[],{"categories":436},[182],{"categories":438},[],{"categories":440},[115],{"categories":442},[],{"categories":444},[182],{"categories":446},[],{"categories":448},[185],{"categories":450},[182],{"categories":452},[115],{"categories":454},[],{"categories":456},[182],{"categories":458},[182],{"categories":460},[179],{"categories":462},[185],{"categories":464},[182],{"categories":466},[115],{"categories":468},[185],{"categories":470},[],{"categories":472},[],{"categories":474},[203],{"categories":476},[],{"categories":478},[182],{"categories":480},[179,240],{"categories":482},[],{"categories":484},[182],{"categories":486},[],{"categories":488},[],{"categories":490},[182],{"categories":492},[],{"categories":494},[182],{"categories":496},[497],"DevOps & Cloud",{"categories":499},[],{"categories":501},[203],{"categories":503},[115],{"categories":505},[],{"categories":507},[203],{"categories":509},[203],{"categories":511},[182],{"categories":513},[240],{"categories":515},[],{"categories":517},[179],{"categories":519},[],{"categories":521},[182,497],{"categories":523},[182],{"categories":525},[182],{"categories":527},[185],{"categories":529},[182,233],{"categories":531},[226],{"categories":533},[182],{"categories":535},[240],{"categories":537},[185],{"categories":539},[185],{"categories":541},[],{"categories":543},[185],{"categories":545},[182,179],{"categories":547},[],{"categories":549},[115],{"categories":551},[115],{"categories":553},[],{"categories":555},[],{"categories":557},[203],{"categories":559},[],{"categories":561},[176],{"categories":563},[233],{"categories":565},[182],{"categories":567},[115],{"categories":569},[185],{"categories":571},[233],{"categories":573},[203],{"categories":575},[115],{"categories":577},[],{"categories":579},[182],{"categories":581},[182],{"categories":583},[182],{"categories":585},[203],{"categories":587},[176],{"categories":589},[182],{"categories":591},[185],{"categories":593},[497],{"categories":595},[115],{"categories":597},[185],{"categories":599},[],{"categories":601},[],{"categories":603},[115],{"categories":605},[203],{"categories":607},[226],{"categories":609},[],{"categories":611},[182],{"categories":613},[182],{"categories":615},[179],{"categories":617},[182],{"categories":619},[182],{"categories":621},[203],{"categories":623},[],{"categories":625},[185],{"categories":627},[233],{"categories":629},[],{"categories":631},[182],{"categories":633},[182],{"categories":635},[185],{"categories":637},[],{"categories":639},[],{"categories":641},[182],{"categories":643},[],{"categories":645},[179],{"categories":647},[185],{"categories":649},[],{"categories":651},[176],{"categories":653},[182],{"categories":655},[179],{"categories":657},[203],{"categories":659},[],{"categories":661},[],{"categories":663},[],{"categories":665},[203],{"categories":667},[203],{"categories":669},[],{"categories":671},[],{"categories":673},[179],{"categories":675},[],{"categories":677},[],{"categories":679},[176],{"categories":681},[],{"categories":683},[240],{"categories":685},[185],{"categories":687},[179],{"categories":689},[185],{"categories":691},[233],{"categories":693},[],{"categories":695},[188],{"categories":697},[115],{"categories":699},[233],{"categories":701},[182],{"categories":703},[185],{"categories":705},[179],{"categories":707},[182],{"categories":709},[],{"categories":711},[],{"categories":713},[233],{"categories":715},[226],{"categories":717},[188],{"categories":719},[185],{"categories":721},[182],{"categories":723},[],{"categories":725},[497],{"categories":727},[],{"categories":729},[185],{"categories":731},[],{"categories":733},[],{"categories":735},[182],{"categories":737},[115],{"categories":739},[240],{"categories":741},[185],{"categories":743},[],{"categories":745},[176],{"categories":747},[],{"categories":749},[203],{"categories":751},[182,497],{"categories":753},[203],{"categories":755},[182],{"categories":757},[179],{"categories":759},[182],{"categories":761},[],{"categories":763},[179],{"categories":765},[],{"categories":767},[233],{"categories":769},[115],{"categories":771},[203],{"categories":773},[226],{"categories":775},[176],{"categories":777},[182],{"categories":779},[233],{"categories":781},[],{"categories":783},[],{"categories":785},[188],{"categories":787},[],{"categories":789},[182],{"categories":791},[],{"categories":793},[115],{"categories":795},[115],{"categories":797},[115],{"categories":799},[],{"categories":801},[],{"categories":803},[203],{"categories":805},[185],{"categories":807},[182],{"categories":809},[182],{"categories":811},[182],{"categories":813},[179],{"categories":815},[182],{"categories":817},[],{"categories":819},[233],{"categories":821},[233],{"categories":823},[179],{"categories":825},[],{"categories":827},[182],{"categories":829},[182],{"categories":831},[179],{"categories":833},[203],{"categories":835},[240],{"categories":837},[185],{"categories":839},[],{"categories":841},[115],{"categories":843},[],{"categories":845},[182],{"categories":847},[],{"categories":849},[179],{"categories":851},[185],{"categories":853},[],{"categories":855},[497],{"categories":857},[226],{"categories":859},[233],{"categories":861},[240],{"categories":863},[233],{"categories":865},[185],{"categories":867},[],{"categories":869},[],{"categories":871},[185],{"categories":873},[176],{"categories":875},[185],{"categories":877},[188],{"categories":879},[179],{"categories":881},[],{"categories":883},[182],{"categories":885},[188],{"categories":887},[182],{"categories":889},[182],{"categories":891},[240],{"categories":893},[115],{"categories":895},[185],{"categories":897},[],{"categories":899},[],{"categories":901},[497],{"categories":903},[233],{"categories":905},[],{"categories":907},[185],{"categories":909},[182],{"categories":911},[115,182],{"categories":913},[176],{"categories":915},[],{"categories":917},[182],{"categories":919},[176],{"categories":921},[115],{"categories":923},[185],{"categories":925},[233],{"categories":927},[],{"categories":929},[182],{"categories":931},[],{"categories":933},[176],{"categories":935},[],{"categories":937},[185],{"categories":939},[188],{"categories":941},[182],{"categories":943},[182],{"categories":945},[115],{"categories":947},[185],{"categories":949},[497],{"categories":951},[115],{"categories":953},[185],{"categories":955},[182],{"categories":957},[182],{"categories":959},[182],{"categories":961},[203],{"categories":963},[],{"categories":965},[188],{"categories":967},[185],{"categories":969},[115],{"categories":971},[185],{"categories":973},[233],{"categories":975},[115],{"categories":977},[185],{"categories":979},[203],{"categories":981},[],{"categories":983},[182],{"categories":985},[115],{"categories":987},[182],{"categories":989},[176],{"categories":991},[203],{"categories":993},[182],{"categories":995},[240],{"categories":997},[182],{"categories":999},[182],{"categories":1001},[185],{"categories":1003},[185],{"categories":1005},[182],{"categories":1007},[185],{"categories":1009},[115],{"categories":1011},[182],{"categories":1013},[],{"categories":1015},[],{"categories":1017},[233],{"categories":1019},[],{"categories":1021},[176],{"categories":1023},[497],{"categories":1025},[],{"categories":1027},[176],{"categories":1029},[179],{"categories":1031},[240],{"categories":1033},[],{"categories":1035},[179],{"categories":1037},[],{"categories":1039},[],{"categories":1041},[],{"categories":1043},[],{"categories":1045},[],{"categories":1047},[182],{"categories":1049},[185],{"categories":1051},[497],{"categories":1053},[176],{"categories":1055},[182],{"categories":1057},[233],{"categories":1059},[188],{"categories":1061},[182],{"categories":1063},[240],{"categories":1065},[182],{"categories":1067},[182],{"categories":1069},[182],{"categories":1071},[182,176],{"categories":1073},[233],{"categories":1075},[233],{"categories":1077},[115],{"categories":1079},[182],{"categories":1081},[],{"categories":1083},[],{"categories":1085},[],{"categories":1087},[233],{"categories":1089},[226],{"categories":1091},[203],{"categories":1093},[115],{"categories":1095},[],{"categories":1097},[182],{"categories":1099},[182],{"categories":1101},[],{"categories":1103},[],{"categories":1105},[185],{"categories":1107},[182],{"categories":1109},[179],{"categories":1111},[],{"categories":1113},[176],{"categories":1115},[182],{"categories":1117},[176],{"categories":1119},[182],{"categories":1121},[233],{"categories":1123},[240],{"categories":1125},[182,115],{"categories":1127},[203],{"categories":1129},[115],{"categories":1131},[],{"categories":1133},[497],{"categories":1135},[115],{"categories":1137},[185],{"categories":1139},[],{"categories":1141},[],{"categories":1143},[],{"categories":1145},[],{"categories":1147},[233],{"categories":1149},[185],{"categories":1151},[185],{"categories":1153},[497],{"categories":1155},[182],{"categories":1157},[182],{"categories":1159},[182],{"categories":1161},[],{"categories":1163},[115],{"categories":1165},[],{"categories":1167},[],{"categories":1169},[185],{"categories":1171},[],{"categories":1173},[],{"categories":1175},[240],{"categories":1177},[240],{"categories":1179},[185],{"categories":1181},[],{"categories":1183},[182],{"categories":1185},[182],{"categories":1187},[233],{"categories":1189},[115],{"categories":1191},[115],{"categories":1193},[185],{"categories":1195},[176],{"categories":1197},[182],{"categories":1199},[115],{"categories":1201},[115],{"categories":1203},[185],{"categories":1205},[185],{"categories":1207},[182],{"categories":1209},[],{"categories":1211},[],{"categories":1213},[182],{"categories":1215},[185],{"categories":1217},[203],{"categories":1219},[233],{"categories":1221},[176],{"categories":1223},[182],{"categories":1225},[],{"categories":1227},[185],{"categories":1229},[185],{"categories":1231},[],{"categories":1233},[176],{"categories":1235},[182],{"categories":1237},[176],{"categories":1239},[176],{"categories":1241},[],{"categories":1243},[],{"categories":1245},[185],{"categories":1247},[185],{"categories":1249},[182],{"categories":1251},[182],{"categories":1253},[203],{"categories":1255},[226],{"categories":1257},[188],{"categories":1259},[203],{"categories":1261},[115],{"categories":1263},[],{"categories":1265},[203],{"categories":1267},[],{"categories":1269},[],{"categories":1271},[],{"categories":1273},[],{"categories":1275},[233],{"categories":1277},[226],{"categories":1279},[],{"categories":1281},[182],{"categories":1283},[182],{"categories":1285},[226],{"categories":1287},[233],{"categories":1289},[],{"categories":1291},[],{"categories":1293},[185],{"categories":1295},[203],{"categories":1297},[203],{"categories":1299},[185],{"categories":1301},[176],{"categories":1303},[182,497],{"categories":1305},[],{"categories":1307},[115],{"categories":1309},[176],{"categories":1311},[185],{"categories":1313},[115],{"categories":1315},[],{"categories":1317},[185],{"categories":1319},[185],{"categories":1321},[182],{"categories":1323},[240],{"categories":1325},[233],{"categories":1327},[115],{"categories":1329},[],{"categories":1331},[185],{"categories":1333},[182],{"categories":1335},[185],{"categories":1337},[185],{"categories":1339},[185],{"categories":1341},[240],{"categories":1343},[185],{"categories":1345},[182],{"categories":1347},[],{"categories":1349},[240],{"categories":1351},[203],{"categories":1353},[185],{"categories":1355},[],{"categories":1357},[],{"categories":1359},[182],{"categories":1361},[185],{"categories":1363},[203],{"categories":1365},[185],{"categories":1367},[],{"categories":1369},[],{"categories":1371},[],{"categories":1373},[185],{"categories":1375},[],{"categories":1377},[],{"categories":1379},[226],{"categories":1381},[182],{"categories":1383},[226],{"categories":1385},[203],{"categories":1387},[182],{"categories":1389},[182],{"categories":1391},[185],{"categories":1393},[182],{"categories":1395},[],{"categories":1397},[],{"categories":1399},[497],{"categories":1401},[],{"categories":1403},[],{"categories":1405},[176],{"categories":1407},[],{"categories":1409},[],{"categories":1411},[],{"categories":1413},[],{"categories":1415},[233],{"categories":1417},[203],{"categories":1419},[240],{"categories":1421},[179],{"categories":1423},[182],{"categories":1425},[182],{"categories":1427},[179],{"categories":1429},[],{"categories":1431},[115],{"categories":1433},[185],{"categories":1435},[179],{"categories":1437},[182],{"categories":1439},[182],{"categories":1441},[176],{"categories":1443},[],{"categories":1445},[176],{"categories":1447},[182],{"categories":1449},[240],{"categories":1451},[185],{"categories":1453},[203],{"categories":1455},[179],{"categories":1457},[182],{"categories":1459},[185],{"categories":1461},[],{"categories":1463},[182],{"categories":1465},[176],{"categories":1467},[182],{"categories":1469},[],{"categories":1471},[203],{"categories":1473},[182],{"categories":1475},[],{"categories":1477},[179],{"categories":1479},[182],{"categories":1481},[],{"categories":1483},[],{"categories":1485},[],{"categories":1487},[182],{"categories":1489},[],{"categories":1491},[497],{"categories":1493},[182],{"categories":1495},[],{"categories":1497},[182],{"categories":1499},[182],{"categories":1501},[182],{"categories":1503},[182,497],{"categories":1505},[182],{"categories":1507},[182],{"categories":1509},[115],{"categories":1511},[185],{"categories":1513},[],{"categories":1515},[185],{"categories":1517},[182],{"categories":1519},[182],{"categories":1521},[182],{"categories":1523},[176],{"categories":1525},[176],{"categories":1527},[233],{"categories":1529},[115],{"categories":1531},[185],{"categories":1533},[],{"categories":1535},[182],{"categories":1537},[203],{"categories":1539},[182],{"categories":1541},[179],{"categories":1543},[],{"categories":1545},[497],{"categories":1547},[115],{"categories":1549},[115],{"categories":1551},[185],{"categories":1553},[203],{"categories":1555},[185],{"categories":1557},[182],{"categories":1559},[],{"categories":1561},[182],{"categories":1563},[],{"categories":1565},[],{"categories":1567},[182],{"categories":1569},[182],{"categories":1571},[182],{"categories":1573},[185],{"categories":1575},[182],{"categories":1577},[],{"categories":1579},[226],{"categories":1581},[185],{"categories":1583},[],{"categories":1585},[],{"categories":1587},[182],{"categories":1589},[203],{"categories":1591},[],{"categories":1593},[115],{"categories":1595},[497],{"categories":1597},[203],{"categories":1599},[233],{"categories":1601},[233],{"categories":1603},[203],{"categories":1605},[203],{"categories":1607},[497],{"categories":1609},[],{"categories":1611},[203],{"categories":1613},[182],{"categories":1615},[176],{"categories":1617},[203],{"categories":1619},[],{"categories":1621},[226],{"categories":1623},[203],{"categories":1625},[233],{"categories":1627},[203],{"categories":1629},[497],{"categories":1631},[182],{"categories":1633},[182],{"categories":1635},[],{"categories":1637},[179],{"categories":1639},[],{"categories":1641},[],{"categories":1643},[182],{"categories":1645},[182],{"categories":1647},[182],{"categories":1649},[182],{"categories":1651},[],{"categories":1653},[226],{"categories":1655},[176],{"categories":1657},[],{"categories":1659},[182],{"categories":1661},[182],{"categories":1663},[497],{"categories":1665},[497],{"categories":1667},[],{"categories":1669},[185],{"categories":1671},[203],{"categories":1673},[203],{"categories":1675},[182],{"categories":1677},[185],{"categories":1679},[],{"categories":1681},[115],{"categories":1683},[182],{"categories":1685},[182],{"categories":1687},[],{"categories":1689},[],{"categories":1691},[497],{"categories":1693},[182],{"categories":1695},[233],{"categories":1697},[179],{"categories":1699},[182],{"categories":1701},[],{"categories":1703},[185],{"categories":1705},[176],{"categories":1707},[176],{"categories":1709},[],{"categories":1711},[182],{"categories":1713},[115],{"categories":1715},[185],{"categories":1717},[],{"categories":1719},[182],{"categories":1721},[182],{"categories":1723},[185],{"categories":1725},[],{"categories":1727},[185],{"categories":1729},[233],{"categories":1731},[],{"categories":1733},[182],{"categories":1735},[],{"categories":1737},[182],{"categories":1739},[],{"categories":1741},[182],{"categories":1743},[182],{"categories":1745},[],{"categories":1747},[182],{"categories":1749},[203],{"categories":1751},[182],{"categories":1753},[182],{"categories":1755},[176],{"categories":1757},[182],{"categories":1759},[203],{"categories":1761},[185],{"categories":1763},[],{"categories":1765},[182],{"categories":1767},[240],{"categories":1769},[],{"categories":1771},[],{"categories":1773},[],{"categories":1775},[176],{"categories":1777},[203],{"categories":1779},[185],{"categories":1781},[182],{"categories":1783},[115],{"categories":1785},[185],{"categories":1787},[],{"categories":1789},[185],{"categories":1791},[],{"categories":1793},[182],{"categories":1795},[185],{"categories":1797},[182],{"categories":1799},[],{"categories":1801},[182],{"categories":1803},[182],{"categories":1805},[203],{"categories":1807},[115],{"categories":1809},[185],{"categories":1811},[115],{"categories":1813},[179],{"categories":1815},[],{"categories":1817},[],{"categories":1819},[182],{"categories":1821},[176],{"categories":1823},[203],{"categories":1825},[],{"categories":1827},[],{"categories":1829},[233],{"categories":1831},[115],{"categories":1833},[],{"categories":1835},[182],{"categories":1837},[],{"categories":1839},[240],{"categories":1841},[182],{"categories":1843},[497],{"categories":1845},[233],{"categories":1847},[],{"categories":1849},[185],{"categories":1851},[182],{"categories":1853},[185],{"categories":1855},[185],{"categories":1857},[182],{"categories":1859},[],{"categories":1861},[176],{"categories":1863},[182],{"categories":1865},[179],{"categories":1867},[233],{"categories":1869},[115],{"categories":1871},[],{"categories":1873},[],{"categories":1875},[],{"categories":1877},[185],{"categories":1879},[115],{"categories":1881},[203],{"categories":1883},[182],{"categories":1885},[203],{"categories":1887},[115],{"categories":1889},[],{"categories":1891},[115],{"categories":1893},[203],{"categories":1895},[179],{"categories":1897},[182],{"categories":1899},[203],{"categories":1901},[240],{"categories":1903},[],{"categories":1905},[],{"categories":1907},[226],{"categories":1909},[182,233],{"categories":1911},[203],{"categories":1913},[182],{"categories":1915},[185],{"categories":1917},[185],{"categories":1919},[182],{"categories":1921},[],{"categories":1923},[233],{"categories":1925},[182],{"categories":1927},[226],{"categories":1929},[185],{"categories":1931},[240],{"categories":1933},[497],{"categories":1935},[],{"categories":1937},[176],{"categories":1939},[185],{"categories":1941},[185],{"categories":1943},[233],{"categories":1945},[182],{"categories":1947},[182],{"categories":1949},[],{"categories":1951},[],{"categories":1953},[],{"categories":1955},[497],{"categories":1957},[203],{"categories":1959},[182],{"categories":1961},[182],{"categories":1963},[182],{"categories":1965},[],{"categories":1967},[226],{"categories":1969},[179],{"categories":1971},[],{"categories":1973},[185],{"categories":1975},[497],{"categories":1977},[],{"categories":1979},[115],{"categories":1981},[115],{"categories":1983},[],{"categories":1985},[233],{"categories":1987},[115],{"categories":1989},[182],{"categories":1991},[],{"categories":1993},[203],{"categories":1995},[182],{"categories":1997},[115],{"categories":1999},[185],{"categories":2001},[203],{"categories":2003},[],{"categories":2005},[185],{"categories":2007},[115],{"categories":2009},[182],{"categories":2011},[],{"categories":2013},[182],{"categories":2015},[182],{"categories":2017},[497],{"categories":2019},[203],{"categories":2021},[226],{"categories":2023},[226],{"categories":2025},[],{"categories":2027},[],{"categories":2029},[],{"categories":2031},[185],{"categories":2033},[233],{"categories":2035},[233],{"categories":2037},[],{"categories":2039},[],{"categories":2041},[182],{"categories":2043},[],{"categories":2045},[185],{"categories":2047},[182],{"categories":2049},[],{"categories":2051},[182],{"categories":2053},[179],{"categories":2055},[182],{"categories":2057},[240],{"categories":2059},[185],{"categories":2061},[182],{"categories":2063},[233],{"categories":2065},[203],{"categories":2067},[185],{"categories":2069},[],{"categories":2071},[203],{"categories":2073},[185],{"categories":2075},[185],{"categories":2077},[],{"categories":2079},[179],{"categories":2081},[185],{"categories":2083},[],{"categories":2085},[182],{"categories":2087},[176],{"categories":2089},[203],{"categories":2091},[497],{"categories":2093},[185],{"categories":2095},[185],{"categories":2097},[176],{"categories":2099},[182],{"categories":2101},[],{"categories":2103},[],{"categories":2105},[115],{"categories":2107},[182,179],{"categories":2109},[],{"categories":2111},[176],{"categories":2113},[226],{"categories":2115},[182],{"categories":2117},[233],{"categories":2119},[182],{"categories":2121},[185],{"categories":2123},[182],{"categories":2125},[182],{"categories":2127},[203],{"categories":2129},[185],{"categories":2131},[],{"categories":2133},[],{"categories":2135},[185],{"categories":2137},[182],{"categories":2139},[497],{"categories":2141},[],{"categories":2143},[182],{"categories":2145},[185],{"categories":2147},[],{"categories":2149},[182],{"categories":2151},[240],{"categories":2153},[226],{"categories":2155},[185],{"categories":2157},[182],{"categories":2159},[497],{"categories":2161},[],{"categories":2163},[182],{"categories":2165},[240],{"categories":2167},[115],{"categories":2169},[182],{"categories":2171},[],{"categories":2173},[240],{"categories":2175},[203],{"categories":2177},[182],{"categories":2179},[182],{"categories":2181},[176],{"categories":2183},[],{"categories":2185},[],{"categories":2187},[115],{"categories":2189},[182],{"categories":2191},[226],{"categories":2193},[240],{"categories":2195},[240],{"categories":2197},[203],{"categories":2199},[],{"categories":2201},[],{"categories":2203},[182],{"categories":2205},[],{"categories":2207},[182,233],{"categories":2209},[203],{"categories":2211},[185],{"categories":2213},[233],{"categories":2215},[182],{"categories":2217},[176],{"categories":2219},[],{"categories":2221},[],{"categories":2223},[176],{"categories":2225},[240],{"categories":2227},[182],{"categories":2229},[],{"categories":2231},[115,182],{"categories":2233},[497],{"categories":2235},[176],{"categories":2237},[],{"categories":2239},[179],{"categories":2241},[179],{"categories":2243},[182],{"categories":2245},[233],{"categories":2247},[185],{"categories":2249},[203],{"categories":2251},[240],{"categories":2253},[115],{"categories":2255},[182],{"categories":2257},[182],{"categories":2259},[182],{"categories":2261},[176],{"categories":2263},[182],{"categories":2265},[185],{"categories":2267},[203],{"categories":2269},[],{"categories":2271},[],{"categories":2273},[226],{"categories":2275},[233],{"categories":2277},[182],{"categories":2279},[115],{"categories":2281},[226],{"categories":2283},[182],{"categories":2285},[182],{"categories":2287},[185],{"categories":2289},[185],{"categories":2291},[182,179],{"categories":2293},[],{"categories":2295},[115],{"categories":2297},[],{"categories":2299},[182],{"categories":2301},[203],{"categories":2303},[176],{"categories":2305},[176],{"categories":2307},[185],{"categories":2309},[182],{"categories":2311},[179],{"categories":2313},[233],{"categories":2315},[240],{"categories":2317},[],{"categories":2319},[203],{"categories":2321},[182],{"categories":2323},[182],{"categories":2325},[203],{"categories":2327},[233],{"categories":2329},[182],{"categories":2331},[185],{"categories":2333},[203],{"categories":2335},[182],{"categories":2337},[115],{"categories":2339},[182],{"categories":2341},[182],{"categories":2343},[497],{"categories":2345},[188],{"categories":2347},[185],{"categories":2349},[182],{"categories":2351},[203],{"categories":2353},[185],{"categories":2355},[240],{"categories":2357},[182],{"categories":2359},[],{"categories":2361},[182],{"categories":2363},[],{"categories":2365},[],{"categories":2367},[],{"categories":2369},[179],{"categories":2371},[182],{"categories":2373},[185],{"categories":2375},[203],{"categories":2377},[203],{"categories":2379},[203],{"categories":2381},[203],{"categories":2383},[],{"categories":2385},[176],{"categories":2387},[185],{"categories":2389},[203],{"categories":2391},[176],{"categories":2393},[185],{"categories":2395},[182],{"categories":2397},[182,185],{"categories":2399},[185],{"categories":2401},[497],{"categories":2403},[203],{"categories":2405},[203],{"categories":2407},[185],{"categories":2409},[182],{"categories":2411},[],{"categories":2413},[203],{"categories":2415},[240],{"categories":2417},[176],{"categories":2419},[182],{"categories":2421},[182],{"categories":2423},[],{"categories":2425},[233],{"categories":2427},[],{"categories":2429},[176],{"categories":2431},[185],{"categories":2433},[203],{"categories":2435},[182],{"categories":2437},[203],{"categories":2439},[176],{"categories":2441},[203],{"categories":2443},[203],{"categories":2445},[],{"categories":2447},[179],{"categories":2449},[185],{"categories":2451},[203],{"categories":2453},[203],{"categories":2455},[203],{"categories":2457},[203],{"categories":2459},[203],{"categories":2461},[203],{"categories":2463},[203],{"categories":2465},[203],{"categories":2467},[203],{"categories":2469},[203],{"categories":2471},[226],{"categories":2473},[176],{"categories":2475},[182],{"categories":2477},[182],{"categories":2479},[],{"categories":2481},[182,176],{"categories":2483},[],{"categories":2485},[185],{"categories":2487},[203],{"categories":2489},[185],{"categories":2491},[182],{"categories":2493},[182],{"categories":2495},[182],{"categories":2497},[182],{"categories":2499},[182],{"categories":2501},[185],{"categories":2503},[179],{"categories":2505},[115],{"categories":2507},[203],{"categories":2509},[182],{"categories":2511},[],{"categories":2513},[],{"categories":2515},[185],{"categories":2517},[115],{"categories":2519},[182],{"categories":2521},[],{"categories":2523},[],{"categories":2525},[240],{"categories":2527},[182],{"categories":2529},[],{"categories":2531},[],{"categories":2533},[176],{"categories":2535},[179],{"categories":2537},[182],{"categories":2539},[179],{"categories":2541},[115],{"categories":2543},[],{"categories":2545},[203],{"categories":2547},[],{"categories":2549},[115],{"categories":2551},[182],{"categories":2553},[240],{"categories":2555},[],{"categories":2557},[240],{"categories":2559},[],{"categories":2561},[],{"categories":2563},[185],{"categories":2565},[],{"categories":2567},[179],{"categories":2569},[176],{"categories":2571},[115],{"categories":2573},[233],{"categories":2575},[],{"categories":2577},[],{"categories":2579},[182],{"categories":2581},[176],{"categories":2583},[240],{"categories":2585},[],{"categories":2587},[185],{"categories":2589},[185],{"categories":2591},[203],{"categories":2593},[182],{"categories":2595},[185],{"categories":2597},[182],{"categories":2599},[185],{"categories":2601},[182],{"categories":2603},[188],{"categories":2605},[203],{"categories":2607},[],{"categories":2609},[240],{"categories":2611},[233],{"categories":2613},[185],{"categories":2615},[],{"categories":2617},[182],{"categories":2619},[185],{"categories":2621},[179],{"categories":2623},[176],{"categories":2625},[182],{"categories":2627},[115],{"categories":2629},[233],{"categories":2631},[233],{"categories":2633},[182],{"categories":2635},[226],{"categories":2637},[182],{"categories":2639},[185],{"categories":2641},[179],{"categories":2643},[185],{"categories":2645},[182],{"categories":2647},[182],{"categories":2649},[185],{"categories":2651},[203],{"categories":2653},[],{"categories":2655},[176],{"categories":2657},[182],{"categories":2659},[185],{"categories":2661},[182],{"categories":2663},[182],{"categories":2665},[],{"categories":2667},[115],{"categories":2669},[179],{"categories":2671},[203],{"categories":2673},[182],{"categories":2675},[182],{"categories":2677},[115],{"categories":2679},[240],{"categories":2681},[226],{"categories":2683},[182],{"categories":2685},[203],{"categories":2687},[182],{"categories":2689},[185],{"categories":2691},[497],{"categories":2693},[182],{"categories":2695},[185],{"categories":2697},[226],{"categories":2699},[],{"categories":2701},[185],{"categories":2703},[233],{"categories":2705},[115],{"categories":2707},[182],{"categories":2709},[176],{"categories":2711},[179],{"categories":2713},[233],{"categories":2715},[],{"categories":2717},[185],{"categories":2719},[182],{"categories":2721},[],{"categories":2723},[203],{"categories":2725},[],{"categories":2727},[203],{"categories":2729},[182],{"categories":2731},[185],{"categories":2733},[185],{"categories":2735},[185],{"categories":2737},[],{"categories":2739},[],{"categories":2741},[182],{"categories":2743},[182],{"categories":2745},[],{"categories":2747},[115],{"categories":2749},[185],{"categories":2751},[240],{"categories":2753},[176],{"categories":2755},[],{"categories":2757},[],{"categories":2759},[203],{"categories":2761},[233],{"categories":2763},[182],{"categories":2765},[182],{"categories":2767},[182],{"categories":2769},[233],{"categories":2771},[203],{"categories":2773},[115],{"categories":2775},[182],{"categories":2777},[182],{"categories":2779},[182],{"categories":2781},[203],{"categories":2783},[182],{"categories":2785},[203],{"categories":2787},[185],{"categories":2789},[185],{"categories":2791},[233],{"categories":2793},[185],{"categories":2795},[182],{"categories":2797},[233],{"categories":2799},[115],{"categories":2801},[],{"categories":2803},[185],{"categories":2805},[],{"categories":2807},[],{"categories":2809},[],{"categories":2811},[179],{"categories":2813},[182],{"categories":2815},[185],{"categories":2817},[176],{"categories":2819},[185],{"categories":2821},[240],{"categories":2823},[],{"categories":2825},[185],{"categories":2827},[],{"categories":2829},[176],{"categories":2831},[185],{"categories":2833},[],{"categories":2835},[185],{"categories":2837},[182],{"categories":2839},[203],{"categories":2841},[182],{"categories":2843},[185],{"categories":2845},[203],{"categories":2847},[185],{"categories":2849},[233],{"categories":2851},[115],{"categories":2853},[176],{"categories":2855},[],{"categories":2857},[185],{"categories":2859},[115],{"categories":2861},[497],{"categories":2863},[203],{"categories":2865},[182],{"categories":2867},[115],{"categories":2869},[176],{"categories":2871},[],{"categories":2873},[185],{"categories":2875},[185],{"categories":2877},[182],{"categories":2879},[],{"categories":2881},[185],{"categories":2883},[188],{"categories":2885},[203],{"categories":2887},[185],{"categories":2889},[179],{"categories":2891},[],{"categories":2893},[182],{"categories":2895},[188],{"categories":2897},[182],{"categories":2899},[185],{"categories":2901},[203],{"categories":2903},[176],{"categories":2905},[497],{"categories":2907},[182],{"categories":2909},[182],{"categories":2911},[182],{"categories":2913},[203],{"categories":2915},[179],{"categories":2917},[182],{"categories":2919},[115],{"categories":2921},[203],{"categories":2923},[497],{"categories":2925},[182],{"categories":2927},[],{"categories":2929},[],{"categories":2931},[497],{"categories":2933},[226],{"categories":2935},[185],{"categories":2937},[185],{"categories":2939},[203],{"categories":2941},[182],{"categories":2943},[176],{"categories":2945},[115],{"categories":2947},[185],{"categories":2949},[182],{"categories":2951},[240],{"categories":2953},[182],{"categories":2955},[185],{"categories":2957},[],{"categories":2959},[182],{"categories":2961},[182],{"categories":2963},[203],{"categories":2965},[176],{"categories":2967},[],{"categories":2969},[182],{"categories":2971},[182],{"categories":2973},[233],{"categories":2975},[115],{"categories":2977},[182,185],{"categories":2979},[240,179],{"categories":2981},[182],{"categories":2983},[],{"categories":2985},[185],{"categories":2987},[],{"categories":2989},[233],{"categories":2991},[182],{"categories":2993},[203],{"categories":2995},[],{"categories":2997},[185],{"categories":2999},[],{"categories":3001},[115],{"categories":3003},[185],{"categories":3005},[176],{"categories":3007},[185],{"categories":3009},[182],{"categories":3011},[497],{"categories":3013},[240],{"categories":3015},[179],{"categories":3017},[179],{"categories":3019},[176],{"categories":3021},[176],{"categories":3023},[182],{"categories":3025},[185],{"categories":3027},[182],{"categories":3029},[182],{"categories":3031},[176],{"categories":3033},[182],{"categories":3035},[240],{"categories":3037},[203],{"categories":3039},[182],{"categories":3041},[185],{"categories":3043},[182],{"categories":3045},[],{"categories":3047},[233],{"categories":3049},[],{"categories":3051},[185],{"categories":3053},[176],{"categories":3055},[],{"categories":3057},[497],{"categories":3059},[182],{"categories":3061},[],{"categories":3063},[203],{"categories":3065},[185],{"categories":3067},[233],{"categories":3069},[182],{"categories":3071},[185],{"categories":3073},[233],{"categories":3075},[185],{"categories":3077},[203],{"categories":3079},[176],{"categories":3081},[203],{"categories":3083},[233],{"categories":3085},[182],{"categories":3087},[115],{"categories":3089},[182],{"categories":3091},[182],{"categories":3093},[182],{"categories":3095},[182],{"categories":3097},[185],{"categories":3099},[182],{"categories":3101},[185],{"categories":3103},[182],{"categories":3105},[176],{"categories":3107},[182],{"categories":3109},[185],{"categories":3111},[115],{"categories":3113},[176],{"categories":3115},[185],{"categories":3117},[115],{"categories":3119},[],{"categories":3121},[182],{"categories":3123},[182],{"categories":3125},[233],{"categories":3127},[],{"categories":3129},[185],{"categories":3131},[240],{"categories":3133},[182],{"categories":3135},[203],{"categories":3137},[240],{"categories":3139},[185],{"categories":3141},[179],{"categories":3143},[179],{"categories":3145},[182],{"categories":3147},[176],{"categories":3149},[],{"categories":3151},[182],{"categories":3153},[],{"categories":3155},[176],{"categories":3157},[182],{"categories":3159},[185],{"categories":3161},[185],{"categories":3163},[],{"categories":3165},[233],{"categories":3167},[233],{"categories":3169},[240],{"categories":3171},[115],{"categories":3173},[],{"categories":3175},[182],{"categories":3177},[176],{"categories":3179},[182],{"categories":3181},[233],{"categories":3183},[176],{"categories":3185},[203],{"categories":3187},[203],{"categories":3189},[],{"categories":3191},[203],{"categories":3193},[185],{"categories":3195},[115],{"categories":3197},[226],{"categories":3199},[182],{"categories":3201},[],{"categories":3203},[203],{"categories":3205},[233],{"categories":3207},[179],{"categories":3209},[182],{"categories":3211},[176],{"categories":3213},[497],{"categories":3215},[176],{"categories":3217},[],{"categories":3219},[],{"categories":3221},[203],{"categories":3223},[],{"categories":3225},[185],{"categories":3227},[185],{"categories":3229},[185],{"categories":3231},[],{"categories":3233},[182],{"categories":3235},[],{"categories":3237},[203],{"categories":3239},[176],{"categories":3241},[115],{"categories":3243},[182],{"categories":3245},[203],{"categories":3247},[203],{"categories":3249},[],{"categories":3251},[203],{"categories":3253},[176],{"categories":3255},[182],{"categories":3257},[],{"categories":3259},[185],{"categories":3261},[185],{"categories":3263},[176],{"categories":3265},[],{"categories":3267},[],{"categories":3269},[],{"categories":3271},[115],{"categories":3273},[185],{"categories":3275},[182],{"categories":3277},[],{"categories":3279},[],{"categories":3281},[],{"categories":3283},[115],{"categories":3285},[],{"categories":3287},[176],{"categories":3289},[],{"categories":3291},[],{"categories":3293},[115],{"categories":3295},[182],{"categories":3297},[203],{"categories":3299},[],{"categories":3301},[240],{"categories":3303},[203],{"categories":3305},[240],{"categories":3307},[182],{"categories":3309},[],{"categories":3311},[],{"categories":3313},[185],{"categories":3315},[],{"categories":3317},[],{"categories":3319},[185],{"categories":3321},[182],{"categories":3323},[],{"categories":3325},[185],{"categories":3327},[203],{"categories":3329},[240],{"categories":3331},[226],{"categories":3333},[185],{"categories":3335},[185],{"categories":3337},[],{"categories":3339},[],{"categories":3341},[],{"categories":3343},[203],{"categories":3345},[],{"categories":3347},[],{"categories":3349},[115],{"categories":3351},[176],{"categories":3353},[],{"categories":3355},[179],{"categories":3357},[240],{"categories":3359},[182],{"categories":3361},[233],{"categories":3363},[176],{"categories":3365},[226],{"categories":3367},[179],{"categories":3369},[233],{"categories":3371},[],{"categories":3373},[],{"categories":3375},[185],{"categories":3377},[176],{"categories":3379},[115],{"categories":3381},[176],{"categories":3383},[185],{"categories":3385},[497],{"categories":3387},[185],{"categories":3389},[],{"categories":3391},[182],{"categories":3393},[203],{"categories":3395},[233],{"categories":3397},[],{"categories":3399},[115],{"categories":3401},[203],{"categories":3403},[176],{"categories":3405},[185],{"categories":3407},[182],{"categories":3409},[179],{"categories":3411},[185,497],{"categories":3413},[185],{"categories":3415},[233],{"categories":3417},[182],{"categories":3419},[226],{"categories":3421},[240],{"categories":3423},[185],{"categories":3425},[],{"categories":3427},[185],{"categories":3429},[182],{"categories":3431},[179],{"categories":3433},[],{"categories":3435},[],{"categories":3437},[182],{"categories":3439},[226],{"categories":3441},[182],{"categories":3443},[],{"categories":3445},[203],{"categories":3447},[],{"categories":3449},[203],{"categories":3451},[233],{"categories":3453},[185],{"categories":3455},[182],{"categories":3457},[240],{"categories":3459},[233],{"categories":3461},[],{"categories":3463},[203],{"categories":3465},[182],{"categories":3467},[],{"categories":3469},[182],{"categories":3471},[185],{"categories":3473},[182],{"categories":3475},[185],{"categories":3477},[182],{"categories":3479},[182],{"categories":3481},[182],{"categories":3483},[182],{"categories":3485},[179],{"categories":3487},[],{"categories":3489},[188],{"categories":3491},[203],{"categories":3493},[182],{"categories":3495},[],{"categories":3497},[233],{"categories":3499},[182],{"categories":3501},[182],{"categories":3503},[185],{"categories":3505},[203],{"categories":3507},[182],{"categories":3509},[182],{"categories":3511},[179],{"categories":3513},[185],{"categories":3515},[115],{"categories":3517},[],{"categories":3519},[226],{"categories":3521},[182],{"categories":3523},[],{"categories":3525},[203],{"categories":3527},[240],{"categories":3529},[],{"categories":3531},[],{"categories":3533},[203],{"categories":3535},[203],{"categories":3537},[240],{"categories":3539},[176],{"categories":3541},[185],{"categories":3543},[185],{"categories":3545},[182],{"categories":3547},[179],{"categories":3549},[],{"categories":3551},[],{"categories":3553},[203],{"categories":3555},[226],{"categories":3557},[233],{"categories":3559},[185],{"categories":3561},[115],{"categories":3563},[226],{"categories":3565},[226],{"categories":3567},[],{"categories":3569},[203],{"categories":3571},[182],{"categories":3573},[182],{"categories":3575},[233],{"categories":3577},[],{"categories":3579},[203],{"categories":3581},[203],{"categories":3583},[203],{"categories":3585},[],{"categories":3587},[185],{"categories":3589},[182],{"categories":3591},[],{"categories":3593},[176],{"categories":3595},[179],{"categories":3597},[],{"categories":3599},[182],{"categories":3601},[182],{"categories":3603},[],{"categories":3605},[233],{"categories":3607},[],{"categories":3609},[],{"categories":3611},[],{"categories":3613},[],{"categories":3615},[182],{"categories":3617},[203],{"categories":3619},[],{"categories":3621},[],{"categories":3623},[182],{"categories":3625},[182],{"categories":3627},[182],{"categories":3629},[226],{"categories":3631},[182],{"categories":3633},[226],{"categories":3635},[],{"categories":3637},[226],{"categories":3639},[226],{"categories":3641},[497],{"categories":3643},[185],{"categories":3645},[233],{"categories":3647},[],{"categories":3649},[],{"categories":3651},[226],{"categories":3653},[233],{"categories":3655},[233],{"categories":3657},[233],{"categories":3659},[],{"categories":3661},[176],{"categories":3663},[233],{"categories":3665},[233],{"categories":3667},[176],{"categories":3669},[233],{"categories":3671},[179],{"categories":3673},[233],{"categories":3675},[233],{"categories":3677},[233],{"categories":3679},[226],{"categories":3681},[203],{"categories":3683},[203],{"categories":3685},[182],{"categories":3687},[233],{"categories":3689},[226],{"categories":3691},[497],{"categories":3693},[226],{"categories":3695},[226],{"categories":3697},[226],{"categories":3699},[],{"categories":3701},[179],{"categories":3703},[],{"categories":3705},[497],{"categories":3707},[233],{"categories":3709},[233],{"categories":3711},[233],{"categories":3713},[185],{"categories":3715},[203,179],{"categories":3717},[226],{"categories":3719},[],{"categories":3721},[],{"categories":3723},[226],{"categories":3725},[],{"categories":3727},[226],{"categories":3729},[203],{"categories":3731},[185],{"categories":3733},[],{"categories":3735},[233],{"categories":3737},[182],{"categories":3739},[115],{"categories":3741},[],{"categories":3743},[182],{"categories":3745},[],{"categories":3747},[203],{"categories":3749},[176],{"categories":3751},[226],{"categories":3753},[],{"categories":3755},[233],{"categories":3757},[203],[3759,4273,4408,4482],{"id":3760,"title":3761,"ai":3762,"body":3767,"categories":4249,"created_at":116,"date_modified":116,"description":108,"extension":117,"faq":116,"featured":118,"kicker_label":116,"meta":4250,"navigation":152,"path":4260,"published_at":116,"question":116,"scraped_at":4261,"seo":4262,"sitemap":4263,"source_id":4264,"source_name":4265,"source_type":4266,"source_url":4267,"stem":4268,"tags":4269,"thumbnail_url":116,"tldr":4270,"tweet":116,"unknown_tags":4271,"__hash__":4272},"summaries\u002Fsummaries\u002F0541a873071e8673-css-scroll-driven-animations-via-animation-timelin-summary.md","CSS Scroll-Driven Animations via Animation Timeline API",{"provider":7,"model":8,"input_tokens":3763,"output_tokens":3764,"processing_time_ms":3765,"cost_usd":3766},8497,1663,18977,0.00250825,{"type":14,"value":3768,"toc":4244},[3769,3773,3780,3878,3889,3930,3933,3937,3952,3998,4008,4062,4081,4088,4126,4129,4133,4144,4228,4240],[17,3770,3772],{"id":3771},"map-scroll-progress-to-keyframe-animations","Map Scroll Progress to Keyframe Animations",[22,3774,3775,3776,3779],{},"Drive CSS keyframe animations with an element's viewport position instead of duration by adding ",[26,3777,3778],{},"animation-timeline: view()",". This scrubs through keyframes from 0% (element bottom enters viewport) to 100% (element top exits viewport). For example:",[3781,3782,3785],"pre",{"className":3783,"code":3784,"language":167,"meta":108,"style":108},"language-css shiki shiki-themes github-light github-dark","@keyframes fadeIn {\n  0% { opacity: 0; }\n  100% { opacity: 1; }\n}\n.elem {\n  animation: fadeIn;\n  animation-timeline: view();\n}\n",[26,3786,3787,3804,3826,3842,3847,3855,3864,3873],{"__ignoreMap":108},[3788,3789,3792,3796,3800],"span",{"class":3790,"line":3791},"line",1,[3788,3793,3795],{"class":3794},"szBVR","@keyframes",[3788,3797,3799],{"class":3798},"s4XuR"," fadeIn",[3788,3801,3803],{"class":3802},"sVt8B"," {\n",[3788,3805,3806,3810,3813,3817,3820,3823],{"class":3790,"line":109},[3788,3807,3809],{"class":3808},"sScJk","  0%",[3788,3811,3812],{"class":3802}," { ",[3788,3814,3816],{"class":3815},"sj4cs","opacity",[3788,3818,3819],{"class":3802},": ",[3788,3821,3822],{"class":3815},"0",[3788,3824,3825],{"class":3802},"; }\n",[3788,3827,3828,3831,3833,3835,3837,3840],{"class":3790,"line":149},[3788,3829,3830],{"class":3808},"  100%",[3788,3832,3812],{"class":3802},[3788,3834,3816],{"class":3815},[3788,3836,3819],{"class":3802},[3788,3838,3839],{"class":3815},"1",[3788,3841,3825],{"class":3802},[3788,3843,3844],{"class":3790,"line":148},[3788,3845,3846],{"class":3802},"}\n",[3788,3848,3850,3853],{"class":3790,"line":3849},5,[3788,3851,3852],{"class":3808},".elem",[3788,3854,3803],{"class":3802},[3788,3856,3858,3861],{"class":3790,"line":3857},6,[3788,3859,3860],{"class":3815},"  animation",[3788,3862,3863],{"class":3802},": fadeIn;\n",[3788,3865,3867,3870],{"class":3790,"line":3866},7,[3788,3868,3869],{"class":3815},"  animation-timeline",[3788,3871,3872],{"class":3802},": view();\n",[3788,3874,3876],{"class":3790,"line":3875},8,[3788,3877,3846],{"class":3802},[22,3879,3880,3881,3884,3885,3888],{},"Scrolling advances the animation proportionally to the element's viewport coverage, measured as a percentage (100% at full entry, 0% at full exit). Apply standard timing functions like ",[26,3882,3883],{},"cubic-bezier(0.15, 0.75, 0.35, 1)"," for ease-out effects or ",[26,3886,3887],{},"linear()"," for springs:",[3781,3890,3892],{"className":3783,"code":3891,"language":167,"meta":108,"style":108},".box {\n  animation: spin var(--spring);\n  animation-timeline: view();\n}\n",[26,3893,3894,3901,3920,3926],{"__ignoreMap":108},[3788,3895,3896,3899],{"class":3790,"line":3791},[3788,3897,3898],{"class":3808},".box",[3788,3900,3803],{"class":3802},[3788,3902,3903,3905,3908,3911,3914,3917],{"class":3790,"line":109},[3788,3904,3860],{"class":3815},[3788,3906,3907],{"class":3802},": spin ",[3788,3909,3910],{"class":3815},"var",[3788,3912,3913],{"class":3802},"(",[3788,3915,3916],{"class":3798},"--spring",[3788,3918,3919],{"class":3802},");\n",[3788,3921,3922,3924],{"class":3790,"line":149},[3788,3923,3869],{"class":3815},[3788,3925,3872],{"class":3802},[3788,3927,3928],{"class":3790,"line":148},[3788,3929,3846],{"class":3802},[22,3931,3932],{},"This leverages existing keyframe knowledge—no new syntax for basics—while avoiding JavaScript for simple scroll effects.",[17,3934,3936],{"id":3935},"control-animation-timing-with-ranges","Control Animation Timing with Ranges",[22,3938,3939,3940,3943,3944,3947,3948,3951],{},"Override default ",[26,3941,3942],{},"cover"," range (full viewport traversal) using ",[26,3945,3946],{},"animation-range"," to start\u002Fend at specific points. ",[26,3949,3950],{},"contain"," triggers only when fully in viewport, ideal for complete animations like offscreen slides:",[3781,3953,3955],{"className":3783,"code":3954,"language":167,"meta":108,"style":108},".shape {\n  animation: slideIn backwards;\n  animation-timeline: view();\n  animation-range: contain;\n}\n",[26,3956,3957,3964,3977,3983,3994],{"__ignoreMap":108},[3788,3958,3959,3962],{"class":3790,"line":3791},[3788,3960,3961],{"class":3808},".shape",[3788,3963,3803],{"class":3802},[3788,3965,3966,3968,3971,3974],{"class":3790,"line":109},[3788,3967,3860],{"class":3815},[3788,3969,3970],{"class":3802},": slideIn ",[3788,3972,3973],{"class":3815},"backwards",[3788,3975,3976],{"class":3802},";\n",[3788,3978,3979,3981],{"class":3790,"line":149},[3788,3980,3869],{"class":3815},[3788,3982,3872],{"class":3802},[3788,3984,3985,3988,3990,3992],{"class":3790,"line":148},[3788,3986,3987],{"class":3815},"  animation-range",[3788,3989,3819],{"class":3802},[3788,3991,3950],{"class":3815},[3788,3993,3976],{"class":3802},[3788,3995,3996],{"class":3790,"line":3849},[3788,3997,3846],{"class":3802},[22,3999,4000,4003,4004,4007],{},[26,4001,4002],{},"entry"," animates during top-to-bottom entry (perfect for fade-ins on images), ",[26,4005,4006],{},"exit"," during top-edge exit (fade-outs). Combine via comma-separated values:",[3781,4009,4011],{"className":3783,"code":4010,"language":167,"meta":108,"style":108},"img {\n  animation: fadeIn linear, fadeOut linear;\n  animation-timeline: view(), view();\n  animation-range: entry, exit;\n}\n",[26,4012,4013,4021,4038,4051,4058],{"__ignoreMap":108},[3788,4014,4015,4019],{"class":3790,"line":3791},[3788,4016,4018],{"class":4017},"s9eBZ","img",[3788,4020,3803],{"class":3802},[3788,4022,4023,4025,4028,4031,4034,4036],{"class":3790,"line":109},[3788,4024,3860],{"class":3815},[3788,4026,4027],{"class":3802},": fadeIn ",[3788,4029,4030],{"class":3815},"linear",[3788,4032,4033],{"class":3802},", fadeOut ",[3788,4035,4030],{"class":3815},[3788,4037,3976],{"class":3802},[3788,4039,4040,4042,4045,4048],{"class":3790,"line":149},[3788,4041,3869],{"class":3815},[3788,4043,4044],{"class":3802},": view(), ",[3788,4046,4047],{"class":3815},"view",[3788,4049,4050],{"class":3802},"();\n",[3788,4052,4053,4055],{"class":3790,"line":148},[3788,4054,3987],{"class":3815},[3788,4056,4057],{"class":3802},": entry, exit;\n",[3788,4059,4060],{"class":3790,"line":3849},[3788,4061,3846],{"class":3802},[22,4063,4064,4065,4068,4069,4072,4073,4076,4077,4080],{},"For precision, use percentages: ",[26,4066,4067],{},"animation-range: cover 0% cover 50%"," starts at first pixel entry, ends at viewport midpoint. Long-form ",[26,4070,4071],{},"animation-range-start: cover 0%; animation-range-end: cover 50%;"," offers clarity. Mix ranges like ",[26,4074,4075],{},"contain 0%"," to ",[26,4078,4079],{},"exit 50%"," for extended effects.",[22,4082,4083,4084,4087],{},"Use ",[26,4085,4086],{},"scroll()"," timeline for global progress, like fixed reading indicators:",[3781,4089,4091],{"className":3783,"code":4090,"language":167,"meta":108,"style":108},".readingIndicator {\n  animation: expand linear;\n  animation-timeline: scroll();\n}\n",[26,4092,4093,4100,4111,4122],{"__ignoreMap":108},[3788,4094,4095,4098],{"class":3790,"line":3791},[3788,4096,4097],{"class":3808},".readingIndicator",[3788,4099,3803],{"class":3802},[3788,4101,4102,4104,4107,4109],{"class":3790,"line":109},[3788,4103,3860],{"class":3815},[3788,4105,4106],{"class":3802},": expand ",[3788,4108,4030],{"class":3815},[3788,4110,3976],{"class":3802},[3788,4112,4113,4115,4117,4120],{"class":3790,"line":149},[3788,4114,3869],{"class":3815},[3788,4116,3819],{"class":3802},[3788,4118,4119],{"class":3815},"scroll",[3788,4121,4050],{"class":3802},[3788,4123,4124],{"class":3790,"line":148},[3788,4125,3846],{"class":3802},[22,4127,4128],{},"This scales a bar from 0 to total page scroll distance, though scrollbars often suffice.",[17,4130,4132],{"id":4131},"link-timelines-between-elements","Link Timelines Between Elements",[22,4134,4135,4136,4139,4140,4143],{},"Decouple tracking from animation: name a ",[26,4137,4138],{},"view-timeline"," on the trigger element, reference it elsewhere via ",[26,4141,4142],{},"timeline-scope"," on a shared ancestor.",[3781,4145,4147],{"className":3783,"code":4146,"language":167,"meta":108,"style":108},"main {\n  timeline-scope: --tracked-elem;\n}\n.content {\n  view-timeline: --tracked-elem;\n}\n.square {\n  animation: fadeIn backwards, fadeOut forwards;\n  animation-timeline: --tracked-elem, --tracked-elem;\n  animation-range: entry, exit;\n}\n",[26,4148,4149,4156,4164,4168,4175,4182,4186,4193,4208,4216,4223],{"__ignoreMap":108},[3788,4150,4151,4154],{"class":3790,"line":3791},[3788,4152,4153],{"class":4017},"main",[3788,4155,3803],{"class":3802},[3788,4157,4158,4161],{"class":3790,"line":109},[3788,4159,4160],{"class":3815},"  timeline-scope",[3788,4162,4163],{"class":3802},": --tracked-elem;\n",[3788,4165,4166],{"class":3790,"line":149},[3788,4167,3846],{"class":3802},[3788,4169,4170,4173],{"class":3790,"line":148},[3788,4171,4172],{"class":3808},".content",[3788,4174,3803],{"class":3802},[3788,4176,4177,4180],{"class":3790,"line":3849},[3788,4178,4179],{"class":3815},"  view-timeline",[3788,4181,4163],{"class":3802},[3788,4183,4184],{"class":3790,"line":3857},[3788,4185,3846],{"class":3802},[3788,4187,4188,4191],{"class":3790,"line":3866},[3788,4189,4190],{"class":3808},".square",[3788,4192,3803],{"class":3802},[3788,4194,4195,4197,4199,4201,4203,4206],{"class":3790,"line":3875},[3788,4196,3860],{"class":3815},[3788,4198,4027],{"class":3802},[3788,4200,3973],{"class":3815},[3788,4202,4033],{"class":3802},[3788,4204,4205],{"class":3815},"forwards",[3788,4207,3976],{"class":3802},[3788,4209,4211,4213],{"class":3790,"line":4210},9,[3788,4212,3869],{"class":3815},[3788,4214,4215],{"class":3802},": --tracked-elem, --tracked-elem;\n",[3788,4217,4219,4221],{"class":3790,"line":4218},10,[3788,4220,3987],{"class":3815},[3788,4222,4057],{"class":3802},[3788,4224,4226],{"class":3790,"line":4225},11,[3788,4227,3846],{"class":3802},[22,4229,4230,4231,4233,4234,4236,4237,4239],{},"Scroll on ",[26,4232,4172],{}," fades sticky ",[26,4235,4190],{},", even if not descendants—",[26,4238,4142],{}," propagates the named timeline. Limit: names are scoped to creator and descendants unless elevated.",[4241,4242,4243],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":108,"searchDepth":109,"depth":109,"links":4245},[4246,4247,4248],{"id":3771,"depth":109,"text":3772},{"id":3935,"depth":109,"text":3936},{"id":4131,"depth":109,"text":4132},[115],{"content_references":4251,"triage":4258},[4252,4255],{"type":122,"title":4253,"url":4254,"context":125},"Whimsical Animations","https:\u002F\u002Fwhimsy.joshwcomeau.com\u002F",{"type":138,"title":4256,"url":4257,"context":133},"Lipsum.com","https:\u002F\u002Fwww.lipsum.com\u002F",{"relevance":148,"novelty":149,"quality":148,"actionability":148,"composite":150,"reasoning":4259},"Category: Design & Frontend. The article provides practical insights into using the Animation Timeline API for scroll-driven animations, which directly addresses the needs of designers and developers looking to enhance UI\u002FUX. It includes specific code examples and techniques that can be immediately applied in projects.","\u002Fsummaries\u002F0541a873071e8673-css-scroll-driven-animations-via-animation-timelin-summary","2026-05-03 17:02:04",{"title":3761,"description":108},{"loc":4260},"0541a873071e8673","Josh W. Comeau","article","https:\u002F\u002Fwww.joshwcomeau.com\u002Fanimation\u002Fscroll-driven-animations\u002F","summaries\u002F0541a873071e8673-css-scroll-driven-animations-via-animation-timelin-summary",[164,166,167],"Replace time-based keyframes with scroll progress using animation-timeline: view() to trigger animations as elements enter\u002Fexit viewport; customize ranges like entry\u002Fexit for precise control without JavaScript.",[167],"H-OMxl4xx30p7NefpUpuI0olBbU-dSy34fNFMO-yhMk",{"id":4274,"title":4275,"ai":4276,"body":4281,"categories":4387,"created_at":116,"date_modified":116,"description":108,"extension":117,"faq":116,"featured":118,"kicker_label":116,"meta":4388,"navigation":152,"path":4396,"published_at":116,"question":116,"scraped_at":4397,"seo":4398,"sitemap":4399,"source_id":4400,"source_name":4401,"source_type":4266,"source_url":4402,"stem":4403,"tags":4404,"thumbnail_url":116,"tldr":4405,"tweet":116,"unknown_tags":4406,"__hash__":4407},"summaries\u002Fsummaries\u002F4f826eb69fc40d07-lucide-1000-consistent-svg-icons-toolkit-summary.md","Lucide: 1000+ Consistent SVG Icons Toolkit",{"provider":7,"model":8,"input_tokens":4277,"output_tokens":4278,"processing_time_ms":4279,"cost_usd":4280},6964,1280,8038,0.00201015,{"type":14,"value":4282,"toc":4382},[4283,4287,4290,4294,4301,4345,4355,4359],[17,4284,4286],{"id":4285},"core-offering-and-design-philosophy","Core Offering and Design Philosophy",[22,4288,4289],{},"Lucide provides over 1000 vector SVG icons designed for consistency across digital projects, making it simple for designers and developers to integrate symbols without style mismatches. As a community-maintained fork of Feather Icons, it prioritizes open-source accessibility under the ISC License, free for commercial and personal use. Key decision: rejects brand logos entirely due to legal risks, design inconsistency (brands dictate styles), and maintenance burden—detailed in BRAND_LOGOS_STATEMENT.md. This keeps the library lightweight and focused, with 21.5k GitHub stars, 1.2k forks, 301 contributors, and usage in 1.8m projects.",[17,4291,4293],{"id":4292},"framework-specific-packages-for-easy-integration","Framework-Specific Packages for Easy Integration",[22,4295,4296,4297,4300],{},"Use official npm packages tailored to popular frameworks, each with dedicated docs and source in the monorepo (built with TypeScript 87.2%, JavaScript 11.6%). Core ",[26,4298,4299],{},"lucide"," package delivers raw SVGs; framework wrappers handle components:",[4302,4303,4304,4324,4330,4339],"ul",{},[4305,4306,4307,4310,4311,4310,4314,4310,4317,4310,4320,4323],"li",{},[26,4308,4309],{},"lucide-react",", ",[26,4312,4313],{},"lucide-vue-next",[26,4315,4316],{},"lucide-svelte",[26,4318,4319],{},"lucide-solid",[26,4321,4322],{},"lucide-preact"," for web apps.",[4305,4325,4326,4329],{},[26,4327,4328],{},"lucide-react-native"," for mobile.",[4305,4331,4332,59,4335,4338],{},[26,4333,4334],{},"lucide-angular",[26,4336,4337],{},"@lucide\u002Fastro"," for specialized stacks.",[4305,4340,4341,4344],{},[26,4342,4343],{},"lucide-static"," for non-JS sites.",[22,4346,4347,4348,59,4351,4354],{},"Latest release: v0.577.0 (Mar 4, 2026), with 654 total releases and 2,490 commits. Install via npm\u002Fpnpm; icons categorized in ",[26,4349,4350],{},"\u002Ficons",[26,4352,4353],{},"\u002Fcategories"," folders.",[17,4356,4358],{"id":4357},"designer-tools-and-community-support","Designer Tools and Community Support",[22,4360,4361,4362,4369,4370,4375,4376,4381],{},"Figma plugin at ",[4363,4364,4368],"a",{"href":4365,"rel":4366},"https:\u002F\u002Fwww.figma.com\u002Fcommunity\u002Fplugin\u002F939567362549682242\u002FLucide-Icons",[4367],"nofollow","Figma Community"," enables direct icon insertion into designs. Contribute via ",[4363,4371,4374],{"href":4372,"rel":4373},"https:\u002F\u002Fgithub.com\u002Flucide-icons\u002Flucide\u002Fblob\u002Fmain\u002FCONTRIBUTING.md",[4367],"CONTRIBUTING.md","—add icons, fix docs, or join Discord at ",[4363,4377,4380],{"href":4378,"rel":4379},"https:\u002F\u002Fdiscord.gg\u002FEH6nSts",[4367],"discord.gg\u002FEH6nSts",". Sponsors via Open Collective fund development; edit README directly on GitHub for quick fixes.",{"title":108,"searchDepth":109,"depth":109,"links":4383},[4384,4385,4386],{"id":4285,"depth":109,"text":4286},{"id":4292,"depth":109,"text":4293},{"id":4357,"depth":109,"text":4358},[115],{"content_references":4389,"triage":4394},[4390,4392],{"type":138,"title":4391,"url":4365,"context":133},"Lucide Icons",{"type":122,"title":4393,"context":133},"Feather Icons",{"relevance":148,"novelty":149,"quality":148,"actionability":148,"composite":150,"reasoning":4395},"Category: Design & Frontend. The article provides a detailed overview of a community-driven icon library that addresses the needs of designers and developers for consistent SVG icons, which is a specific pain point for the target audience. It includes practical integration details for various frameworks and tools, making it actionable for users looking to enhance their design systems.","\u002Fsummaries\u002F4f826eb69fc40d07-lucide-1000-consistent-svg-icons-toolkit-summary","2026-04-15 15:33:21",{"title":4275,"description":108},{"loc":4396},"4f826eb69fc40d07","__oneoff__","https:\u002F\u002Fgithub.com\u002Flucide-icons\u002Flucide","summaries\u002F4f826eb69fc40d07-lucide-1000-consistent-svg-icons-toolkit-summary",[164,165,166],"Community-driven open-source icon library forked from Feather Icons, offering 1000+ SVG icons with official packages for React, Vue, Svelte, Angular, and more, plus Figma plugin. No brand logos for legal and consistency reasons.",[],"wb6I5RLX76NLSvhp8VIYXUGULr6oBBHQLzdqqaJ3xXk",{"id":4409,"title":4410,"ai":4411,"body":4416,"categories":4455,"created_at":116,"date_modified":116,"description":108,"extension":117,"faq":116,"featured":118,"kicker_label":116,"meta":4456,"navigation":152,"path":4470,"published_at":116,"question":116,"scraped_at":4471,"seo":4472,"sitemap":4473,"source_id":4474,"source_name":4475,"source_type":4266,"source_url":4476,"stem":4477,"tags":4478,"thumbnail_url":116,"tldr":4479,"tweet":116,"unknown_tags":4480,"__hash__":4481},"summaries\u002Fsummaries\u002F7299472c8340296c-layered-portfolios-beat-galleries-for-project-focu-summary.md","Layered Portfolios Beat Galleries for Project Focus",{"provider":7,"model":8,"input_tokens":4412,"output_tokens":4413,"processing_time_ms":4414,"cost_usd":4415},6615,1568,20631,0.00160015,{"type":14,"value":4417,"toc":4449},[4418,4422,4425,4428,4432,4435,4439,4442,4446],[17,4419,4421],{"id":4420},"layering-principle-enables-dual-information-streams-without-overload","Layering Principle Enables Dual Information Streams Without Overload",[22,4423,4424],{},"Avoid standard galleries where projects compete for attention—instead, use a list format with pop-up cards showing 3+ descriptive images upfront, so users grasp project essence without clicking. Layer content via modals: essential info (title, description, role) in a compact dropdown panel that expands on demand, preserving visual focus. For standout projects, apply SVG masks and shapes for 'wow' depth, distinguishing them from standard entries while maintaining harmony. This dual system serves quick browsers (standard list) and deep explorers (layered reveals), with mobile adaptations like bottom-fixed info buttons for thumb-friendly access.",[22,4426,4427],{},"Typography scales establish hierarchy: larger sizes differentiate key elements without stylistic clashes. Hover tooltips with delays and smooth animations encourage re-engagement, while next-project transitions use unique summaries. Result: users process visuals and semantics simultaneously, deciding relevance in seconds.",[17,4429,4431],{"id":4430},"homepage-and-navigation-as-frictionless-hubs","Homepage and Navigation as Frictionless Hubs",[22,4433,4434],{},"Keep homepages minimal—one screen with video background, carousel for context, and two-click nav to projects, contacts, or CV. Reject full-scroll pages to avoid forcing content; let users self-select paths. Contact modals connect instantly; menu highlights enable targeted exploration. This hub reduces cognitive load, boosting engagement over traditional 'scroll-to-projects' flows.",[17,4436,4438],{"id":4437},"optimized-pages-for-readability-and-delight","Optimized Pages for Readability and Delight",[22,4440,4441],{},"CV: Centered, concise layout with downloadable summary of all projects\u002Fexperience—no endless scrolling. Blog: Split layout (left: article info; right: content) with TOC button for jumps; related articles via bottom hovers with tilting previews. About: Scroll-triggered video fade-out introduces narrative, expanding forms reveal full images, transitioning to black mode for accent. Footer hovers spawn buttons. These leverage scroll and hover for progressive disclosure, generating reactions without gimmicks.",[17,4443,4445],{"id":4444},"webflow-gsap-stack-delivers-performance-and-scalability","Webflow + GSAP Stack Delivers Performance and Scalability",[22,4447,4448],{},"Build on Webflow for rapid iteration, layer GSAP microanimations and custom JS for 2D depth (masks, expands, reveals). Prioritize responsiveness: high-contrast icons\u002Fbuttons, device-optimized performance. Architecture focuses content structure over effect spam—intuitive lists first, 'wow' selectively. Update projects easily via dynamic fields (hide absent info). Branding extends site versatility: dual logos (simplified web, full merch), minimalist-bold mix across caps, candles, stickers. Over 6 concepts and 2 years, accept imperfections for shipping; iterate post-launch as needs evolve.",{"title":108,"searchDepth":109,"depth":109,"links":4450},[4451,4452,4453,4454],{"id":4420,"depth":109,"text":4421},{"id":4430,"depth":109,"text":4431},{"id":4437,"depth":109,"text":4438},{"id":4444,"depth":109,"text":4445},[115],{"content_references":4457,"triage":4468},[4458,4461,4463,4465],{"type":138,"title":4459,"url":4460,"context":133},"Artem Shcherban Portfolio","https:\u002F\u002Fartemshcherban.com\u002F",{"type":138,"title":4462,"context":133},"Webflow",{"type":138,"title":4464,"context":133},"GSAP",{"type":122,"title":4466,"url":4467,"context":125},"Creative Coding Club GSAP training","https:\u002F\u002Fwww.creativecodingclub.com\u002Fbundles\u002Fcreative-coding-club?ref=0d0431",{"relevance":148,"novelty":149,"quality":148,"actionability":148,"composite":150,"reasoning":4469},"Category: Design & Frontend. The article provides actionable insights on improving project presentation through layered portfolios, addressing the pain point of maintaining user focus in design. It offers specific techniques like using modals and SVG masks, which can be directly applied by designers and developers.","\u002Fsummaries\u002F7299472c8340296c-layered-portfolios-beat-galleries-for-project-focu-summary","2026-05-03 17:02:07",{"title":4410,"description":108},{"loc":4470},"7299472c8340296c","Codrops","https:\u002F\u002Ftympanus.net\u002Fcodrops\u002F2026\u002F05\u002F02\u002Fdesigning-against-the-gallery-a-two-year-journey-to-a-layered-portfolio-experience\u002F","summaries\u002F7299472c8340296c-layered-portfolios-beat-galleries-for-project-focu-summary",[166,165,164],"Ditch scattered galleries for list-based previews with layered modals: preview projects instantly via multiple images and info panels, highlight standouts with SVG masks, built in 2 years using Webflow + GSAP for smooth, responsive interactions.",[],"_sg11iAkxkEw-6_4t6K-_fFB8gL8F6bAwEXbWfY--fk",{"id":4483,"title":4484,"ai":4485,"body":4490,"categories":4570,"created_at":116,"date_modified":116,"description":108,"extension":117,"faq":116,"featured":118,"kicker_label":116,"meta":4571,"navigation":152,"path":4587,"published_at":4588,"question":116,"scraped_at":4589,"seo":4590,"sitemap":4591,"source_id":4592,"source_name":4593,"source_type":4266,"source_url":4594,"stem":4595,"tags":4596,"thumbnail_url":116,"tldr":4598,"tweet":4599,"unknown_tags":4600,"__hash__":4601},"summaries\u002Fsummaries\u002F4e822604d94c2af5-agentic-design-systems-figma-to-claude-code-metada-summary.md","Agentic Design Systems: Figma to Claude Code Metadata",{"provider":7,"model":8,"input_tokens":4486,"output_tokens":4487,"processing_time_ms":4488,"cost_usd":4489},8581,1754,24130,0.0025707,{"type":14,"value":4491,"toc":4565},[4492,4496,4499,4502,4506,4509,4530,4533,4537,4562],[17,4493,4495],{"id":4494},"fix-ai-blind-spots-in-human-design-systems","Fix AI Blind Spots in Human Design Systems",[22,4497,4498],{},"Current Figma design systems fail AI agents because they lack answers to five key questions: Should I use this component? Which variant? What goes inside? What rules apply? What to avoid? Agents hallucinate buttons, spacing, and variants since files, readmes, or vague prompts don't provide structured data. Solution: Encode components as queryable metadata mirroring human decisions, speeding design-to-code 10x by letting agents pull exact props into Storybook.",[22,4500,4501],{},"Semantic naming trumps technical (e.g., 'emphasis default subtle' over 'primary secondary' with hex codes) because it speaks 'English' AI understands. Add descriptions to all tokens (e.g., 'hovers on items, subtle raising') so agents grasp usage context like 'active items, emphasizing.' Anti-patterns are as crucial as patterns: Explicitly define 'never do X' (e.g., no two primary buttons side-by-side, no buttons for navigation) to prevent misuse.",[17,4503,4505],{"id":4504},"three-pillars-for-every-agent-ready-component","Three Pillars for Every Agent-Ready Component",[22,4507,4508],{},"Build components around props, relationships, and tokens:",[4302,4510,4511,4518,4524],{},[4305,4512,4513,4517],{},[4514,4515,4516],"strong",{},"Props",": Capture states (primary\u002Fhover\u002Fpress\u002Fdisabled), variants (appearance\u002Fsize\u002Fdensity), and booleans (loading, leading icon, onClick). List all Figma definitions explicitly.",[4305,4519,4520,4523],{},[4514,4521,4522],{},"Relationships",": Define hierarchy (child\u002Fparent), common contexts (forms, dialogs, toolbars), and purpose (e.g., button as 'interactive trigger for single decisive action, most common primitive'). Use exactly one per intent; let variants signal hierarchy.",[4305,4525,4526,4529],{},[4514,4527,4528],{},"Tokens",": Reference spacing, colors (e.g., core-gray-200), typography from Figma variables. Ensure inheritance (e.g., fonts from repo) for consistency.",[22,4531,4532],{},"Metadata output includes category (e.g., atom), variants explanations (primary for main CTA, destructive for irreversible), common patterns (submit in forms), and AI hints. Review and iterate: Agents miss details like loading states or tokens, so query fixes (e.g., 'Why no font inheritance? Update to pull from cal.com repo.').",[17,4534,4536],{"id":4535},"workflow-figma-mcp-claude-skill-to-storybook","Workflow: Figma MCP + Claude Skill to Storybook",[4538,4539,4540,4543,4546,4549,4552,4559],"ol",{},[4305,4541,4542],{},"Install AI Component Metadata skill (npx claude skill): Generates templates for metadata, CSS, component, stories, tests, index per component.",[4305,4544,4545],{},"Branch repo, create sibling UI package (e.g., Next.js), define schema MD with skill.",[4305,4547,4548],{},"Spin up Storybook (use Context 7 plugin for docs).",[4305,4550,4551],{},"In Figma: Ensure variants\u002Fstates clear, tokens semantic\u002Fdescriptive. Copy component link.",[4305,4553,4554,4555,4558],{},"Claude prompt: 'Using Figma MCP and metadata schema, turn ",[3788,4556,4557],{},"link"," button into agentic Storybook component.' Generates 6 files; review output (e.g., fix destructive hover, loading styles, fonts).",[4305,4560,4561],{},"Iterate: Add anti-patterns (e.g., no disabled navigation), test in Storybook for visual rules enforcement.",[22,4563,4564],{},"Scale by building more (icons next), refine processes, then skill-ify for reuse. Result: Agents build pages pulling context-aware components, creating living source-of-truth library. For teams, workshops personalize this for tighter design-dev loops.",{"title":108,"searchDepth":109,"depth":109,"links":4566},[4567,4568,4569],{"id":4494,"depth":109,"text":4495},{"id":4504,"depth":109,"text":4505},{"id":4535,"depth":109,"text":4536},[115],{"content_references":4572,"triage":4584},[4573,4577,4580,4582],{"type":138,"title":4574,"author":4575,"url":4576,"context":125},"AI Component Metadata Skill","Chris (cris-achiardi)","https:\u002F\u002Fgithub.com\u002Fcris-achiardi\u002Fclaude-skills\u002Ftree\u002Fmain\u002Fskills\u002Fai-component-metadata",{"type":138,"title":4578,"url":4579,"context":133},"Figma MCP","https:\u002F\u002Fhelp.figma.com\u002Fhc\u002Fen-us\u002Farticles\u002F32132100833559-Guide-to-the-Figma-MCP-server",{"type":122,"title":4581,"context":133},"cal.com",{"type":138,"title":4583,"context":125},"Storybook",{"relevance":3849,"novelty":148,"quality":148,"actionability":3849,"composite":4585,"reasoning":4586},4.55,"Category: Design & Frontend. The article provides a detailed framework for structuring Figma components as queryable metadata, addressing the pain point of AI agents hallucinating design elements. It offers actionable steps for building agent-ready components, making it highly relevant and practical for designers and developers working with AI in design systems.","\u002Fsummaries\u002F4e822604d94c2af5-agentic-design-systems-figma-to-claude-code-metada-summary","2026-05-07 17:00:16","2026-05-08 11:25:41",{"title":4484,"description":108},{"loc":4587},"4e822604d94c2af5","AI Summaries (evaluation playlist)","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=CrHKvTWECtY","summaries\u002F4e822604d94c2af5-agentic-design-systems-figma-to-claude-code-metada-summary",[165,4597,164,166],"ai-tools","Structure Figma components with props, relationships, tokens, and anti-patterns as queryable metadata using Claude Code + Figma MCP, enabling AI agents to generate accurate Storybook components without hallucinations.","Tutorial on structuring Figma design system components (props, relationships, tokens) as AI-queryable metadata using a Claude Code skill, followed by a live demo building and iterating on a button with Figma MCP and Storybook. Part one of a series.",[],"Id_LA037afS81vw4ByeKrfNNAku6rAvmsKWDbwgMR7g"]