dev: наработки лотти иконок

assets/lottie/ic_call.json

@@ -0,0 +1 @@
+{"v":"5.12.1","fr":60,"ip":0,"op":30,"w":500,"h":500,"nm":"ic_call","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"ic_call","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"t":0,"s":[0],"i":{"x":[0.42],"y":[1]},"o":{"x":[0.58],"y":[0]}},{"t":4,"s":[-17],"i":{"x":[0.42],"y":[1]},"o":{"x":[0.58],"y":[0]}},{"t":9,"s":[14],"i":{"x":[0.42],"y":[1]},"o":{"x":[0.58],"y":[0]}},{"t":14,"s":[-10],"i":{"x":[0.42],"y":[1]},"o":{"x":[0.58],"y":[0]}},{"t":19,"s":[6],"i":{"x":[0.42],"y":[1]},"o":{"x":[0.58],"y":[0]}},{"t":24,"s":[-3],"i":{"x":[0.42],"y":[1]},"o":{"x":[0.58],"y":[0]}},{"t":30,"s":[0]}],"ix":10},"p":{"a":0,"k":[250.0,250.0,0],"ix":2,"l":2},"a":{"a":0,"k":[250.0,250.0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[13.393,-0.0],[71.528,71.528],[0.0,80.556],[-13.393,-0.0],[0.0,0.0],[-2.778,-10.417],[0.0,0.0],[5.714,-5.713],[0.0,0.0],[-24.306,-23.611],[-31.25,-16.667],[0.0,0.0],[-8.818,-1.389],[0.0,0.0],[0.0,-10.355],[0.0,0.0]],"o":[[-80.556,-0.0],[-71.528,-71.528],[0.0,-13.393],[0.0,0.0],[9.722,-0.0],[0.0,0.0],[1.438,9.972],[0.0,0.0],[18.056,30.556],[25.694,26.389],[0.0,0.0],[6.944,-7.639],[0.0,0.0],[10.417,2.778],[0.0,0.0],[0.0,13.393]],"v":[[414.063,437.5],[174.479,325.521],[62.5,85.937],[85.938,62.5],[158.854,62.5],[178.646,80.729],[192.671,146.167],[186.86,169.91],[134.896,222.396],[196.875,302.604],[282.292,367.708],[331.771,316.667],[357.292,307.812],[419.271,321.354],[437.5,343.75],[437.5,414.062]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[-17.361,-41.667],[0.0,0.0],[0.0,-0.0],[0.0,-0.0],[0.0,0.0],[0.0,-0.0],[0.0,-0.0],[0.0,0.0],[0.0,-0.0],[0.0,-0.0]],"o":[[0.0,0.0],[0.0,-0.0],[0.0,-0.0],[0.0,0.0],[0.0,-0.0],[0.0,-0.0],[0.0,0.0],[0.0,-0.0],[0.0,-0.0],[0.0,27.083]],"v":[[119.271,193.75],[161.458,151.042],[161.458,151.042],[161.458,151.042],[149.479,93.75],[149.479,93.75],[149.479,93.75],[93.75,93.75],[93.75,93.75],[93.75,93.75]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ind":2,"ty":"sh","ix":3,"ks":{"a":0,"k":{"i":[[0.0,0.0],[-31.25,-1.389],[0.0,-0.0],[0.0,-0.0],[0.0,0.0],[0.0,-0.0],[0.0,-0.0],[0.0,0.0],[0.0,-0.0],[0.0,-0.0]],"o":[[28.472,13.194],[0.0,-0.0],[0.0,-0.0],[0.0,0.0],[0.0,-0.0],[0.0,-0.0],[0.0,0.0],[0.0,-0.0],[0.0,-0.0],[0.0,0.0]],"v":[[311.458,382.812],[406.25,406.25],[406.25,406.25],[406.25,406.25],[406.25,350.521],[406.25,350.521],[406.25,350.521],[352.604,339.583],[352.604,339.583],[352.604,339.583]],"c":true},"ix":2},"nm":"Path 3","mn":"ADBE Vector Shape - Group","hd":false},{"ind":3,"ty":"sh","ix":4,"ks":{"a":0,"k":{"i":[[0.0,0.0],[0.0,27.083],[0.0,-0.0],[0.0,-0.0],[0.0,0.0],[0.0,-0.0],[0.0,-0.0],[0.0,0.0],[0.0,-0.0],[0.0,-0.0]],"o":[[-17.361,-41.667],[0.0,-0.0],[0.0,-0.0],[0.0,0.0],[0.0,-0.0],[0.0,-0.0],[0.0,0.0],[0.0,-0.0],[0.0,-0.0],[0.0,0.0]],"v":[[119.271,193.75],[93.75,93.75],[93.75,93.75],[93.75,93.75],[149.479,93.75],[149.479,93.75],[149.479,93.75],[161.458,151.042],[161.458,151.042],[161.458,151.042]],"c":true},"ix":2},"nm":"Path 4","mn":"ADBE Vector Shape - Group","hd":false},{"ind":4,"ty":"sh","ix":5,"ks":{"a":0,"k":{"i":[[28.472,13.194],[0.0,0.0],[0.0,-0.0],[0.0,-0.0],[0.0,0.0],[0.0,-0.0],[0.0,-0.0],[0.0,0.0],[0.0,-0.0],[0.0,-0.0]],"o":[[0.0,0.0],[0.0,-0.0],[0.0,-0.0],[0.0,0.0],[0.0,-0.0],[0.0,-0.0],[0.0,0.0],[0.0,-0.0],[0.0,-0.0],[-31.25,-1.389]],"v":[[311.458,382.812],[352.604,339.583],[352.604,339.583],[352.604,339.583],[406.25,350.521],[406.25,350.521],[406.25,350.521],[406.25,406.25],[406.25,406.25],[406.25,406.25]],"c":true},"ix":2},"nm":"Path 5","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":6,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":30,"st":0,"bm":0}],"markers":[]}

assets/lottie/ic_chat.json

@@ -0,0 +1 @@
+{"v":"5.12.1","fr":60,"ip":0,"op":30,"w":600,"h":600,"nm":"ic_chat","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"ic_chat","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"ix":10,"k":[{"t":0,"s":[0],"i":{"x":[0.4],"y":[1]},"o":{"x":[0.6],"y":[0]}},{"t":6,"s":[-22],"i":{"x":[0.4],"y":[1]},"o":{"x":[0.6],"y":[0]}},{"t":14,"s":[9],"i":{"x":[0.4],"y":[1]},"o":{"x":[0.6],"y":[0]}},{"t":20,"s":[-4],"i":{"x":[0.4],"y":[1]},"o":{"x":[0.6],"y":[0]}},{"t":25,"s":[1.5],"i":{"x":[0.4],"y":[1]},"o":{"x":[0.6],"y":[0]}},{"t":30,"s":[0]}]},"p":{"a":1,"ix":2,"l":2,"k":[{"t":0,"s":[300,300,0],"i":{"x":[0.4],"y":[1]},"o":{"x":[0.6],"y":[0]}},{"t":6,"s":[284,300,0],"i":{"x":[0.4],"y":[1]},"o":{"x":[0.6],"y":[0]}},{"t":14,"s":[306,300,0],"i":{"x":[0.4],"y":[1]},"o":{"x":[0.6],"y":[0]}},{"t":20,"s":[298,300,0],"i":{"x":[0.4],"y":[1]},"o":{"x":[0.6],"y":[0]}},{"t":30,"s":[300,300,0]}]},"a":{"a":0,"k":[250,250,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.0,0.0],[0.0,0.0],[-16.667,-0.0],[0.0,0.0],[0.0,-16.667],[0.0,0.0],[16.667,-0.0],[0.0,0.0]],"o":[[0.0,0.0],[0.0,-16.667],[0.0,0.0],[16.667,-0.0],[0.0,0.0],[0.0,16.667],[0.0,0.0],[0.0,0.0]],"v":[[41.667,458.333],[41.667,72.917],[72.917,41.667],[427.083,41.667],[458.333,72.917],[458.333,343.75],[427.083,375.0],[125.0,375.0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[0.0,0.0],[0.0,0.0],[0.0,-0.0],[0.0,-0.0],[0.0,0.0],[0.0,-0.0],[0.0,-0.0],[0.0,0.0],[0.0,-0.0],[0.0,-0.0],[0.0,0.0]],"o":[[0.0,0.0],[0.0,-0.0],[0.0,-0.0],[0.0,0.0],[0.0,-0.0],[0.0,-0.0],[0.0,0.0],[0.0,-0.0],[0.0,-0.0],[0.0,0.0],[0.0,0.0]],"v":[[111.458,343.75],[427.083,343.75],[427.083,343.75],[427.083,343.75],[427.083,72.917],[427.083,72.917],[427.083,72.917],[72.917,72.917],[72.917,72.917],[72.917,72.917],[72.917,385.417]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ind":2,"ty":"sh","ix":3,"ks":{"a":0,"k":{"i":[[0.0,0.0],[0.0,0.0],[0.0,0.0],[0.0,-0.0],[0.0,-0.0],[0.0,0.0],[0.0,-0.0],[0.0,-0.0],[0.0,0.0],[0.0,-0.0],[0.0,-0.0]],"o":[[0.0,0.0],[0.0,0.0],[0.0,-0.0],[0.0,-0.0],[0.0,0.0],[0.0,-0.0],[0.0,-0.0],[0.0,0.0],[0.0,-0.0],[0.0,-0.0],[0.0,0.0]],"v":[[111.458,343.75],[72.917,385.417],[72.917,72.917],[72.917,72.917],[72.917,72.917],[427.083,72.917],[427.083,72.917],[427.083,72.917],[427.083,343.75],[427.083,343.75],[427.083,343.75]],"c":true},"ix":2},"nm":"Path 3","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":30,"st":0,"bm":0}],"markers":[]}

assets/lottie/ic_contacts.json

@@ -0,0 +1 @@
+{"v":"5.12.1","fr":60,"ip":0,"op":31,"w":600,"h":600,"nm":"ic_contacts","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"ic_contacts","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"ix":10,"k":[{"t":0,"s":[0],"i":{"x":[0.4],"y":[1]},"o":{"x":[0.6],"y":[0]}},{"t":9,"s":[22],"i":{"x":[0.4],"y":[1]},"o":{"x":[0.6],"y":[0]}},{"t":15,"s":[18],"i":{"x":[0.4],"y":[1]},"o":{"x":[0.6],"y":[0]}},{"t":22,"s":[-5],"i":{"x":[0.4],"y":[1]},"o":{"x":[0.6],"y":[0]}},{"t":27,"s":[2],"i":{"x":[0.4],"y":[1]},"o":{"x":[0.6],"y":[0]}},{"t":31,"s":[0]}]},"p":{"a":0,"k":[248,532,0],"ix":2,"l":2},"a":{"a":0,"k":[250,479,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.0,0.0],[0.0,0.0],[0.0,0.0],[0.0,16.667],[0.0,0.0],[-16.667,0.0],[0.0,0.0],[0.0,-17.187],[0.0,0.0],[16.667,-0.0],[0.0,0.0]],"o":[[0.0,0.0],[0.0,0.0],[-16.667,-0.0],[0.0,0.0],[0.0,-17.187],[0.0,0.0],[16.667,0.0],[0.0,0.0],[0.0,16.667],[0.0,0.0],[0.0,0.0]],"v":[[250.0,479.167],[186.979,416.146],[93.75,416.146],[62.5,384.896],[62.5,72.396],[93.75,41.146],[406.25,41.146],[437.5,72.396],[437.5,384.896],[406.25,416.146],[313.021,416.146]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[0.0,0.0],[-61.183,-0.0],[-41.667,-38.889],[0.0,0.0],[0.0,0.0],[0.0,0.0],[0.0,0.0]],"o":[[41.667,-38.889],[61.183,-0.0],[0.0,0.0],[0.0,0.0],[0.0,0.0],[0.0,0.0],[0.0,0.0]],"v":[[93.75,365.625],[249.946,300.521],[406.25,365.625],[406.25,72.396],[406.25,72.396],[93.75,72.396],[93.75,72.396]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ind":2,"ty":"sh","ix":3,"ks":{"a":0,"k":{"i":[[-20.139,0.0],[-13.889,13.889],[0.0,20.139],[13.889,13.889],[20.139,-0.0],[13.889,-13.889],[0.0,-20.139],[-13.889,-13.889]],"o":[[20.139,0.0],[13.889,-13.889],[0.0,-20.139],[-13.889,-13.889],[-20.139,-0.0],[-13.889,13.889],[0.0,20.139],[13.889,13.889]],"v":[[251.042,269.792],[302.083,248.958],[322.917,197.917],[302.083,146.875],[251.042,126.042],[200.0,146.875],[179.167,197.917],[200.0,248.958]],"c":true},"ix":2},"nm":"Path 3","mn":"ADBE Vector Shape - Group","hd":false},{"ind":3,"ty":"sh","ix":4,"ks":{"a":0,"k":{"i":[[0.0,-7.639],[0.0,0.0],[0.0,7.341],[61.111,-0.0],[41.667,-38.889]],"o":[[0.0,0.0],[0.0,-7.639],[-41.667,-38.889],[-61.111,-0.0],[0.0,7.341]],"v":[[93.75,384.896],[406.25,384.896],[406.25,365.625],[250.0,300.521],[93.75,365.625]],"c":true},"ix":2},"nm":"Path 4","mn":"ADBE Vector Shape - Group","hd":false},{"ind":4,"ty":"sh","ix":5,"ks":{"a":0,"k":{"i":[[0.0,-0.0],[0.0,-0.0],[0.0,-0.0],[0.0,-0.0],[0.0,-0.0],[0.0,-0.0],[0.0,-0.0],[0.0,-0.0]],"o":[[0.0,-0.0],[0.0,-0.0],[0.0,-0.0],[0.0,-0.0],[0.0,-0.0],[0.0,-0.0],[0.0,-0.0],[0.0,-0.0]],"v":[[251.563,197.917],[251.563,197.917],[251.563,197.917],[251.563,197.917],[251.563,197.917],[251.563,197.917],[251.563,197.917],[251.563,197.917]],"c":true},"ix":2},"nm":"Path 5","mn":"ADBE Vector Shape - Group","hd":false},{"ind":5,"ty":"sh","ix":6,"ks":{"a":0,"k":{"i":[[41.667,-38.889],[0.0,0.0],[0.0,0.0],[0.0,0.0],[0.0,0.0],[0.0,0.0],[61.111,-0.0]],"o":[[0.0,0.0],[0.0,0.0],[0.0,0.0],[0.0,0.0],[0.0,0.0],[-41.667,-38.889],[-61.111,-0.0]],"v":[[93.75,365.625],[93.75,72.396],[93.75,72.396],[406.25,72.396],[406.25,72.396],[406.25,365.625],[250.0,300.521]],"c":true},"ix":2},"nm":"Path 6","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":7,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":31,"st":0,"bm":0}],"markers":[]}

lib/core/config/app_animations.dart

@@ -6,4 +6,7 @@ class AppAnimations {
   static const String clock = '$_dir/ic_clock.json';
   static const String search = '$_dir/ic_search.json';
   static const String settings = '$_dir/ic_settings.json';
+  static const String chat = '$_dir/ic_chat.json';
+  static const String call = '$_dir/ic_call.json';
+  static const String contacts = '$_dir/ic_contacts.json';
 }

lib/frontend/debug/lottie_polygon_section.dart

@@ -0,0 +1,70 @@
+import 'package:flutter/material.dart';
+import 'package:material_symbols_icons/symbols.dart';
+
+import '../screens/profile/lottie_polygon_screen.dart';
+
+class DebugLottiePolygonSection extends StatelessWidget {
+  const DebugLottiePolygonSection({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final cs = Theme.of(context).colorScheme;
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(16, 12, 16, 0),
+      child: Material(
+        color: cs.surfaceContainerHigh,
+        borderRadius: BorderRadius.circular(20),
+        child: InkWell(
+          borderRadius: BorderRadius.circular(20),
+          onTap: () => Navigator.push(
+            context,
+            MaterialPageRoute(builder: (_) => const LottiePolygonScreen()),
+          ),
+          child: Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 17),
+            child: Row(
+              children: [
+                Icon(
+                  Symbols.animation,
+                  color: cs.onSurfaceVariant,
+                  size: 22,
+                  weight: 400,
+                ),
+                const SizedBox(width: 16),
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        'Lottie полигон',
+                        style: TextStyle(
+                          color: cs.onSurface,
+                          fontSize: 16,
+                          fontWeight: FontWeight.w500,
+                        ),
+                      ),
+                      const SizedBox(height: 2),
+                      Text(
+                        'Анимированные иконки — тапни, чтобы проиграть',
+                        style: TextStyle(
+                          color: cs.onSurfaceVariant,
+                          fontSize: 13,
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+                Icon(
+                  Symbols.chevron_right,
+                  color: cs.onSurfaceVariant,
+                  size: 22,
+                  weight: 400,
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/frontend/screens/profile/debug_menu_screen.dart

@@ -14,6 +14,7 @@ import '../../debug/feature_toggles_section.dart';
 import '../../debug/header_section.dart';
 import '../../debug/id_search_section.dart';
 import '../../debug/log_export.dart';
+import '../../debug/lottie_polygon_section.dart';
 import '../../debug/network_section.dart';
 import '../../debug/previews_section.dart';
 import '../../debug/quick_actions_section.dart';
@@ -221,6 +222,7 @@ class _DebugMenuScreenState extends State<DebugMenuScreen> {
                 onExportLog: () => exportDebugLog(context),
               ),
             ),
+            const SliverToBoxAdapter(child: DebugLottiePolygonSection()),
             SliverToBoxAdapter(child: DebugNetworkSection(appState: appState)),
             const SliverToBoxAdapter(child: DebugFeatureTogglesSection()),
             SliverToBoxAdapter(

lib/frontend/screens/profile/lottie_polygon_screen.dart

@@ -0,0 +1,146 @@
+import 'package:flutter/material.dart';
+import 'package:lottie/lottie.dart';
+import 'package:material_symbols_icons/symbols.dart';
+
+import '../../../core/config/app_animations.dart';
+
+class LottiePolygonScreen extends StatelessWidget {
+  const LottiePolygonScreen({super.key});
+
+  static const List<_PolygonEntry> _entries = [
+    _PolygonEntry('call', AppAnimations.call),
+    _PolygonEntry('settings', AppAnimations.settings),
+    _PolygonEntry('search', AppAnimations.search),
+    _PolygonEntry('clock', AppAnimations.clock),
+    _PolygonEntry('chat', AppAnimations.chat),
+    _PolygonEntry('contacts', AppAnimations.contacts),
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    final cs = Theme.of(context).colorScheme;
+    return Scaffold(
+      backgroundColor: cs.surface,
+      appBar: AppBar(
+        backgroundColor: cs.surface,
+        elevation: 0,
+        scrolledUnderElevation: 0,
+        leading: IconButton(
+          icon: const Icon(Symbols.chevron_left, size: 28),
+          onPressed: () => Navigator.pop(context),
+        ),
+        title: Text(
+          'Lottie полигон',
+          style: TextStyle(
+            fontFamily: 'Outfit',
+            fontSize: 20,
+            fontWeight: FontWeight.w600,
+            color: cs.onSurface,
+          ),
+        ),
+        centerTitle: true,
+      ),
+      body: SafeArea(
+        top: false,
+        child: GridView.count(
+          padding: const EdgeInsets.all(16),
+          crossAxisCount: 3,
+          mainAxisSpacing: 16,
+          crossAxisSpacing: 16,
+          children: [
+            for (final entry in _entries) _PolygonTile(entry: entry),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _PolygonEntry {
+  final String label;
+  final String asset;
+
+  const _PolygonEntry(this.label, this.asset);
+}
+
+class _PolygonTile extends StatefulWidget {
+  final _PolygonEntry entry;
+
+  const _PolygonTile({required this.entry});
+
+  @override
+  State<_PolygonTile> createState() => _PolygonTileState();
+}
+
+class _PolygonTileState extends State<_PolygonTile>
+    with SingleTickerProviderStateMixin {
+  late final AnimationController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 500),
+    );
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final cs = Theme.of(context).colorScheme;
+    return Material(
+      color: cs.surfaceContainerHigh,
+      borderRadius: BorderRadius.circular(20),
+      child: InkWell(
+        borderRadius: BorderRadius.circular(20),
+        onTap: () => _controller.forward(from: 0),
+        child: Padding(
+          padding: const EdgeInsets.all(12),
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              SizedBox.square(
+                dimension: 56,
+                child: Lottie.asset(
+                  widget.entry.asset,
+                  controller: _controller,
+                  fit: BoxFit.contain,
+                  delegates: LottieDelegates(
+                    values: [
+                      ValueDelegate.color(
+                        const ['**'],
+                        value: cs.onSurface,
+                      ),
+                      ValueDelegate.strokeColor(
+                        const ['**'],
+                        value: cs.onSurface,
+                      ),
+                    ],
+                  ),
+                  onLoaded: (composition) {
+                    _controller.duration = composition.duration;
+                  },
+                ),
+              ),
+              const SizedBox(height: 10),
+              Text(
+                widget.entry.label,
+                style: TextStyle(
+                  color: cs.onSurfaceVariant,
+                  fontSize: 13,
+                  fontWeight: FontWeight.w500,
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}