{ "name": "The Animated Web Report 2026", "generatedAt": "2026-10-28", "publisher": "AnimatedWebs Motion Engineering", "usage": "Quote the figures with attribution and a link to the report URL. Aggregates only, no template source.", "url": "https://animatedwebs.com/research/animated-web-report-2026", "catalog": { "templates": 1576, "liveDemos": 429, "free": 365, "pro": 1211, "freeLiveDemos": 26, "byKind": { "website": 841, "section": 404, "background": 171, "component": 160 }, "categories": 19, "categoriesWithDemos": 19, "industriesDefined": 163, "industriesWithPage": 155 }, "sample": { "liveDemosInCatalog": 429, "scanned": 429, "liveDemosWithoutFolder": 0, "foldersNotInCatalogAsLive": 29, "cardKbMatches": 417 }, "overall": { "n": 429, "exVideo": { "median": 718, "p75": 1515, "p90": 5339, "min": 11, "max": 22365 }, "withVideo": { "median": 729, "p75": 2560, "p90": 6568, "min": 11, "max": 25950 }, "code": { "median": 50, "p75": 218, "p90": 744, "min": 10, "max": 4395 }, "three": { "n": 250, "share": 58.3 }, "gsap": { "n": 118, "share": 27.5 }, "customShaders": { "n": 232, "share": 54.1 }, "reduced": { "n": 428, "share": 99.8 }, "pause": { "n": 264, "share": 61.5 }, "mobile": { "n": 257, "share": 59.9 }, "lazy": { "n": 285, "share": 66.4 }, "lazyAttr": { "n": 124, "share": 28.9 }, "observer": { "n": 274, "share": 63.9 }, "reducedAndPause": { "n": 264, "share": 61.5 } }, "byTech": [ { "tech": "webgl", "label": "Live WebGL", "n": 291, "exVideo": { "median": 715, "p75": 836, "p90": 2099, "min": 11, "max": 13046 }, "withVideo": { "median": 716, "p75": 878, "p90": 2212, "min": 11, "max": 13442 }, "code": { "median": 147, "p75": 726, "p90": 843, "min": 11, "max": 4395 }, "three": { "n": 247, "share": 84.9 }, "gsap": { "n": 90, "share": 30.9 }, "customShaders": { "n": 219, "share": 75.3 }, "reduced": { "n": 290, "share": 99.7 }, "pause": { "n": 172, "share": 59.1 }, "mobile": { "n": 173, "share": 59.5 }, "lazy": { "n": 185, "share": 63.6 }, "lazyAttr": { "n": 86, "share": 29.6 }, "observer": { "n": 184, "share": 63.2 }, "reducedAndPause": { "n": 172, "share": 59.1 } }, { "tech": "canvas", "label": "Live canvas", "n": 53, "exVideo": { "median": 4165, "p75": 7213, "p90": 10740, "min": 13, "max": 14619 }, "withVideo": { "median": 4165, "p75": 7213, "p90": 10740, "min": 13, "max": 14619 }, "code": { "median": 29, "p75": 41, "p90": 64, "min": 13, "max": 125 }, "three": { "n": 0, "share": 0 }, "gsap": { "n": 3, "share": 5.7 }, "customShaders": { "n": 0, "share": 0 }, "reduced": { "n": 53, "share": 100 }, "pause": { "n": 37, "share": 69.8 }, "mobile": { "n": 41, "share": 77.4 }, "lazy": { "n": 44, "share": 83 }, "lazyAttr": { "n": 22, "share": 41.5 }, "observer": { "n": 36, "share": 67.9 }, "reducedAndPause": { "n": 37, "share": 69.8 } }, { "tech": "css", "label": "Live CSS motion", "n": 14, "exVideo": { "median": 71, "p75": 452, "p90": 496, "min": 20, "max": 2309 }, "withVideo": { "median": 71, "p75": 468, "p90": 1769, "min": 20, "max": 4502 }, "code": { "median": 30, "p75": 50, "p90": 70, "min": 14, "max": 193 }, "three": { "n": 0, "share": 0 }, "gsap": { "n": 0, "share": 0 }, "customShaders": { "n": 0, "share": 0 }, "reduced": { "n": 14, "share": 100 }, "pause": { "n": 5, "share": 35.7 }, "mobile": { "n": 4, "share": 28.6 }, "lazy": { "n": 8, "share": 57.1 }, "lazyAttr": { "n": 3, "share": 21.4 }, "observer": { "n": 7, "share": 50 }, "reducedAndPause": { "n": 5, "share": 35.7 } }, { "tech": "video", "label": "Video hero", "n": 57, "exVideo": { "median": 501, "p75": 6170, "p90": 7603, "min": 33, "max": 22365 }, "withVideo": { "median": 5047, "p75": 8298, "p90": 9204, "min": 383, "max": 25950 }, "code": { "median": 19, "p75": 41, "p90": 45, "min": 10, "max": 133 }, "three": { "n": 0, "share": 0 }, "gsap": { "n": 15, "share": 26.3 }, "customShaders": { "n": 0, "share": 0 }, "reduced": { "n": 57, "share": 100 }, "pause": { "n": 41, "share": 71.9 }, "mobile": { "n": 28, "share": 49.1 }, "lazy": { "n": 41, "share": 71.9 }, "lazyAttr": { "n": 7, "share": 12.3 }, "observer": { "n": 40, "share": 70.2 }, "reducedAndPause": { "n": 41, "share": 71.9 } }, { "tech": "video-webgl", "label": "Video + WebGL", "n": 14, "exVideo": { "median": 1717, "p75": 3670, "p90": 4484, "min": 42, "max": 4902 }, "withVideo": { "median": 3560, "p75": 5105, "p90": 5875, "min": 402, "max": 8847 }, "code": { "median": 40, "p75": 41, "p90": 74, "min": 27, "max": 90 }, "three": { "n": 3, "share": 21.4 }, "gsap": { "n": 10, "share": 71.4 }, "customShaders": { "n": 13, "share": 92.9 }, "reduced": { "n": 14, "share": 100 }, "pause": { "n": 9, "share": 64.3 }, "mobile": { "n": 11, "share": 78.6 }, "lazy": { "n": 7, "share": 50 }, "lazyAttr": { "n": 6, "share": 42.9 }, "observer": { "n": 7, "share": 50 }, "reducedAndPause": { "n": 9, "share": 64.3 } } ], "byCategory": [ { "category": "AI / SaaS", "n": 63, "exVideo": { "median": 195, "p75": 1209, "p90": 2564, "min": 13, "max": 5725 }, "withVideo": { "median": 215, "p75": 2590, "p90": 4201, "min": 13, "max": 13442 }, "code": { "median": 40, "p75": 130, "p90": 220, "min": 13, "max": 877 }, "three": { "n": 40, "share": 63.5 }, "gsap": { "n": 19, "share": 30.2 }, "customShaders": { "n": 41, "share": 65.1 }, "reduced": { "n": 63, "share": 100 }, "pause": { "n": 35, "share": 55.6 }, "mobile": { "n": 35, "share": 55.6 }, "lazy": { "n": 47, "share": 74.6 }, "lazyAttr": { "n": 11, "share": 17.5 }, "observer": { "n": 47, "share": 74.6 }, "reducedAndPause": { "n": 35, "share": 55.6 } }, { "category": "3D / WebGL", "n": 50, "exVideo": { "median": 147, "p75": 727, "p90": 895, "min": 12, "max": 14619 }, "withVideo": { "median": 147, "p75": 728, "p90": 1007, "min": 12, "max": 14619 }, "code": { "median": 147, "p75": 726, "p90": 880, "min": 12, "max": 2255 }, "three": { "n": 44, "share": 88 }, "gsap": { "n": 25, "share": 50 }, "customShaders": { "n": 36, "share": 72 }, "reduced": { "n": 49, "share": 98 }, "pause": { "n": 15, "share": 30 }, "mobile": { "n": 37, "share": 74 }, "lazy": { "n": 30, "share": 60 }, "lazyAttr": { "n": 19, "share": 38 }, "observer": { "n": 30, "share": 60 }, "reducedAndPause": { "n": 15, "share": 30 } }, { "category": "Agency", "n": 37, "exVideo": { "median": 728, "p75": 1636, "p90": 2890, "min": 11, "max": 7770 }, "withVideo": { "median": 738, "p75": 1950, "p90": 4426, "min": 11, "max": 8847 }, "code": { "median": 210, "p75": 214, "p90": 732, "min": 11, "max": 867 }, "three": { "n": 28, "share": 75.7 }, "gsap": { "n": 14, "share": 37.8 }, "customShaders": { "n": 24, "share": 64.9 }, "reduced": { "n": 37, "share": 100 }, "pause": { "n": 20, "share": 54.1 }, "mobile": { "n": 24, "share": 64.9 }, "lazy": { "n": 32, "share": 86.5 }, "lazyAttr": { "n": 17, "share": 45.9 }, "observer": { "n": 30, "share": 81.1 }, "reducedAndPause": { "n": 20, "share": 54.1 } }, { "category": "Health & Wellness", "n": 37, "exVideo": { "median": 735, "p75": 3214, "p90": 5050, "min": 15, "max": 8939 }, "withVideo": { "median": 962, "p75": 4433, "p90": 7174, "min": 15, "max": 10563 }, "code": { "median": 51, "p75": 711, "p90": 739, "min": 10, "max": 1702 }, "three": { "n": 16, "share": 43.2 }, "gsap": { "n": 5, "share": 13.5 }, "customShaders": { "n": 13, "share": 35.1 }, "reduced": { "n": 37, "share": 100 }, "pause": { "n": 30, "share": 81.1 }, "mobile": { "n": 26, "share": 70.3 }, "lazy": { "n": 24, "share": 64.9 }, "lazyAttr": { "n": 9, "share": 24.3 }, "observer": { "n": 23, "share": 62.2 }, "reducedAndPause": { "n": 30, "share": 81.1 } }, { "category": "Travel", "n": 30, "exVideo": { "median": 810, "p75": 6923, "p90": 10617, "min": 12, "max": 22365 }, "withVideo": { "median": 2233, "p75": 7394, "p90": 10617, "min": 12, "max": 25950 }, "code": { "median": 47, "p75": 205, "p90": 733, "min": 12, "max": 876 }, "three": { "n": 12, "share": 40 }, "gsap": { "n": 6, "share": 20 }, "customShaders": { "n": 15, "share": 50 }, "reduced": { "n": 30, "share": 100 }, "pause": { "n": 20, "share": 66.7 }, "mobile": { "n": 20, "share": 66.7 }, "lazy": { "n": 20, "share": 66.7 }, "lazyAttr": { "n": 9, "share": 30 }, "observer": { "n": 19, "share": 63.3 }, "reducedAndPause": { "n": 20, "share": 66.7 } }, { "category": "Fashion & Luxury", "n": 27, "exVideo": { "median": 1597, "p75": 4513, "p90": 6702, "min": 17, "max": 13772 }, "withVideo": { "median": 2692, "p75": 4658, "p90": 7771, "min": 17, "max": 13772 }, "code": { "median": 40, "p75": 75, "p90": 730, "min": 15, "max": 4395 }, "three": { "n": 8, "share": 29.6 }, "gsap": { "n": 6, "share": 22.2 }, "customShaders": { "n": 10, "share": 37 }, "reduced": { "n": 27, "share": 100 }, "pause": { "n": 21, "share": 77.8 }, "mobile": { "n": 19, "share": 70.4 }, "lazy": { "n": 17, "share": 63 }, "lazyAttr": { "n": 12, "share": 44.4 }, "observer": { "n": 13, "share": 48.1 }, "reducedAndPause": { "n": 21, "share": 77.8 } }, { "category": "Food & Hospitality", "n": 27, "exVideo": { "median": 724, "p75": 962, "p90": 5646, "min": 24, "max": 9624 }, "withVideo": { "median": 725, "p75": 1502, "p90": 5646, "min": 24, "max": 9624 }, "code": { "median": 118, "p75": 724, "p90": 737, "min": 16, "max": 876 }, "three": { "n": 15, "share": 55.6 }, "gsap": { "n": 2, "share": 7.4 }, "customShaders": { "n": 10, "share": 37 }, "reduced": { "n": 27, "share": 100 }, "pause": { "n": 23, "share": 85.2 }, "mobile": { "n": 15, "share": 55.6 }, "lazy": { "n": 16, "share": 59.3 }, "lazyAttr": { "n": 7, "share": 25.9 }, "observer": { "n": 16, "share": 59.3 }, "reducedAndPause": { "n": 23, "share": 85.2 } }, { "category": "Ecommerce", "n": 26, "exVideo": { "median": 747, "p75": 1394, "p90": 5375, "min": 30, "max": 8683 }, "withVideo": { "median": 819, "p75": 1394, "p90": 5375, "min": 30, "max": 8683 }, "code": { "median": 95, "p75": 738, "p90": 876, "min": 15, "max": 883 }, "three": { "n": 16, "share": 61.5 }, "gsap": { "n": 8, "share": 30.8 }, "customShaders": { "n": 13, "share": 50 }, "reduced": { "n": 26, "share": 100 }, "pause": { "n": 16, "share": 61.5 }, "mobile": { "n": 11, "share": 42.3 }, "lazy": { "n": 20, "share": 76.9 }, "lazyAttr": { "n": 13, "share": 50 }, "observer": { "n": 19, "share": 73.1 }, "reducedAndPause": { "n": 16, "share": 61.5 } }, { "category": "Music & Events", "n": 22, "exVideo": { "median": 526, "p75": 737, "p90": 1526, "min": 12, "max": 5947 }, "withVideo": { "median": 735, "p75": 2067, "p90": 3109, "min": 12, "max": 7512 }, "code": { "median": 75, "p75": 574, "p90": 731, "min": 12, "max": 877 }, "three": { "n": 10, "share": 45.5 }, "gsap": { "n": 2, "share": 9.1 }, "customShaders": { "n": 12, "share": 54.5 }, "reduced": { "n": 22, "share": 100 }, "pause": { "n": 17, "share": 77.3 }, "mobile": { "n": 15, "share": 68.2 }, "lazy": { "n": 12, "share": 54.5 }, "lazyAttr": { "n": 3, "share": 13.6 }, "observer": { "n": 12, "share": 54.5 }, "reducedAndPause": { "n": 17, "share": 77.3 } }, { "category": "Real Estate & Architecture", "n": 21, "exVideo": { "median": 1414, "p75": 3227, "p90": 7246, "min": 16, "max": 7661 }, "withVideo": { "median": 1624, "p75": 5966, "p90": 8564, "min": 16, "max": 9194 }, "code": { "median": 87, "p75": 726, "p90": 780, "min": 16, "max": 876 }, "three": { "n": 10, "share": 47.6 }, "gsap": { "n": 3, "share": 14.3 }, "customShaders": { "n": 12, "share": 57.1 }, "reduced": { "n": 21, "share": 100 }, "pause": { "n": 16, "share": 76.2 }, "mobile": { "n": 14, "share": 66.7 }, "lazy": { "n": 17, "share": 81 }, "lazyAttr": { "n": 5, "share": 23.8 }, "observer": { "n": 17, "share": 81 }, "reducedAndPause": { "n": 16, "share": 76.2 } }, { "category": "Fintech", "n": 18, "exVideo": { "median": 35, "p75": 497, "p90": 2829, "min": 22, "max": 6572 }, "withVideo": { "median": 126, "p75": 1275, "p90": 5005, "min": 22, "max": 8298 }, "code": { "median": 27, "p75": 36, "p90": 96, "min": 15, "max": 757 }, "three": { "n": 7, "share": 38.9 }, "gsap": { "n": 3, "share": 16.7 }, "customShaders": { "n": 9, "share": 50 }, "reduced": { "n": 18, "share": 100 }, "pause": { "n": 11, "share": 61.1 }, "mobile": { "n": 7, "share": 38.9 }, "lazy": { "n": 10, "share": 55.6 }, "lazyAttr": { "n": 1, "share": 5.6 }, "observer": { "n": 10, "share": 55.6 }, "reducedAndPause": { "n": 11, "share": 61.1 } }, { "category": "Automotive", "n": 17, "exVideo": { "median": 738, "p75": 1724, "p90": 8083, "min": 42, "max": 13643 }, "withVideo": { "median": 865, "p75": 3325, "p90": 8838, "min": 48, "max": 13643 }, "code": { "median": 48, "p75": 712, "p90": 728, "min": 15, "max": 877 }, "three": { "n": 9, "share": 52.9 }, "gsap": { "n": 9, "share": 52.9 }, "customShaders": { "n": 8, "share": 47.1 }, "reduced": { "n": 17, "share": 100 }, "pause": { "n": 9, "share": 52.9 }, "mobile": { "n": 6, "share": 35.3 }, "lazy": { "n": 9, "share": 52.9 }, "lazyAttr": { "n": 5, "share": 29.4 }, "observer": { "n": 8, "share": 47.1 }, "reducedAndPause": { "n": 9, "share": 52.9 } }, { "category": "Education", "n": 13, "exVideo": { "median": 875, "p75": 1494, "p90": 7090, "min": 28, "max": 7638 }, "withVideo": { "median": 875, "p75": 3722, "p90": 8266, "min": 28, "max": 9219 }, "code": { "median": 716, "p75": 724, "p90": 847, "min": 28, "max": 1490 }, "three": { "n": 9, "share": 69.2 }, "gsap": { "n": 1, "share": 7.7 }, "customShaders": { "n": 6, "share": 46.2 }, "reduced": { "n": 13, "share": 100 }, "pause": { "n": 11, "share": 84.6 }, "mobile": { "n": 10, "share": 76.9 }, "lazy": { "n": 7, "share": 53.8 }, "lazyAttr": { "n": 4, "share": 30.8 }, "observer": { "n": 7, "share": 53.8 }, "reducedAndPause": { "n": 11, "share": 84.6 } }, { "category": "Portfolio", "n": 12, "exVideo": { "median": 623, "p75": 1093, "p90": 2299, "min": 40, "max": 4377 }, "withVideo": { "median": 623, "p75": 1093, "p90": 2299, "min": 40, "max": 4694 }, "code": { "median": 48, "p75": 720, "p90": 864, "min": 23, "max": 877 }, "three": { "n": 8, "share": 66.7 }, "gsap": { "n": 5, "share": 41.7 }, "customShaders": { "n": 6, "share": 50 }, "reduced": { "n": 12, "share": 100 }, "pause": { "n": 4, "share": 33.3 }, "mobile": { "n": 4, "share": 33.3 }, "lazy": { "n": 6, "share": 50 }, "lazyAttr": { "n": 2, "share": 16.7 }, "observer": { "n": 6, "share": 50 }, "reducedAndPause": { "n": 4, "share": 33.3 } }, { "category": "Storytelling", "n": 11, "exVideo": { "median": 506, "p75": 739, "p90": 1728, "min": 69, "max": 6822 }, "withVideo": { "median": 720, "p75": 1238, "p90": 6166, "min": 86, "max": 6822 }, "code": { "median": 33, "p75": 48, "p90": 90, "min": 19, "max": 749 }, "three": { "n": 5, "share": 45.5 }, "gsap": { "n": 5, "share": 45.5 }, "customShaders": { "n": 4, "share": 36.4 }, "reduced": { "n": 11, "share": 100 }, "pause": { "n": 4, "share": 36.4 }, "mobile": { "n": 5, "share": 45.5 }, "lazy": { "n": 8, "share": 72.7 }, "lazyAttr": { "n": 4, "share": 36.4 }, "observer": { "n": 7, "share": 63.6 }, "reducedAndPause": { "n": 4, "share": 36.4 } }, { "category": "Gaming & Entertainment", "n": 8, "exVideo": { "median": 712, "p75": 730, "p90": 935, "min": 39, "max": 1408 }, "withVideo": { "median": 712, "p75": 730, "p90": 935, "min": 39, "max": 1408 }, "code": { "median": 712, "p75": 730, "p90": 775, "min": 39, "max": 876 }, "three": { "n": 6, "share": 75 }, "gsap": { "n": 1, "share": 12.5 }, "customShaders": { "n": 5, "share": 62.5 }, "reduced": { "n": 8, "share": 100 }, "pause": { "n": 6, "share": 75 }, "mobile": { "n": 4, "share": 50 }, "lazy": { "n": 3, "share": 37.5 }, "lazyAttr": { "n": 1, "share": 12.5 }, "observer": { "n": 3, "share": 37.5 }, "reducedAndPause": { "n": 6, "share": 75 } }, { "category": "Web3", "n": 4, "exVideo": { "median": 25, "p75": 75, "p90": 161, "min": 17, "max": 218 }, "withVideo": { "median": 25, "p75": 75, "p90": 161, "min": 17, "max": 218 }, "code": { "median": 25, "p75": 75, "p90": 161, "min": 17, "max": 218 }, "three": { "n": 4, "share": 100 }, "gsap": { "n": 2, "share": 50 }, "customShaders": { "n": 4, "share": 100 }, "reduced": { "n": 4, "share": 100 }, "pause": { "n": 1, "share": 25 }, "mobile": { "n": 1, "share": 25 }, "lazy": { "n": 3, "share": 75 }, "lazyAttr": { "n": 1, "share": 25 }, "observer": { "n": 3, "share": 75 }, "reducedAndPause": { "n": 1, "share": 25 } }, { "category": "Editorial", "n": 3, "exVideo": { "median": 324, "p75": 2507, "p90": 3817, "min": 82, "max": 4690 }, "withVideo": { "median": 324, "p75": 3727, "p90": 5769, "min": 82, "max": 7131 }, "code": { "median": 51, "p75": 67, "p90": 76, "min": 27, "max": 82 }, "three": { "n": 1, "share": 33.3 }, "gsap": { "n": 1, "share": 33.3 }, "customShaders": { "n": 2, "share": 66.7 }, "reduced": { "n": 3, "share": 100 }, "pause": { "n": 2, "share": 66.7 }, "mobile": { "n": 2, "share": 66.7 }, "lazy": { "n": 2, "share": 66.7 }, "lazyAttr": { "n": 0, "share": 0 }, "observer": { "n": 2, "share": 66.7 }, "reducedAndPause": { "n": 2, "share": 66.7 } }, { "category": "Nonprofit", "n": 3, "exVideo": { "median": 891, "p75": 4511, "p90": 6684, "min": 184, "max": 8132 }, "withVideo": { "median": 891, "p75": 5130, "p90": 7674, "min": 184, "max": 9370 }, "code": { "median": 103, "p75": 110, "p90": 114, "min": 39, "max": 117 }, "three": { "n": 2, "share": 66.7 }, "gsap": { "n": 1, "share": 33.3 }, "customShaders": { "n": 2, "share": 66.7 }, "reduced": { "n": 3, "share": 100 }, "pause": { "n": 3, "share": 100 }, "mobile": { "n": 2, "share": 66.7 }, "lazy": { "n": 2, "share": 66.7 }, "lazyAttr": { "n": 1, "share": 33.3 }, "observer": { "n": 2, "share": 66.7 }, "reducedAndPause": { "n": 3, "share": 100 } } ], "byAccess": [ { "access": "free", "n": 26, "exVideo": { "median": 18, "p75": 38, "p90": 294, "min": 11, "max": 690 }, "withVideo": { "median": 18, "p75": 38, "p90": 294, "min": 11, "max": 690 }, "code": { "median": 18, "p75": 31, "p90": 39, "min": 11, "max": 54 }, "three": { "n": 8, "share": 30.8 }, "gsap": { "n": 2, "share": 7.7 }, "customShaders": { "n": 15, "share": 57.7 }, "reduced": { "n": 26, "share": 100 }, "pause": { "n": 3, "share": 11.5 }, "mobile": { "n": 20, "share": 76.9 }, "lazy": { "n": 25, "share": 96.2 }, "lazyAttr": { "n": 2, "share": 7.7 }, "observer": { "n": 25, "share": 96.2 }, "reducedAndPause": { "n": 3, "share": 11.5 } }, { "access": "pro", "n": 403, "exVideo": { "median": 723, "p75": 1726, "p90": 5546, "min": 12, "max": 22365 }, "withVideo": { "median": 735, "p75": 2882, "p90": 6911, "min": 12, "max": 25950 }, "code": { "median": 56, "p75": 710, "p90": 748, "min": 10, "max": 4395 }, "three": { "n": 242, "share": 60 }, "gsap": { "n": 116, "share": 28.8 }, "customShaders": { "n": 217, "share": 53.8 }, "reduced": { "n": 402, "share": 99.8 }, "pause": { "n": 261, "share": 64.8 }, "mobile": { "n": 237, "share": 58.8 }, "lazy": { "n": 260, "share": 64.5 }, "lazyAttr": { "n": 122, "share": 30.3 }, "observer": { "n": 249, "share": 61.8 }, "reducedAndPause": { "n": 261, "share": 64.8 } } ], "video": { "demosShippingVideo": { "n": 91, "share": 21.2 }, "mp4": { "n": 91, "share": 21.2 }, "webm": { "n": 7, "share": 1.6 }, "both": { "n": 7, "share": 1.6 }, "videoShareOfBytes": { "demos": 91, "percent": 44.1 }, "medianWithVideoKbForVideoDemos": 4126 }, "images": { "webp": { "n": 165, "share": 38.5 }, "avif": { "n": 2, "share": 0.5 }, "jpg": { "n": 109, "share": 25.4 }, "png": { "n": 33, "share": 7.7 } }, "shaders": { "demos": 232, "medianPerDemo": 4, "withProgramCount": 232, "totalPrograms": 1460 }, "method": { "sample": "Every template in the catalog with a live demo that has a folder at public/demos//index.html on the generated date.", "demoSize": "Demo size is the sum of file sizes in the demo folder in KB (1 KB = 1,024 bytes), counting what a visitor could download. QA screenshots, licence and credit notes, readmes and text notes are left out. 'Excluding video' also leaves out mp4, webm, mov and m4v files.", "percentiles": "Median, 75th and 90th percentile use linear interpolation between the closest ranks.", "tech": "Demo technology comes from the catalog's build step: video (a video element with a video file), webgl (WebGL context or three.js), canvas (2D context), css (none of those). Video plus WebGL is a separate group.", "detection": "Static text scan of each demo's own html, css and js. Library files (vendor folders, three.js, GSAP, Lenis and minified files) are excluded from the own-code checks. three.js: an import, script tag or global THREE call, or a bundled three file. GSAP: any mention of gsap in own code or a bundled gsap file. Custom shaders: ShaderMaterial or RawShaderMaterial, or at least one GLSL 'void main()' in own code or a .glsl, .frag or .vert file. Reduced motion: the string prefers-reduced-motion. Pause control: a pause motion or pause animation label, a pause id or class, or a data-pause attribute. Mobile breakpoint: an @media rule or matchMedia call with a max-width (or width <=) at or under 760px (em and rem converted at 16px). Lazy loading: loading=lazy or an IntersectionObserver.", "skipped": "The internal ?shot capture mode is not measured.", "limits": [ "Demo size is the weight of a demo folder, not the weight of a production site. Frame sequences and unused files count in full, and a visitor never downloads all of them on first load.", "Scripts loaded from a CDN (many demos load GSAP and Lenis this way) are not counted in demo size.", "A static scan cannot tell whether a feature works. A page that mentions prefers-reduced-motion may handle it in only one section, and a pause control may be hidden.", "The sample is the AnimatedWebs catalog. It is not a sample of the whole web." ] } }