{"id":489776,"date":"2026-08-05T01:23:56","date_gmt":"2026-08-05T01:23:56","guid":{"rendered":"https:\/\/savepearlharbor.com\/?p=489776"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=489776","title":{"rendered":"\u0421\u043b\u043e\u0436\u043d\u044b\u0435 \u0441\u0430\u0439\u0442\u044b \u043d\u0430 \u0432\u0430\u0439\u0431\u043a\u043e\u0434\u0435: \u0447\u0435\u0442\u044b\u0440\u0435 \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u0430, \u0434\u0432\u0430 \u043f\u0443\u0442\u0438 \u043a \u00ab\u0434\u043e\u0440\u043e\u0433\u0438\u043c\u00bb \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c \u0438 3D-\u043b\u043e\u0433\u043e\u0442\u0438\u043f \u0438\u0437 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432"},"content":{"rendered":"<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a11\/31f\/bed\/a1131fbed5011ae694c6be5c3f8b4857.jpg\" alt=\"\u0421\u043e\u0431\u0440\u0430\u0442\u044c \u043b\u0435\u043d\u0434\u0438\u043d\u0433 \u0441 \u00ab\u0434\u043e\u0440\u043e\u0433\u0438\u043c\u0438\u00bb \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c\u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0432\u0435\u0447\u0435\u0440\u043e\u043c, \u0431\u0435\u0437 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/a11\/31f\/bed\/a1131fbed5011ae694c6be5c3f8b4857.jpg 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a11\/31f\/bed\/a1131fbed5011ae694c6be5c3f8b4857.jpg 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0421\u043e\u0431\u0440\u0430\u0442\u044c \u043b\u0435\u043d\u0434\u0438\u043d\u0433 \u0441 \u00ab\u0434\u043e\u0440\u043e\u0433\u0438\u043c\u0438\u00bb \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c\u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0432\u0435\u0447\u0435\u0440\u043e\u043c, \u0431\u0435\u0437 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/figcaption><\/div>\n<\/figure>\n<p><strong>TL;DR<\/strong><\/p>\n<p>\u0417\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0433\u043e\u0434 \u044f \u0441\u043e\u0431\u0440\u0430\u043b \u0432\u0430\u0439\u0431\u043a\u043e\u0434\u0438\u043d\u0433\u043e\u043c \u043d\u0435 \u043e\u0434\u0438\u043d \u0434\u0435\u0441\u044f\u0442\u043e\u043a \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u043e\u0432 \u2014 \u0434\u043b\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c \u041c\u0424\u0422\u0418, \u0434\u043b\u044f \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0438 \u043d\u0430 \u0437\u0430\u043a\u0430\u0437. \u0420\u0430\u0437\u0431\u0435\u0440\u0443 \u0447\u0435\u0442\u044b\u0440\u0435 \u0441\u0430\u043c\u044b\u0445 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445: \u0428\u043a\u043e\u043b\u0443 \u0422\u0435\u0445\u043f\u0440\u0435\u0434\u0430, \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u044e \u00ab\u0422\u043e\u0447\u043a\u0430 \u0441\u0431\u043e\u0440\u043a\u0438\u00bb, \u043a\u0443\u0440\u0441 \u00ab\u0418\u0418 \u041f\u0440\u043e\u0434\u0430\u043a\u0442-\u043c\u0435\u043d\u0435\u0434\u0436\u043c\u0435\u043d\u0442\u00bb (<a href=\"http:\/\/aimipt.ru\">aimipt.ru<\/a>) \u0438 \u043e\u0434\u0438\u043d \u0441\u0432\u043e\u0439, \u043b\u0438\u0447\u043d\u044b\u0439 \u2014 \u043d\u0430 \u043d\u0451\u043c \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0440\u0430\u0441\u043a\u0430\u0447\u0430\u043d\u044b \u0441\u0438\u043b\u044c\u043d\u0435\u0435 \u0432\u0441\u0435\u0433\u043e. \u0412\u0430\u0439\u0431\u043a\u043e\u0434\u0438\u043d\u0433 \u0437\u0434\u0435\u0441\u044c \u2014 \u044d\u0442\u043e \u043a\u043e\u0433\u0434\u0430 \u043a\u043e\u0434 \u043f\u0438\u0448\u0435\u0442 \u0430\u0433\u0435\u043d\u0442 \u043f\u043e\u0434 \u043c\u043e\u044e \u043f\u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443 \u0437\u0430\u0434\u0430\u0447\u0438, \u0430 \u044f \u0441\u0442\u0430\u0432\u043b\u044e \u0440\u0430\u043c\u043a\u0438, \u043f\u0440\u0430\u0432\u043b\u044e \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<\/p>\n<p>\u0423 \u0432\u0441\u0435\u0445 \u0447\u0435\u0442\u044b\u0440\u0451\u0445 \u0435\u0441\u0442\u044c \u0441\u043b\u043e\u0439 \u00ab\u0434\u043e\u0440\u043e\u0433\u0438\u0445\u00bb \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432: \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0432\u043e\u0434\u0430 \u043d\u0430 WebGL-\u0448\u0435\u0439\u0434\u0435\u0440\u0435 \u0441 \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u0438\u0435\u043c, 3D-\u043b\u043e\u0433\u043e\u0442\u0438\u043f \u0424\u0438\u0437\u0442\u0435\u0445\u0430 \u0438\u0437 \u0442\u044b\u0441\u044f\u0447 \u0447\u0430\u0441\u0442\u0438\u0446-\u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432, \u0436\u0438\u0432\u0430\u044f 3D-\u0431\u0430\u0448\u043d\u044f \u0438\u0437 \u043a\u0443\u0431\u043e\u0432, \u043e\u0431\u043b\u0430\u043a\u043e \u0447\u0430\u0441\u0442\u0438\u0446, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u043e\u0440\u0444\u0438\u0442 \u0444\u043e\u0440\u043c\u0443 \u043f\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u0443.<\/p>\n<p>\u041a \u044d\u0442\u043e\u043c\u0443 \u0441\u043b\u043e\u044e \u044f \u043f\u0440\u0438\u0448\u0451\u043b \u0434\u0432\u0443\u043c\u044f \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u043f\u0443\u0442\u044f\u043c\u0438. \u041d\u0430 \u00ab\u0422\u043e\u0447\u043a\u0435 \u0441\u0431\u043e\u0440\u043a\u0438\u00bb \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u0440\u0443\u043a\u0430\u043c\u0438 \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c WebGL \u2014 \u043d\u043e\u043b\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a. \u041d\u0430 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u0432\u043e\u0439 \u0434\u0432\u0438\u0436\u043e\u043a \u043d\u0430 Three.js: \u0432\u044b\u043d\u0435\u0441\u0435\u043d \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0444\u0430\u0439\u043b\u0430\u043c\u0438, \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0441\u0430\u0439\u0442\u0430\u043c\u0438 \u0438 \u043e\u0442\u043a\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 2D-canvas, \u0435\u0441\u043b\u0438 CDN \u043d\u0435 \u043e\u0442\u0432\u0435\u0442\u0438\u0442. \u041d\u0430 \u043b\u0438\u0447\u043d\u043e\u043c \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u0435 \u044f \u0440\u0430\u0441\u043a\u0430\u0447\u0430\u043b \u044d\u0442\u043e\u0442 \u0434\u0432\u0438\u0436\u043e\u043a \u0441\u0438\u043b\u044c\u043d\u0435\u0435 \u0432\u0441\u0435\u0433\u043e.<\/p>\n<p>\u041c\u0435\u0436\u0434\u0443 \u00ab\u043d\u0430\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u044e\u00bb \u0438 \u043a\u043e\u0434\u043e\u043c \u0441\u0442\u043e\u0438\u0442 \u0446\u0435\u043f\u043e\u0447\u043a\u0430 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432: \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 <a href=\"http:\/\/DESIGN.md\">DESIGN.md<\/a>, \u0438\u0437 \u043d\u0435\u0451 \u043c\u043e\u043a\u0430\u043f \u0432 Claude Design, \u0438\u0437 \u043c\u043e\u043a\u0430\u043f\u0430 handoff-\u0431\u0430\u043d\u0434\u043b \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0442\u043e\u043c \u043f\u0435\u0440\u0435\u043d\u043e\u0441 \u0432 \u043a\u043e\u0434. \u041d\u0438\u0436\u0435 \u2014 \u043e\u0431\u0430 \u043f\u0443\u0442\u0438 \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043a\u043e\u0434\u0435, \u044d\u0442\u0430 \u0446\u0435\u043f\u043e\u0447\u043a\u0430 \u0438 \u0433\u0440\u0430\u0431\u043b\u0438, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u043d\u0430\u0441\u0442\u0443\u043f\u0438\u043b.<\/p>\n<p>\u0421\u0440\u0430\u0437\u0443 \u043f\u0440\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c\u043e\u0441\u0442\u044c. \u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 \u044d\u0442\u0438\u0445 \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u043e\u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u0438 \u0437\u0430\u043a\u0440\u044b\u0442\u044b\u0435: \u0438\u043c\u0435\u043d\u0430 \u0444\u0430\u0439\u043b\u043e\u0432, \u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0438 \u0441\u0447\u0451\u0442\u0447\u0438\u043a\u0438 \u043d\u0438\u0436\u0435 \u2014 \u0438\u0437 \u043c\u043e\u0435\u0439 \u0440\u0430\u0431\u043e\u0447\u0435\u0439 \u043a\u043e\u043f\u0438\u0438, \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 \u0432\u044b \u0435\u0451 \u043d\u0435 \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0435. \u0421\u043d\u0430\u0440\u0443\u0436\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0436\u0438\u0432\u044b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u0447\u0443\u0436\u043e\u0439 \u0440\u0435\u0444\u0435\u0440\u0435\u043d\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u044e; \u043a\u043e\u0434 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u2014 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u0438\u0437 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432.<\/p>\n<p>\u041f\u0430\u0440\u0430 \u0441\u043b\u043e\u0432 \u043e \u0441\u0435\u0431\u0435: \u044f \u0416\u0435\u043c\u0430\u043b \u0425\u0430\u043c\u0438\u0434\u0443\u043d, CPO <a href=\"https:\/\/alpinagpt.ru\/?utm_source=habr&amp;utm_medium=article&amp;utm_campaign=vibecode_sites\">AlpinaGPT<\/a> \u0438 Head of AI \u0432 <a href=\"https:\/\/alpinadigital.ru\/?utm_source=habr&amp;utm_medium=article&amp;utm_campaign=vibecode_sites\">Alpina Digital<\/a>. \u0424\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u2014 \u043d\u0435 \u043c\u043e\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430, \u0442\u0430\u043a \u0447\u0442\u043e \u0434\u0430\u043b\u044c\u0448\u0435 \u2014 \u0432\u0437\u0433\u043b\u044f\u0434 \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0442\u0430\u043a\u043e\u0435 \u0430\u0433\u0435\u043d\u0442\u043e\u043c \u0438 \u043f\u0438\u0448\u0435\u0442 \u043f\u0440\u043e \u044d\u0442\u043e \u0432 <a href=\"https:\/\/t.me\/jemal_hamidun\">\u00ab\u0413\u043e\u0442\u043e\u0432\u0438\u043c \u0418\u0418\u0448\u043d\u0438\u0446\u0443\u00bb<\/a>.<\/p>\n<p><strong>\u0427\u0435\u0442\u044b\u0440\u0435 \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u0430, \u0434\u0432\u0435 \u0432\u0435\u0442\u043a\u0438<\/strong><\/p>\n<p>\u0422\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438 \u044d\u0442\u0438 \u0447\u0435\u0442\u044b\u0440\u0435 \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u0430 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043b\u0438\u0441\u044c \u043d\u0430 \u0434\u0432\u0435 \u0432\u0435\u0442\u043a\u0438. \u041f\u0435\u0440\u0432\u043e\u0439 \u0431\u044b\u043b\u0430 \u0428\u043a\u043e\u043b\u0430 \u0422\u0435\u0445\u043f\u0440\u0435\u0434\u0430: \u0438\u043c\u0435\u043d\u043d\u043e \u043d\u0430 \u043d\u0435\u0439 \u0434\u0432\u0438\u0436\u043e\u043a 3D-\u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u043d\u0430 Three.js \u0432\u043f\u0435\u0440\u0432\u044b\u0435 \u043f\u0435\u0440\u0435\u0435\u0445\u0430\u043b \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0438 \u0441\u0442\u0430\u043b \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u043c. \u0418\u0437 \u0442\u043e\u0433\u043e \u0436\u0435 \u043d\u0430\u0431\u043e\u0440\u0430 \u0432\u044b\u0440\u043e\u0441 \u043b\u0435\u043d\u0434\u0438\u043d\u0433 \u043a\u0443\u0440\u0441\u0430 \u00ab\u0418\u0418 \u041f\u0440\u043e\u0434\u0430\u043a\u0442-\u043c\u0435\u043d\u0435\u0434\u0436\u043c\u0435\u043d\u0442\u00bb (<a href=\"http:\/\/aimipt.ru\">aimipt.ru<\/a>) \u2014 \u043e\u043d \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0442\u0435 \u0436\u0435 \u0434\u0432\u0438\u0436\u043a\u0438 \u0441\u043e \u0428\u043a\u043e\u043b\u044b.<\/p>\n<p>\u0410 \u043b\u0435\u043d\u0434\u0438\u043d\u0433 \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u0438 \u00ab\u0422\u043e\u0447\u043a\u0430 \u0441\u0431\u043e\u0440\u043a\u0438\u00bb (<a href=\"https:\/\/techpred.online\/upcycle\">techpred.online\/upcycle<\/a>) \u043f\u043e\u0448\u0451\u043b \u0434\u0440\u0443\u0433\u0438\u043c \u043f\u0443\u0442\u0451\u043c: \u0432\u0435\u0441\u044c \u0432\u0438\u0437\u0443\u0430\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u043d\u0430 \u0433\u043e\u043b\u043e\u043c WebGL \u0438 CSS, \u0431\u0435\u0437 \u0435\u0434\u0438\u043d\u043e\u0439 \u0432\u043d\u0435\u0448\u043d\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.<\/p>\n<p>\u0418 \u0447\u0435\u0442\u0432\u0451\u0440\u0442\u044b\u0439 \u2014 \u043e\u0434\u0438\u043d \u0438\u0437 \u043c\u043e\u0438\u0445 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u043e\u0432. \u0422\u043e\u0442 \u0436\u0435 Three.js-\u0434\u0432\u0438\u0436\u043e\u043a \u043d\u0430 \u043d\u0451\u043c \u0440\u0430\u0441\u043a\u0430\u0447\u0430\u043d \u0441\u0438\u043b\u044c\u043d\u0435\u0435 \u0432\u0441\u0435\u0433\u043e: \u043e\u0431\u043b\u0430\u043a\u043e \u0447\u0430\u0441\u0442\u0438\u0446 \u043c\u043e\u0440\u0444\u0438\u0442 \u0444\u043e\u0440\u043c\u0443 \u043f\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u0443, \u0440\u044f\u0434\u043e\u043c 3D-\u043a\u043e\u043c\u043f\u0430\u0441, \u0441\u043f\u043e\u0442\u043b\u0430\u0439\u0442-\u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0430 \u043f\u043e\u0434 \u043a\u0443\u0440\u0441\u043e\u0440\u043e\u043c \u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438, \u043d\u0430\u0431\u0440\u0430\u043d\u043d\u044b\u0435 \u0442\u0435\u043c\u0438 \u0436\u0435 \u0447\u0430\u0441\u0442\u0438\u0446\u0430\u043c\u0438. \u0422\u0440\u0438 \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u0430 \u041c\u0424\u0422\u0418 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442, \u00ab\u043a\u0430\u043a \u044d\u0442\u043e \u0443\u0441\u0442\u0440\u043e\u0435\u043d\u043e\u00bb. \u0427\u0435\u0442\u0432\u0451\u0440\u0442\u044b\u0439 \u2014 \u00ab\u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u0430\u043b\u0435\u043a\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0435\u0441\u0442\u0438 \u043e\u0434\u0438\u043d \u0434\u0432\u0438\u0436\u043e\u043a\u00bb.<\/p>\n<p><strong>\u0426\u0435\u043f\u043e\u0447\u043a\u0430 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432: \u043e\u0442 \u043d\u0430\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0434\u043e \u043f\u0440\u043e\u0434\u0430<\/strong><\/p>\n<p>\u0426\u0435\u043f\u043e\u0447\u043a\u0430 \u043e\u0434\u043d\u0430: \u0432\u043a\u0443\u0441 \u2192 \u043c\u043e\u043a\u0430\u043f \u2192 handoff-\u0431\u0430\u043d\u0434\u043b \u2192 \u043a\u043e\u0434. \u041a\u0430\u0436\u0434\u043e\u0435 \u0437\u0432\u0435\u043d\u043e \u2014 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442.<\/p>\n<p><strong>\u0412\u043a\u0443\u0441 \u0432 \u043c\u0430\u0448\u0438\u043d\u043e\u0447\u0438\u0442\u0430\u0435\u043c\u043e\u043c \u0432\u0438\u0434\u0435 \u2014 <\/strong><a href=\"http:\/\/DESIGN.md\"><code><strong>DESIGN.md<\/strong><\/code><\/a><\/p>\n<p>\u042f \u0434\u0435\u0440\u0436\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c, \u0433\u0434\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u0431\u0440\u0435\u043d\u0434 (Stripe, Linear, Apple, Cursor \u0438 \u0434\u0435\u0441\u044f\u0442\u043a\u0438 \u0434\u0440\u0443\u0433\u0438\u0445, \u043f\u043b\u044e\u0441 \u043c\u043e\u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435) \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043d \u0432 \u043e\u0434\u0438\u043d \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b <a href=\"http:\/\/DESIGN.md\">DESIGN.md<\/a>. \u0414\u043b\u044f \u0430\u0433\u0435\u043d\u0442\u0430 \u044d\u0442\u043e \u0441\u044b\u0440\u044c\u0451, \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043e\u043d \u0431\u0435\u0440\u0451\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0422\u0443\u0434\u0430 \u0432\u0445\u043e\u0434\u044f\u0442:<\/p>\n<ul>\n<li>\n<p><strong>\u0422\u043e\u043a\u0435\u043d\u044b \u0441 \u0440\u043e\u043b\u044f\u043c\u0438.<\/strong> \u0422\u043e\u043a\u0435\u043d \u2014 \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u0438\u0437\u0430\u0439\u043d\u0430: \u0446\u0432\u0435\u0442, \u043e\u0442\u0441\u0442\u0443\u043f, \u0440\u0430\u0434\u0438\u0443\u0441. \u0420\u044f\u0434\u043e\u043c \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043b\u0435\u0436\u0438\u0442 \u0440\u043e\u043b\u044c: <code>#533afd<\/code> \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043d \u043a\u0430\u043a \u00abDeep Violet \u2014 primary calls to action, active states\u00bb.<\/p>\n<\/li>\n<li>\n<p><strong>Type scale<\/strong> \u2014 \u0448\u043a\u0430\u043b\u0430 \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0438: \u0440\u0430\u0437\u043c\u0435\u0440\u044b, line-height, letter-spacing \u043f\u043b\u044e\u0441 OpenType-\u0444\u0438\u0447\u0438, \u0442\u043e \u0435\u0441\u0442\u044c \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u0447\u0435\u0440\u0442\u0430\u043d\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0448\u0440\u0438\u0444\u0442\u0430 (<code>\"ss01\"<\/code> \u2014 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0433\u043b\u0438\u0444\u043e\u0432, <code>\"tnum\"<\/code> \u2014 \u043c\u043e\u043d\u043e\u0448\u0438\u0440\u0438\u043d\u043d\u044b\u0435 \u0446\u0438\u0444\u0440\u044b).<\/p>\n<\/li>\n<li>\n<p><strong>Spacing\/radius\/shadows<\/strong> \u2014 base unit 4px, \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0440\u0430\u0434\u0438\u0443\u0441\u044b, \u043c\u044f\u0433\u043a\u0438\u0435 \u0442\u0435\u043d\u0438.<\/p>\n<\/li>\n<li>\n<p><strong>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/strong> \u2014 Primary\/Ghost\/Outlined Button, Default\/Feature Card \u0441 \u0442\u043e\u0447\u043d\u044b\u043c\u0438 padding \u0438 \u0444\u043e\u043d\u0430\u043c\u0438.<\/p>\n<\/li>\n<li>\n<p><strong>Do&#8217;s \u0438 Don&#8217;ts<\/strong> \u2014 \u00ab\u043d\u0435 \u0432\u0432\u043e\u0434\u0438 \u043d\u043e\u0432\u044b\u0435 \u0441\u0435\u043c\u0435\u0439\u0441\u0442\u0432\u0430 \u0448\u0440\u0438\u0444\u0442\u043e\u0432\u00bb, \u00ab\u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439 \u0436\u0451\u0441\u0442\u043a\u0438\u0435 \u0442\u0435\u043d\u0438\u00bb.<\/p>\n<\/li>\n<li>\n<p><strong>Agent Prompt Guide<\/strong> \u2014 \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043f\u0440\u043e\u043c\u043f\u0442\u043e\u0432 \u043f\u043e\u0434 \u044d\u0442\u043e\u0442 \u0441\u0442\u0438\u043b\u044c.<\/p>\n<\/li>\n<li>\n<p><strong>Quick Start<\/strong> \u2014 \u0442\u0435 \u0436\u0435 \u0442\u043e\u043a\u0435\u043d\u044b \u0441\u0440\u0430\u0437\u0443 \u043a\u0430\u043a CSS Custom Properties \u0438 <code>@theme<\/code> \u0434\u043b\u044f Tailwind v4.<\/p>\n<\/li>\n<\/ul>\n<p>\u041e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u043f\u0430\u043b\u0438\u0442\u0440\u044b \u2014 \u0432 \u0440\u043e\u043b\u044f\u0445. \u0428\u0440\u0438\u0444\u0442 \u043e\u043f\u0438\u0441\u0430\u043d \u0442\u0430\u043a: \u00absohne-var, \u0432\u0435\u0441 300 \u0434\u043b\u044f \u043a\u0440\u0443\u043f\u043d\u044b\u0445 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 \u0440\u0430\u0434\u0438 \u0441\u0434\u0435\u0440\u0436\u0430\u043d\u043d\u043e\u0439 \u0430\u0432\u0442\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u043e\u0441\u0442\u0438, 400 \u0434\u043b\u044f \u0442\u0435\u043b\u0430\u00bb. \u0410\u0433\u0435\u043d\u0442 \u0438\u0437 \u0442\u0430\u043a\u043e\u0433\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043d\u043e \u0438 \u0433\u0434\u0435 \u0435\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c. \u0410\u043a\u0446\u0435\u043d\u0442\u043d\u044b\u0439 \u0446\u0432\u0435\u0442 \u0443 \u043d\u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u0451\u0442 \u0443\u0435\u0437\u0436\u0430\u0442\u044c \u0432 \u0444\u043e\u043d, \u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u0447\u043d\u044b\u0439 \u0448\u0440\u0438\u0444\u0442 \u2014 \u0432 \u043f\u043e\u0434\u043f\u0438\u0441\u0438.<\/p>\n<p>\u041f\u043e\u0445\u043e\u0436\u0438\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u043e\u0442\u0434\u0430\u0451\u0442 <a href=\"https:\/\/styles.refero.design\/design-md\/ai-readable-design-systems\">Refero Styles<\/a> \u2014 \u0433\u0430\u043b\u0435\u0440\u0435\u044f \u0441\u0442\u0438\u043b\u0435\u0439 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0438\u0437 \u0431\u0440\u0435\u043d\u0434\u0430 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 <a href=\"http:\/\/DESIGN.md\">DESIGN.md<\/a>. \u0421\u043c\u044b\u0441\u043b \u043e\u0434\u0438\u043d: \u0432\u043c\u0435\u0441\u0442\u043e \u00ab\u0441\u0434\u0435\u043b\u0430\u0439 \u043a\u0440\u0430\u0441\u0438\u0432\u043e, \u0441\u0438\u043d\u0435\u043d\u044c\u043a\u043e\u00bb \u044f \u043a\u043b\u0430\u0434\u0443 \u0430\u0433\u0435\u043d\u0442\u0443 \u043f\u043e\u043b\u043d\u044b\u0439 \u0431\u043b\u044e\u043f\u0440\u0438\u043d\u0442 \u0438 \u0433\u043e\u0432\u043e\u0440\u044e, \u0447\u0442\u043e \u0432 \u043d\u0451\u043c \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c. \u0414\u043b\u044f \u00ab\u0422\u043e\u0447\u043a\u0438 \u0441\u0431\u043e\u0440\u043a\u0438\u00bb \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u0441\u0442\u0438\u043b\u0435\u043c \u0431\u044b\u043b Stripe.<\/p>\n<p><strong>Claude Design \u2014 \u043c\u043e\u043a\u0430\u043f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0440\u043a\u0435\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u0441\u0430\u043c Claude Code<\/strong><\/p>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u2014 \u043c\u043e\u043a\u0430\u043f. \u042f \u0434\u0435\u043b\u0430\u044e \u0435\u0433\u043e \u0432 Claude Design (<a href=\"https:\/\/claude.ai\/design\">claude.ai\/design<\/a>) \u2014 \u044d\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 Anthropic, \u0433\u0434\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u0434\u0438\u0430\u043b\u043e\u0433\u043e\u043c \u0441 \u043c\u043e\u0434\u0435\u043b\u044c\u044e: \u00ab\u0441\u0434\u0435\u043b\u0430\u0439 \u0442\u0451\u043c\u043d\u0435\u0435\u00bb, \u00ab\u043a\u0430\u043a \u0432 Linear\u00bb, \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0442\u044c \u0440\u0435\u0444\u0435\u0440\u0435\u043d\u0441\u043d\u044b\u0435 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u044b. \u041d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u2014 \u043a\u043d\u043e\u043f\u043a\u0430 Handoff, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0442\u0434\u0430\u0451\u0442 zip-\u0430\u0440\u0445\u0438\u0432 \u0441 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u043c\u0438 \u043c\u0430\u043a\u0435\u0442\u0430 (\u0434\u0430\u043b\u044c\u0448\u0435 \u2014 \u0431\u0430\u043d\u0434\u043b).<\/p>\n<p>\u041f\u043e Claude Design \u044f \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0435 \u043a\u043b\u0438\u043a\u0430\u044e \u0440\u0443\u043a\u0430\u043c\u0438. \u042f \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u044e Claude Code \u043e\u0440\u043a\u0435\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c Claude Design \u0447\u0435\u0440\u0435\u0437 Playwright-\u043f\u043b\u0430\u0433\u0438\u043d: \u0430\u0433\u0435\u043d\u0442 \u0441\u0430\u043c \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u043f\u0440\u043e\u0435\u043a\u0442, \u0432\u0431\u0438\u0432\u0430\u0435\u0442 \u0434\u043b\u0438\u043d\u043d\u044b\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u043c\u043f\u0442 \u0446\u0435\u043b\u0438\u043a\u043e\u043c, \u0436\u0434\u0451\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 canvas, \u0438\u0442\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0440\u0435\u043f\u043b\u0438\u043a\u0430\u043c\u0438 \u0432 \u0447\u0430\u0442 \u0438 \u0432 \u043a\u043e\u043d\u0446\u0435 \u0436\u043c\u0451\u0442 Handoff, \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u044f \u0431\u0430\u043d\u0434\u043b. \u0427\u0442\u043e\u0431\u044b \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e, \u044f \u0440\u0435\u0432\u0435\u0440\u0441-\u0438\u043d\u0436\u0438\u043d\u0438\u0440\u0438\u043b \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 Claude Design \u2014 \u043a\u0430\u043a\u0438\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0436\u0434\u0430\u0442\u044c, \u043a\u0430\u043a \u0443\u0441\u0442\u0440\u043e\u0435\u043d \u0431\u0430\u043d\u0434\u043b, \u0433\u0434\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u043f\u043e\u0442\u044b\u043a\u0430\u0435\u0442\u0441\u044f \u2014 \u0438 \u0441\u043e\u0431\u0440\u0430\u043b \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u043a\u0438\u043b\u043b.<\/p>\n<p>\u0413\u043b\u0430\u0432\u043d\u044b\u0439 \u043a\u0430\u043c\u0435\u043d\u044c \u2014 Cloudflare Turnstile. \u041b\u043e\u0433\u0438\u043d \u0432 Claude Design \u043f\u0440\u0438\u043a\u0440\u044b\u0442 \u043a\u0430\u043f\u0447\u0435\u0439, \u0438 \u043e\u043d\u0430 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0434\u0435\u0442\u0435\u043a\u0442\u0438\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044e. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u0441\u043a\u0438\u043b\u043b\u0435 \u0437\u0430\u0448\u0438\u0442 \u0447\u0435\u0441\u0442\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438: \u0430\u0433\u0435\u043d\u0442 \u0434\u043e\u0445\u043e\u0434\u0438\u0442 \u0434\u043e \u043a\u0430\u043f\u0447\u0438, \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u00ab\u043a\u043b\u0438\u043a\u043d\u0438 \u0447\u0435\u043a\u0431\u043e\u043a\u0441 \u0440\u0443\u043a\u0430\u043c\u0438\u00bb, \u044f \u043a\u043b\u0438\u043a\u0430\u044e \u2014 \u0438 \u0434\u0430\u043b\u044c\u0448\u0435 \u043e\u043d \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u0442 \u0441\u0430\u043c. \u041e\u0431\u0445\u043e\u0434\u0438\u0442\u044c \u043a\u0430\u043f\u0447\u0443 \u044f \u043d\u0435 \u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b: \u043e\u043d\u0430 \u0442\u0443\u0442 \u0441\u0442\u043e\u0438\u0442 \u043f\u043e \u0434\u0435\u043b\u0443.<\/p>\n<p><strong>Handoff-\u0431\u0430\u043d\u0434\u043b \u2014 \u0447\u0442\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442<\/strong><\/p>\n<p>\u0411\u0430\u043d\u0434\u043b \u0438\u0437 Claude Design \u0440\u0430\u0441\u043f\u0430\u043a\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443, \u0438 \u043f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u0432 \u043d\u0451\u043c \u043b\u0435\u0436\u0438\u0442, \u2014 <a href=\"http:\/\/README.md\">README.md<\/a> \u0441 \u043f\u0440\u044f\u043c\u044b\u043c \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435\u043c \u043a coding-\u0430\u0433\u0435\u043d\u0442\u0443. \u0414\u043e\u0441\u043b\u043e\u0432\u043d\u043e \u043e\u0442\u0442\u0443\u0434\u0430:<\/p>\n<blockquote>\n<p>CODING AGENTS: READ THIS FIRST. This is a handoff bundle from Claude Design. Recreate the designs pixel-perfectly in whatever technology fits the codebase. Don&#8217;t render these files in a browser or take screenshots \u2014 everything you need is in the source.<\/p>\n<\/blockquote>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u2014 <code>project\/&lt;Name&gt;.html<\/code> (\u0441\u0430\u043c \u043c\u043e\u043a\u0430\u043f, \u0447\u0438\u0442\u0430\u0442\u044c \u0446\u0435\u043b\u0438\u043a\u043e\u043c), <code>styles.css<\/code> \u0441 \u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438, \u0438 <code>uploads\/<\/code> \u0441 \u043c\u043e\u0438\u043c\u0438 \u0440\u0435\u0444\u0435\u0440\u0435\u043d\u0441\u0430\u043c\u0438 \u0438 \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c <a href=\"http:\/\/DESIGN.md\">DESIGN.md<\/a> + <code>tokens.json<\/code>. \u0411\u0430\u043d\u0434\u043b\u044b \u044f \u0434\u0435\u0440\u0436\u0443 \u0432 git \u0440\u044f\u0434\u043e\u043c \u0441 \u043a\u043e\u0434\u043e\u043c: \u044d\u0442\u043e source-of-truth \u0434\u0438\u0437\u0430\u0439\u043d\u0430.<\/p>\n<p>\u0418 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043b\u0435\u0433\u043a\u043e \u043d\u0430\u0440\u0443\u0448\u0438\u0442\u044c: \u0431\u0430\u043d\u0434\u043b \u2014 \u044d\u0442\u043e \u0440\u0435\u0444\u0435\u0440\u0435\u043d\u0441, \u0430 \u043d\u0435 production-\u043a\u043e\u0434. HTML \u0438\u0437 Claude Design \u044f \u043d\u0435 \u043a\u043e\u043f\u0438\u0440\u0443\u044e \u0434\u043e\u0441\u043b\u043e\u0432\u043d\u043e \u2014 \u0447\u0438\u0442\u0430\u044e \u0446\u0435\u043b\u0438\u043a\u043e\u043c (\u043d\u0435 skim, \u043d\u0435 \u043f\u0435\u0440\u0432\u044b\u0435 \u0441\u0442\u043e \u0441\u0442\u0440\u043e\u043a), \u0432\u044b\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u044e \u0442\u043e\u043a\u0435\u043d\u044b \u0438 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b \u0438 \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0438\u0440\u0430\u044e \u0432\u0438\u0437\u0443\u0430\u043b \u0443\u0436\u0435 \u0432 \u0436\u0438\u0432\u043e\u043c \u043a\u043e\u0434\u0435, \u043d\u0430\u0432\u0435\u0448\u0438\u0432\u0430\u044f \u0442\u0443 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c, \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432 \u043c\u043e\u043a\u0430\u043f\u0435 \u043d\u0435\u0442. \u041c\u043e\u043a\u0430\u043f \u0437\u0430\u0434\u0430\u0451\u0442 \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044e \u0438 \u043f\u0430\u043b\u0438\u0442\u0440\u0443. \u042d\u0444\u0444\u0435\u043a\u0442\u044b \u2014 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u043b\u043e\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e \u0440\u0443\u043a\u0430\u043c\u0438 \u043f\u043e\u0432\u0435\u0440\u0445.<\/p>\n<p><strong>\u0420\u0430\u0437\u0431\u043e\u0440 \u0436\u0438\u0432\u043e\u0433\u043e \u0440\u0435\u0444\u0435\u0440\u0435\u043d\u0441\u0430 \u2014 \u0438 \u0443\u0440\u043e\u043a \u043f\u0440\u043e \u00ab3D, \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0435\u0442\u00bb<\/strong><\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u0435\u043d \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 \u0441 \u0447\u0443\u0436\u043e\u0433\u043e \u0441\u0430\u0439\u0442\u0430, \u044f \u0435\u0433\u043e \u043f\u0440\u0435\u043f\u0430\u0440\u0438\u0440\u0443\u044e: \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e \u0436\u0438\u0432\u043e\u0439 \u0440\u0435\u0444\u0435\u0440\u0435\u043d\u0441 \u0447\u0435\u0440\u0435\u0437 Playwright, \u0441\u043d\u0438\u043c\u0430\u044e DOM \u0438 computed styles, \u0441\u043c\u043e\u0442\u0440\u044e, \u0438\u0437 \u0447\u0435\u0433\u043e \u043e\u043d \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u0441\u043e\u0431\u0440\u0430\u043d.<\/p>\n<p>\u0425\u0440\u0435\u0441\u0442\u043e\u043c\u0430\u0442\u0438\u0439\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u2014 <a href=\"http:\/\/dayos.com\">dayos.com<\/a>. \u0421\u0430\u0439\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a, \u0431\u0443\u0434\u0442\u043e \u0442\u0430\u043c \u0442\u044f\u0436\u0451\u043b\u044b\u0439 3D \u043d\u0430 Three.js: \u043e\u0431\u044a\u0451\u043c\u043d\u044b\u0435 \u0431\u043b\u043e\u043a\u0438 \u043a\u0440\u0443\u0442\u044f\u0442\u0441\u044f \u0438 \u043f\u0435\u0440\u0435\u043b\u0438\u0432\u0430\u044e\u0442\u0441\u044f. \u042f \u0441\u043d\u044f\u043b \u0435\u0433\u043e \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u0440\u0430\u0437\u0431\u043e\u0440\u0430, \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043b DOM \u2014 \u0438 \u0443\u0432\u0438\u0434\u0435\u043b: <code>canvases=0<\/code>, \u043d\u0438 three, \u043d\u0438 spline. \u00ab3D-\u0431\u043b\u043e\u043a\u0438\u00bb \u043e\u043a\u0430\u0437\u0430\u043b\u0438\u0441\u044c \u043f\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d\u043d\u044b\u043c \u0437\u0430\u0446\u0438\u043a\u043b\u0435\u043d\u043d\u044b\u043c webm-\u0432\u0438\u0434\u0435\u043e. \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0435\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u043e\u043a\u0443 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438: <code>document.querySelectorAll('canvas').length<\/code>.<\/p>\n<p>\u0412\u044b\u0432\u043e\u0434 \u0434\u0432\u043e\u0439\u043d\u043e\u0439. \u0421 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u043d\u0435 \u0432\u0441\u0451, \u0447\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 3D, \u043d\u0430\u0434\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434\u043e\u043c: \u0438\u043d\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u043e\u043b\u0438\u043a, \u0438 \u0434\u0432\u0430 \u0434\u043d\u044f \u043d\u0430 \u0448\u0435\u0439\u0434\u0435\u0440\u044b \u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u0442\u0440\u0430\u0442\u0438\u0442\u044c. \u0421 \u0434\u0440\u0443\u0433\u043e\u0439 \u2014 \u043a\u043e\u0433\u0434\u0430 \u043c\u043d\u0435 \u0441\u0430\u043c\u043e\u043c\u0443 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u0438\u0441\u044c \u0436\u0438\u0432\u044b\u0435 3D-\u0431\u043b\u043e\u043a\u0438 \u043d\u0430 \u0428\u043a\u043e\u043b\u0435, \u044f \u0441\u043e\u0437\u043d\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u043b \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0439 Three.js, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0431\u043b\u043e\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u043b\u0438 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n<p><strong>\u0413\u043b\u0443\u0431\u043e\u043a\u043e\u0435 \u043f\u0440\u0435\u043f\u0430\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435: \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c \u0447\u0443\u0436\u043e\u0439 \u0434\u0432\u0438\u0436\u043e\u043a \u043d\u0430 27 \u0448\u0435\u0439\u0434\u0435\u0440\u043e\u0432<\/strong><\/p>\n<p>\u0421\u043d\u044f\u0442\u044c DOM \u2014 \u044d\u0442\u043e \u043b\u0451\u0433\u043a\u0438\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c. \u0422\u044f\u0436\u0451\u043b\u044b\u0439 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u0440\u0435\u0444\u0435\u0440\u0435\u043d\u0441 \u2014 \u0442\u043e\u043f\u043e\u0432\u044b\u0439 WebGL-\u0441\u0430\u0439\u0442 \u0438 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u043f\u043e\u043d\u044f\u0442\u044c \u043d\u0435 \u00ab\u0447\u0442\u043e\u00bb, \u0430 \u00ab\u043a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e\u00bb. \u0421\u0430\u043c\u044b\u0439 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043c\u043e\u0439 \u0440\u0430\u0437\u0431\u043e\u0440 \u2014 <a href=\"http:\/\/dala.craftedbygc.com\">dala.craftedbygc.com<\/a>: \u0441\u0430\u0439\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0442\u0443\u0434\u0438\u044f Unseen \u0441\u0434\u0435\u043b\u0430\u043b\u0430 \u0434\u043b\u044f AI-\u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0438\u043a\u0430 Dala (<a href=\"https:\/\/unseen.co\/projects\/dala\/\">\u0440\u0430\u0437\u0431\u043e\u0440 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0443 \u0441\u0430\u043c\u043e\u0439 \u0441\u0442\u0443\u0434\u0438\u0438<\/a>). \u0427\u0451\u0440\u043d\u044b\u0439 \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u0438\u043a \u0441 3D-\u00ab\u043c\u043e\u0437\u0433\u043e\u043c\u00bb \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0434\u0435\u0441\u044f\u0442\u0438 \u0442\u044b\u0441\u044f\u0447 \u0446\u0432\u0435\u0442\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0438\u0446-\u043f\u0438\u0440\u0430\u043c\u0438\u0434\u043e\u043a. \u041f\u0440\u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u0435 \u043e\u043d \u0440\u0430\u0437\u043b\u0435\u0442\u0430\u0435\u0442\u0441\u044f, \u043c\u043e\u0440\u0444\u0438\u0442 \u043c\u0435\u0436\u0434\u0443 \u0444\u043e\u0440\u043c\u0430\u043c\u0438 \u0438 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e; \u0441\u0432\u0435\u0440\u0445\u0443 \u043f\u043e\u0441\u0442\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430, smooth-scroll \u0438 \u0442\u0435\u043a\u0441\u0442, \u0432\u044b\u0435\u0437\u0436\u0430\u044e\u0449\u0438\u0439 \u00ab\u0438\u0437-\u043f\u043e\u0434 \u043f\u043e\u043b\u0430\u00bb.<\/p>\n<p>\u0422\u0443\u0442 \u043e\u0434\u043d\u0438\u043c \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u043e\u043c \u043d\u0435 \u043e\u0431\u043e\u0439\u0434\u0451\u0448\u044c\u0441\u044f. \u042f \u0441\u043a\u0430\u0447\u0430\u043b \u0431\u0430\u043d\u0434\u043b \u0446\u0435\u043b\u0438\u043a\u043e\u043c, \u043f\u0440\u043e\u0433\u043d\u0430\u043b \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 <code>theme.js<\/code> \u0447\u0435\u0440\u0435\u0437 beautifier (266 \u041a\u0411 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u043b\u0438\u0441\u044c \u0432 9168 \u0447\u0438\u0442\u0430\u0435\u043c\u044b\u0445 \u0441\u0442\u0440\u043e\u043a) \u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u0441\u043a\u0440\u0438\u043f\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0434\u0440\u0430\u043b \u0438\u0437 \u043d\u0435\u0433\u043e \u0432\u0441\u0435 \u0448\u0435\u0439\u0434\u0435\u0440\u044b. \u041f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c 27 \u0444\u0430\u0439\u043b\u043e\u0432 <code>.glsl<\/code>.<\/p>\n<p>\u0412\u043d\u0443\u0442\u0440\u0438 \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u0434\u0432\u0438\u0436\u043e\u043a \u0431\u0435\u0437 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430, \u043d\u0430 Three.js. GPGPU \u043d\u0430 ping-pong FBO \u2014 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0438 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0447\u0430\u0441\u0442\u0438\u0446 \u0436\u0438\u0432\u0443\u0442 \u0432 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0430\u0445 \u0438 \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0430 GPU, \u0434\u0432\u0435 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0440\u043e\u043b\u044f\u043c\u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u0430\u0434\u0440. \u0427\u0430\u0441\u0442\u0438\u0446\u044b \u2014 InstancedMesh, \u0442\u043e \u0435\u0441\u0442\u044c \u0442\u044b\u0441\u044f\u0447\u0438 \u043a\u043e\u043f\u0438\u0439 \u043e\u0434\u043d\u043e\u0439 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0438 \u0437\u0430 \u043e\u0434\u0438\u043d \u0432\u044b\u0437\u043e\u0432 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438, \u0438\u0437 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0445 <code>.glb<\/code>-\u043f\u0438\u0440\u0430\u043c\u0438\u0434\u043e\u043a.<\/p>\n<p>\u041f\u043e\u0441\u0442\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0434\u0451\u0442 \u0447\u0435\u0440\u0435\u0437 EffectComposer, \u0446\u0435\u043f\u043e\u0447\u043a\u0443 \u044d\u043a\u0440\u0430\u043d\u043d\u044b\u0445 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432: \u0441\u0432\u0435\u0447\u0435\u043d\u0438\u0435 (UnrealBloom), \u0440\u0430\u0437\u043c\u044b\u0442\u0438\u0435 \u043f\u043e \u0433\u043b\u0443\u0431\u0438\u043d\u0435 (Bokeh DoF), \u0432\u0438\u043d\u044c\u0435\u0442\u043a\u0430 \u0438 \u0437\u0435\u0440\u043d\u043e. \u0412\u0441\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043e\u0440\u043a\u0435\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u0438\u043c \u0442\u0438\u043a\u0435\u0440\u043e\u043c GSAP \u043f\u043e\u0432\u0435\u0440\u0445 ASScroll \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043f\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u0430. \u0424\u043e\u0440\u043c\u0430 \u043c\u043e\u0437\u0433\u0430 \u0437\u0430\u0448\u0438\u0442\u0430 \u0432 EXR-\u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443 (\u044d\u0442\u043e \u0444\u043e\u0440\u043c\u0430\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0441 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u043d\u044b\u043c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u043e\u043c), \u0430 \u0448\u0440\u0438\u0444\u0442 \u2014 PP Neue Montreal \u043e\u0442 Pangram Pangram: \u0441\u0432\u043e\u0431\u043e\u0434\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043b\u0438\u0447\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f, \u043a\u043e\u043c\u043c\u0435\u0440\u0447\u0435\u0441\u043a\u0430\u044f \u043b\u0438\u0446\u0435\u043d\u0437\u0438\u044f \u043f\u043b\u0430\u0442\u043d\u0430\u044f.<\/p>\n<p>\u0413\u043b\u0430\u0434\u043a\u043e \u044d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0448\u043b\u043e: \u0441\u043a\u0440\u0438\u043f\u0442-\u044d\u043a\u0441\u0442\u0440\u0430\u043a\u0442\u043e\u0440 \u0448\u0435\u0439\u0434\u0435\u0440\u043e\u0432 \u0441 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0440\u0430\u0437\u0430 \u043f\u0430\u0434\u0430\u043b \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0431\u044d\u043a\u0441\u043b\u0435\u0448\u0435\u0439 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0442\u0440\u043e\u043a\u043e\u0432\u044b\u0445 \u043b\u0438\u0442\u0435\u0440\u0430\u043b\u043e\u0432 \u2014 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u0440\u0443\u0447\u043d\u043e\u0439 \u043f\u043e\u0441\u0438\u043c\u0432\u043e\u043b\u044c\u043d\u044b\u0439 \u043f\u0430\u0440\u0441\u0435\u0440.<\/p>\n<p>EXR-\u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0430 \u0441 \u00ab\u0444\u043e\u0440\u043c\u043e\u0439\u00bb \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u043d\u0435 \u043e\u0434\u043d\u0438\u043c \u043e\u0431\u043b\u0430\u043a\u043e\u043c. \u0422\u0430\u043c \u0447\u0435\u0442\u044b\u0440\u0435 \u0444\u043e\u0440\u043c\u044b, \u0443\u043f\u0430\u043a\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0432 \u043a\u0432\u0430\u0434\u0440\u0430\u043d\u0442\u044b \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b 200\u00d7200 \u2014 \u043c\u043e\u0437\u0433, \u043b\u0430\u043c\u043f\u043e\u0447\u043a\u0430, \u0433\u043b\u043e\u0431\u0443\u0441, \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u0430\u044f \u0441\u0435\u0442\u044c, \u043f\u043e 100\u00d7100 \u043a\u0430\u0436\u0434\u0430\u044f. \u041d\u0430 \u043f\u0435\u0440\u0432\u043e\u0439 \u043f\u043e\u043f\u044b\u0442\u043a\u0435 \u044f \u0432\u044b\u0442\u0430\u0449\u0438\u043b \u0432\u0441\u0435 40 000 \u0442\u043e\u0447\u0435\u043a \u0441\u043a\u043e\u043f\u043e\u043c \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u043a\u0430\u0448\u0443. \u041f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0440\u0435\u0437\u0430\u0442\u044c \u043f\u043e \u043a\u0432\u0430\u0434\u0440\u0430\u043d\u0442\u0430\u043c.<\/p>\n<p>\u0410 Bokeh DoF \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u0432\u044b\u0448\u043b\u043e. \u0415\u043c\u0443 \u043d\u0443\u0436\u0435\u043d depth-\u0431\u0443\u0444\u0435\u0440 \u2014 \u043a\u0430\u0440\u0442\u0430 \u0433\u043b\u0443\u0431\u0438\u043d\u044b \u0441\u0446\u0435\u043d\u044b, \u0430 \u043c\u043e\u0438 \u0447\u0430\u0441\u0442\u0438\u0446\u044b \u0440\u0438\u0441\u0443\u044e\u0442\u0441\u044f \u0441 <code>depthTest:false<\/code> \u0438 \u0430\u0434\u0434\u0438\u0442\u0438\u0432\u043d\u044b\u043c \u0431\u043b\u0435\u043d\u0434\u0438\u043d\u0433\u043e\u043c, \u0433\u043b\u0443\u0431\u0438\u043d\u0443 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0431\u044b \u043f\u043e\u0434\u0434\u0435\u043b\u044b\u0432\u0430\u0442\u044c.<\/p>\n<p>\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u043c\u0435\u043b\u043a\u0430\u044f \u0437\u0430\u0441\u0430\u0434\u0430: \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 <code>python http.server<\/code> \u043e\u0442\u0434\u0430\u0432\u0430\u043b JS \u0438\u0437 \u043a\u044d\u0448\u0430, \u0438 \u043f\u0440\u0430\u0432\u043a\u0438 \u043d\u0435 \u0431\u044b\u043b\u0438 \u0432\u0438\u0434\u043d\u044b \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u041f\u043e\u043a\u0430 \u043d\u0435 \u043f\u043e\u0434\u043d\u044f\u043b \u0441\u0432\u043e\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u0441 <code>Cache-Control: no-store<\/code>, \u043b\u0435\u0433\u043a\u043e \u0431\u044b\u043b\u043e \u043f\u0440\u0438\u043d\u044f\u0442\u044c \u0441\u0442\u0430\u0440\u044b\u0439 \u043a\u043e\u0434 \u0437\u0430 \u043d\u043e\u0432\u044b\u0439.<\/p>\n<p>\u0412\u044b\u0432\u043e\u0434 \u044d\u0442\u043e\u0433\u043e \u0440\u0430\u0437\u0431\u043e\u0440\u0430: \u043a\u043b\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u0441\u0430\u0439\u0442 \u0432 \u043b\u043e\u0431 \u2014 \u043f\u043b\u043e\u0445\u0430\u044f \u0438\u0434\u0435\u044f. \u0427\u0443\u0436\u043e\u0439 \u0431\u0440\u0435\u043d\u0434 \u0438 \u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u0448\u0440\u0438\u0444\u0442 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0435 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0451\u0448\u044c. \u0420\u0430\u0431\u043e\u0447\u0438\u0439 \u0445\u043e\u0434 \u2014 \u0432\u044b\u0442\u0430\u0449\u0438\u0442\u044c \u0440\u0435\u0446\u0435\u043f\u0442\u044b: \u043a\u0430\u043a \u0443\u0441\u0442\u0440\u043e\u0435\u043d GPGPU, \u043a\u0430\u043a\u0438\u0435 \u0448\u0435\u0439\u0434\u0435\u0440\u044b \u0434\u0430\u044e\u0442 \u0441\u0432\u0435\u0447\u0435\u043d\u0438\u0435 \u0438 \u0433\u043b\u0443\u0431\u0438\u043d\u0443 \u0440\u0435\u0437\u043a\u043e\u0441\u0442\u0438, \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u043d \u043c\u043e\u0440\u0444\u0438\u043d\u0433 \u043f\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u0443 \u2014 \u0438 \u0434\u043e\u0440\u0430\u0437\u043e\u0433\u043d\u0430\u0442\u044c \u0434\u043e \u044d\u0442\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u0441\u0432\u043e\u0439 \u0434\u0432\u0438\u0436\u043e\u043a, \u0442\u043e\u0442 \u0441\u0430\u043c\u044b\u0439 <code>brain.js<\/code> \u0441 \u043e\u0431\u043b\u0430\u043a\u0430\u043c\u0438 \u0447\u0430\u0441\u0442\u0438\u0446.<\/p>\n<p>\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e \u0444\u043e\u0440\u043c\u044b. \u0420\u0430\u0437\u0431\u0438\u0440\u0430\u044f \u0438\u0445 EXR, \u044f \u0432\u044b\u0442\u0430\u0449\u0438\u043b \u043e\u0431\u043b\u0430\u043a\u0430 \u0442\u043e\u0447\u0435\u043a \u0438 \u043d\u0430 \u043d\u0438\u0445 \u043e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u043b \u043c\u043e\u0440\u0444\u0438\u043d\u0433 \u2014 \u044d\u0442\u043e \u0431\u044b\u043b \u0441\u0430\u043c\u044b\u0439 \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u043d\u044f\u0442\u044c \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0443. \u0412 \u043f\u0440\u043e\u0434 \u0442\u0430\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0435 \u0438\u0434\u0443\u0442: \u0447\u0443\u0436\u043e\u0439 \u0430\u0441\u0441\u0435\u0442 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0447\u0443\u0436\u0438\u043c, \u0438 \u0444\u043e\u0440\u043c\u044b \u0434\u043b\u044f \u0441\u0432\u043e\u0435\u0433\u043e \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u0430 \u043d\u0430\u0434\u043e \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0438\u0437 \u0441\u0432\u043e\u0438\u0445 \u043c\u0430\u0441\u043e\u043a.<\/p>\n<p><strong>\u041f\u0443\u0442\u044c \u043f\u0435\u0440\u0432\u044b\u0439: \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0440\u0443\u043a\u0430\u043c\u0438. \u00ab\u0422\u043e\u0447\u043a\u0430 \u0441\u0431\u043e\u0440\u043a\u0438\u00bb, \u043d\u043e\u043b\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a<\/strong><\/p>\n<p>\u041d\u0430 \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u0435 \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u0438 \u044f \u043d\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043b \u043d\u0438 \u043e\u0434\u043d\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438: \u043d\u0438\u043a\u0430\u043a\u0438\u0445 GSAP, three.js, Lottie, AOS \u2014 \u0432 \u043a\u043e\u0434\u0435 \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435\u0442 \u043d\u0438 \u043e\u0434\u043d\u043e\u0433\u043e <code>&lt;script src&gt;<\/code> \u043d\u0430 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0434\u0432\u0438\u0436\u043e\u043a. \u0412\u0435\u0441\u044c \u0432\u0438\u0437\u0443\u0430\u043b \u2014 \u0432\u0430\u043d\u0438\u043b\u044c\u043d\u044b\u0439 WebGL \u0438 CSS. \u0424\u0430\u0439\u043b <code>sdvig-tilda-T123-v3.html<\/code> \u0432\u0435\u0441\u0438\u0442 148 235 \u0431\u0430\u0439\u0442 (1965 \u0441\u0442\u0440\u043e\u043a). \u0412\u043d\u0443\u0442\u0440\u0438: 14 CSS-@keyframes, 7 \u0432\u044b\u0437\u043e\u0432\u043e\u0432 requestAnimationFrame, \u043e\u0434\u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 WebGL \u043d\u0430 \u0434\u0432\u0430 \u043a\u0430\u043d\u0432\u0430\u0441\u0430, 2 IntersectionObserver, 10 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u0441\u043f\u0438\u043a\u0435\u0440\u043e\u0432. \u042d\u0442\u043e \u043d\u0435 \u043e\u0446\u0435\u043d\u043a\u0430 \u043d\u0430 \u0433\u043b\u0430\u0437 \u2014 \u044f \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u043b grep&#8217;\u043e\u043c \u043f\u043e \u043e\u0434\u043d\u043e\u043c\u0443 \u0444\u0430\u0439\u043b\u0443, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432\u0435\u0441\u044c \u043b\u0435\u043d\u0434\u0438\u043d\u0433 \u0438 \u0435\u0441\u0442\u044c \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b.<\/p>\n<p><strong>\u0413\u043b\u0430\u0432\u043d\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 \u2014 WebGL-\u0432\u043e\u043b\u043d\u0430<\/strong><\/p>\n<p>\u0421\u0430\u043c\u044b\u0439 \u00ab\u0434\u043e\u0440\u043e\u0433\u043e\u0439\u00bb \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u2014 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u044c \u0432\u043e\u0434\u044b \u0432\u043e \u0432\u0435\u0441\u044c \u044d\u043a\u0440\u0430\u043d \u043d\u0430 WebGL1. \u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f, \u0441 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u043c \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u0438\u0435\u043c, \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0430 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043d\u044b\u043c \u0448\u0435\u0439\u0434\u0435\u0440\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043d\u0430 70 \u0441\u0442\u0440\u043e\u043a. \u0424\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043d\u044b\u0439 \u0448\u0435\u0439\u0434\u0435\u0440 \u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0432\u0438\u0434\u0435\u043e\u043a\u0430\u0440\u0442\u0435 \u0438 \u0441\u0447\u0438\u0442\u0430\u0435\u0442 \u0446\u0432\u0435\u0442 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e; \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0438 \u0432\u043e\u0434\u044b \u0437\u0434\u0435\u0441\u044c \u043d\u0435\u0442, \u0432\u0441\u044f \u0432\u043e\u0434\u0430 \u0436\u0438\u0432\u0451\u0442 \u0432 \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0435.<\/p>\n<p>\u0412\u044b\u0441\u043e\u0442\u0430 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u0438 \u0432 \u043a\u0430\u0436\u0434\u043e\u0439 \u0442\u043e\u0447\u043a\u0435 \u2014 \u0441\u0443\u043c\u043c\u0430 \u0448\u0435\u0441\u0442\u0438 \u0441\u0438\u043d\u0443\u0441\u043e\u0438\u0434 \u0440\u0430\u0437\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u043e\u0442\u044b \u0438 \u0430\u043c\u043f\u043b\u0438\u0442\u0443\u0434\u044b:<\/p>\n<pre><code>float wave(vec2 p, float t){  float h=0.;  h+=.38*sin(p.x*1.7+p.y*.9+t*.6);  h+=.28*sin(p.x*.5-p.y*2.1+t*.4+1.5);  h+=.18*sin(p.x*3.0+p.y*1.4-t*.8+2.8);  h+=.10*sin(p.x*4.2-p.y*3.5+t*1.1+.7);  h+=.06*sin(p.x*6.5+p.y*5.0+t*.7-1.2);  h+=.04*sin(p.x*9.+p.y*7.-t*1.3+3.1);  return h;}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:87px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041a\u0440\u0443\u043f\u043d\u044b\u0435 \u0441\u043b\u0430\u0433\u0430\u0435\u043c\u044b\u0435 \u0441 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0430\u043c\u043f\u043b\u0438\u0442\u0443\u0434\u043e\u0439 \u0434\u0430\u044e\u0442 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0443\u044e \u0437\u044b\u0431\u044c, \u043c\u0435\u043b\u043a\u0438\u0435 \u0438 \u0447\u0430\u0441\u0442\u044b\u0435 \u2014 \u0440\u044f\u0431\u044c. \u041e\u0434\u0438\u043d \u0441\u0438\u043d\u0443\u0441 \u2014 \u0441\u0442\u0438\u0440\u0430\u043b\u044c\u043d\u0430\u044f \u0434\u043e\u0441\u043a\u0430, \u0448\u0435\u0441\u0442\u044c \u0441 \u043f\u043e\u0434\u043e\u0431\u0440\u0430\u043d\u043d\u044b\u043c\u0438 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u0430\u043c\u0438 \u2014 \u0432\u043e\u0434\u0430.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u044c \u043b\u043e\u0432\u0438\u043b\u0430 \u0441\u0432\u0435\u0442, \u0435\u0439 \u043d\u0443\u0436\u043d\u0430 \u043d\u043e\u0440\u043c\u0430\u043b\u044c \u2014 \u0432\u0435\u043a\u0442\u043e\u0440, \u043f\u0435\u0440\u043f\u0435\u043d\u0434\u0438\u043a\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u0438 \u0432 \u0434\u0430\u043d\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0435, \u043f\u043e \u043d\u0435\u043c\u0443 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0443\u0433\u043e\u043b \u043f\u0430\u0434\u0435\u043d\u0438\u044f \u0441\u0432\u0435\u0442\u0430. \u042f \u0431\u0435\u0440\u0443 \u0435\u0451 \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u0437 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430 \u0432\u043e\u043b\u043d\u044b \u0438 \u0441\u0447\u0438\u0442\u0430\u044e \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u0438\u0435 \u043f\u043e \u043c\u043e\u0434\u0435\u043b\u0438 \u0411\u043b\u0438\u043d\u043d\u0430 \u2014 \u0424\u043e\u043d\u0433\u0430: \u0440\u0430\u0441\u0441\u0435\u044f\u043d\u043d\u0430\u044f \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0430\u044f \u043f\u043b\u044e\u0441 \u0437\u0435\u0440\u043a\u0430\u043b\u044c\u043d\u0430\u044f.<\/p>\n<pre><code>float diff=max(dot(N,L),0.);float spec=pow(max(dot(N,H2),0.),60.)*.4;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0412\u044b\u0441\u043e\u043a\u0430\u044f \u0441\u0442\u0435\u043f\u0435\u043d\u044c \u0432 spec \u0434\u0430\u0451\u0442 \u0443\u0437\u043a\u0438\u0439 \u0440\u0435\u0437\u043a\u0438\u0439 \u0431\u043b\u0438\u043a \u2014 \u0442\u043e \u0441\u0430\u043c\u043e\u0435 \u0433\u043b\u044f\u043d\u0446\u0435\u0432\u043e\u0435 \u043f\u044f\u0442\u043d\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0435\u0436\u0438\u0442 \u043f\u043e \u0432\u043e\u0434\u0435. \u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432 \u2014 \u0433\u0430\u0443\u0441\u0441\u043e\u0432\u043e \u0432\u043e\u0437\u043c\u0443\u0449\u0435\u043d\u0438\u0435 \u043e\u0442 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043f\u0440\u044f\u043c\u043e \u0432 \u0448\u0435\u0439\u0434\u0435\u0440\u0435 (<code>exp(-dist*dist*6.)<\/code>), \u0430 \u043f\u043e\u0437\u0438\u0446\u0438\u044f \u043c\u044b\u0448\u0438 \u0434\u043e\u0433\u043e\u043d\u044f\u0435\u0442\u0441\u044f \u0441 \u0438\u043d\u0435\u0440\u0446\u0438\u0435\u0439 \u0432 JS-\u0446\u0438\u043a\u043b\u0435 (lerp 8% \u0437\u0430 \u043a\u0430\u0434\u0440), \u0438\u043d\u0430\u0447\u0435 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u0434\u0451\u0440\u0433\u0430\u043d\u043e\u0435.<\/p>\n<p><strong>\u0414\u0451\u0448\u0435\u0432\u043e, \u043d\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0434\u043e\u0440\u043e\u0433\u043e<\/strong><\/p>\n<p>\u041f\u043e \u043c\u043e\u0438\u043c \u043e\u0449\u0443\u0449\u0435\u043d\u0438\u044f\u043c \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u00ab\u0434\u043e\u0440\u043e\u0433\u043e\u0433\u043e\u00bb \u0432\u043f\u0435\u0447\u0430\u0442\u043b\u0435\u043d\u0438\u044f \u0434\u0430\u044e\u0442 \u043c\u0435\u043b\u043e\u0447\u0438 \u043d\u0430 5\u201320 \u0441\u0442\u0440\u043e\u043a, \u0433\u0434\u0435 JS \u043f\u043e\u0447\u0442\u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0441\u0447\u0438\u0442\u0430\u0435\u0442 \u0438 \u043e\u0442\u0434\u0430\u0451\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0443 GPU. \u0421\u0432\u0435\u0447\u0435\u043d\u0438\u0435 \u0437\u0430 \u043a\u0443\u0440\u0441\u043e\u0440\u043e\u043c: JS \u043f\u0438\u0448\u0435\u0442 \u0434\u0432\u0435 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u0430 <code>radial-gradient<\/code> \u0441 <code>mix-blend-mode:screen<\/code> \u0440\u0438\u0441\u0443\u0435\u0442 \u0441\u0430\u043c.<\/p>\n<pre><code class=\"css\">.hero-glow{position:absolute;inset:0;mix-blend-mode:screen;  background:radial-gradient(circle 600px at var(--mx) var(--my),    rgba(0,40,245,0.28), transparent 70%)}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>JS \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u0433\u043e\u043d\u044f\u0435\u0442 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u0441 \u0438\u043d\u0435\u0440\u0446\u0438\u0435\u0439 \u2014 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u0434\u043b\u044f CPU \u043f\u043e\u0447\u0442\u0438 \u043d\u0443\u043b\u0435\u0432\u0430\u044f.<\/p>\n<p>3D-\u043d\u0430\u043a\u043b\u043e\u043d \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u2014 requestAnimationFrame, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u043c\u0435\u0435\u0442 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u043a\u043b\u043e\u043d \u00ab\u0443\u0441\u043f\u043e\u043a\u043e\u0438\u043b\u0441\u044f\u00bb, \u0447\u0442\u043e\u0431\u044b \u0434\u0435\u0441\u044f\u0442\u044c \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u043d\u0435 \u043a\u0440\u0443\u0442\u0438\u043b\u0438 \u0446\u0438\u043a\u043b \u0432\u0445\u043e\u043b\u043e\u0441\u0442\u0443\u044e:<\/p>\n<pre><code class=\"javascript\">rx+=(trx-rx)*0.12; ry+=(try_-ry)*0.12;card.style.transform=`perspective(900px) rotateX(${rx.toFixed(2)}deg) rotateY(${ry.toFixed(2)}deg)`;if(Math.abs(trx-rx)&gt;0.01||Math.abs(try_-ry)&gt;0.01){ raf=requestAnimationFrame(loop); }else { raf=null; }   \/\/ \u2190 \u0446\u0438\u043a\u043b \u0437\u0430\u0441\u044b\u043f\u0430\u0435\u0442, \u043f\u043e\u043a\u0430 \u043d\u0430 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0443 \u043d\u0435 \u043d\u0430\u0432\u0435\u0434\u0443\u0442 \u0441\u043d\u043e\u0432\u0430<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>SVG-\u0432\u043e\u043b\u043d\u044b-\u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u0435\u043b\u0438 \u2014 \u0433\u043b\u0430\u0434\u043a\u0430\u044f \u043a\u0440\u0438\u0432\u0430\u044f \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438 \u0432 \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0430\u0445 \u043e\u0442\u0440\u0435\u0437\u043a\u043e\u0432, \u0431\u0435\u0437 \u0447\u0435\u0441\u0442\u043d\u043e\u0433\u043e \u043a\u0443\u0431\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0431\u0435\u0437\u044c\u0435. \u0425\u0435\u0434\u0435\u0440, \u043f\u0435\u0440\u0435\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u043f\u043e\u0434 \u0441\u0435\u043a\u0446\u0438\u044e \u0447\u0435\u0440\u0435\u0437 \u00ab\u043f\u0440\u043e\u0431\u0443\u00bb \u0446\u0432\u0435\u0442\u0430 \u043d\u0430 \u0432\u044b\u0441\u043e\u0442\u0435 36px. \u0412\u0441\u0451 \u044d\u0442\u043e \u2014 \u0434\u0435\u0441\u044f\u0442\u043a\u0438 \u0441\u0442\u0440\u043e\u043a, \u043d\u0438 \u043e\u0434\u043d\u043e\u0439 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n<p>\u042d\u0442\u043e\u0442 \u043f\u0443\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u043e\u0434 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0435\u043c: \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043b\u0435\u0437\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u044c \u0448\u0435\u0439\u0434\u0435\u0440\u0430 \u0438 \u043f\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044c \u0447\u0430\u0441\u0442\u043e\u0442\u0443 \u0441\u0438\u043d\u0443\u0441\u043e\u0438\u0434\u044b. \u0426\u0435\u043d\u0430 \u2014 \u0432\u0441\u0451 \u043f\u0438\u0448\u0435\u0448\u044c \u0441\u0430\u043c.<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c76\/ecd\/fcc\/c76ecdfcceeee3fde13660c1b7c49dbb.jpg\" alt=\"\u041f\u0435\u0440\u0432\u044b\u0439 \u043f\u0443\u0442\u044c: \u0442\u0430 \u0436\u0435 \u00ab\u0434\u043e\u0440\u043e\u0433\u043e\u0432\u0438\u0437\u043d\u0430\u00bb \u0431\u0435\u0437 \u0435\u0434\u0438\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u0421\u0432\u0435\u0442 \u0438 \u043b\u0443\u0447\u0438 \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u044d\u043a\u0440\u0430\u043d\u0435 \u2014 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043d\u044b\u0439 \u0448\u0435\u0439\u0434\u0435\u0440 \u043d\u0430 \u0432\u0430\u043d\u0438\u043b\u044c\u043d\u043e\u043c WebGL, \u0441\u0443\u043c\u043c\u0430 \u0448\u0435\u0441\u0442\u0438 \u0441\u0438\u043d\u0443\u0441\u043e\u0438\u0434\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/c76\/ecd\/fcc\/c76ecdfcceeee3fde13660c1b7c49dbb.jpg 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c76\/ecd\/fcc\/c76ecdfcceeee3fde13660c1b7c49dbb.jpg 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041f\u0435\u0440\u0432\u044b\u0439 \u043f\u0443\u0442\u044c: \u0442\u0430 \u0436\u0435 \u00ab\u0434\u043e\u0440\u043e\u0433\u043e\u0432\u0438\u0437\u043d\u0430\u00bb \u0431\u0435\u0437 \u0435\u0434\u0438\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u0421\u0432\u0435\u0442 \u0438 \u043b\u0443\u0447\u0438 \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u044d\u043a\u0440\u0430\u043d\u0435 \u2014 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043d\u044b\u0439 \u0448\u0435\u0439\u0434\u0435\u0440 \u043d\u0430 \u0432\u0430\u043d\u0438\u043b\u044c\u043d\u043e\u043c WebGL, \u0441\u0443\u043c\u043c\u0430 \u0448\u0435\u0441\u0442\u0438 \u0441\u0438\u043d\u0443\u0441\u043e\u0438\u0434<\/figcaption><\/div>\n<\/figure>\n<p><strong>\u041f\u0443\u0442\u044c \u0432\u0442\u043e\u0440\u043e\u0439: \u0441\u0432\u043e\u0439 \u0434\u0432\u0438\u0436\u043e\u043a \u043d\u0430 Three.js. \u0428\u043a\u043e\u043b\u0430 \u0438 aimipt<\/strong><\/p>\n<p>\u041d\u0430 \u0428\u043a\u043e\u043b\u0435 \u0422\u0435\u0445\u043f\u0440\u0435\u0434\u0430 \u044f \u0432\u044b\u0431\u0440\u0430\u043b \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u043b\u043e\u0436\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044e: \u0434\u0432\u0438\u0436\u043e\u043a 3D-\u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u043d\u0430 Three.js, \u0432\u044b\u043d\u0435\u0441\u0435\u043d\u043d\u044b\u0439 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0444\u0430\u0439\u043b\u0430\u043c\u0438 \u043d\u0430 S3 \u2014 <code>brain.js<\/code>, <code>blocks3d.js<\/code>, <code>school-fx.js<\/code>, <code>school-boot.js<\/code>. \u0421\u0430\u043c Three.js \u043b\u0435\u0436\u0438\u0442 \u0442\u0430\u043c \u0436\u0435, \u0440\u044f\u0434\u043e\u043c \u0441 \u0434\u0432\u0438\u0436\u043a\u0430\u043c\u0438.<\/p>\n<p>\u0421\u043e\u0431\u0440\u0430\u043b \u044f \u0435\u0433\u043e \u043d\u0435 \u0434\u043b\u044f \u041c\u0424\u0422\u0418: \u0434\u0432\u0438\u0436\u043e\u043a \u0440\u043e\u0434\u0438\u043b\u0441\u044f \u0440\u0430\u043d\u044c\u0448\u0435, \u043d\u0430 \u043c\u043e\u0451\u043c \u043b\u0438\u0447\u043d\u043e\u043c \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u0435, \u0433\u0434\u0435 \u044f \u0433\u043e\u043d\u044f\u043b \u0442\u0435 \u0436\u0435 \u043e\u0431\u043b\u0430\u043a\u0430 \u0447\u0430\u0441\u0442\u0438\u0446, \u0430 \u043d\u0430 \u0428\u043a\u043e\u043b\u0443 \u043f\u0435\u0440\u0435\u0435\u0445\u0430\u043b \u043f\u043e\u0447\u0442\u0438 \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439. \u0414\u0430\u043b\u044c\u0448\u0435 \u043e\u043d \u0443\u0448\u0451\u043b \u043d\u0430 <a href=\"http:\/\/aimipt.ru\">aimipt.ru<\/a> \u2014 \u043f\u0440\u0435\u0444\u0438\u043a\u0441 <code>school-<\/code> \u0432 \u0438\u043c\u0435\u043d\u0430\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u043e\u0441\u0442\u0430\u043b\u0441\u044f \u0441 \u0442\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0435\u0437\u0434\u0430. \u041e\u0431\u0430 \u0441\u0430\u0439\u0442\u0430 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u044e\u0442 \u0440\u043e\u0432\u043d\u043e \u043e\u0434\u043d\u0438 \u0438 \u0442\u0435 \u0436\u0435 \u0444\u0430\u0439\u043b\u044b: \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u0430\u0441\u044c \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u0430\u0441\u043a\u0430 \u2014 \u043e\u0431\u043b\u0430\u043a\u043e-\u043c\u043e\u0437\u0433 \u0441\u0442\u0430\u043b\u043e \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u043c \u0424\u0438\u0437\u0442\u0435\u0445\u0430.<\/p>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0443\u0441\u0442\u0440\u043e\u0435\u043d\u043e \u0447\u0435\u0441\u0442\u043d\u043e, \u0441 \u0440\u0430\u0441\u0447\u0451\u0442\u043e\u043c \u043d\u0430 \u0441\u0431\u043e\u0439 CDN:<\/p>\n<pre><code>&lt;!-- three.min.js \u0431\u0435\u0437 defer: \u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0434\u043e \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445;     \u043a\u0430\u0436\u0434\u044b\u0439 \u0434\u0432\u0438\u0436\u043e\u043a \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 typeof THREE \u0438 \u043e\u0442\u043a\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 2D, \u0435\u0441\u043b\u0438 S3 \u0443\u043f\u0430\u043b --&gt;&lt;script src=\"\u2026\/three.min.js\"&gt;&lt;\/script&gt;&lt;script src=\"\u2026\/brain.js\" defer&gt;&lt;\/script&gt;&lt;script src=\"\u2026\/blocks3d.js\" defer&gt;&lt;\/script&gt;&lt;script src=\"\u2026\/school-fx.js\" defer&gt;&lt;\/script&gt;&lt;script src=\"\u2026\/school-boot.js\" defer&gt;&lt;\/script&gt;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041f\u0443\u0442\u0438 \u0432 <code>src<\/code> \u044f \u0443\u0440\u0435\u0437\u0430\u043b \u0434\u043e \u0438\u043c\u0451\u043d \u0444\u0430\u0439\u043b\u043e\u0432. \u0412\u0430\u0436\u0435\u043d \u0437\u0434\u0435\u0441\u044c \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f.<\/p>\n<p><code>school-boot.js<\/code> \u2014 \u044d\u0442\u043e \u00ab\u043a\u043b\u0435\u0439\u00bb: \u0434\u0432\u0438\u0436\u043a\u0438 \u0441\u0430\u043c\u0438 \u0441\u0435\u0431\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u044e\u0442. <code>brain.js<\/code> \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0432\u0441\u0435 <code>canvas[data-cloud-glyph]<\/code> \u0438 \u043e\u0436\u0438\u0432\u043b\u044f\u0435\u0442 \u043a\u0430\u0436\u0434\u044b\u0439. \u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0436\u0438\u0432\u0443\u0442 \u043f\u0440\u044f\u043c\u043e \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435, \u0432 data-\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u0445, \u2014 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0431\u0435\u0437 \u043f\u0440\u0430\u0432\u043a\u0438 \u043a\u043e\u0434\u0430.<\/p>\n<p><strong>\u0413\u043b\u0430\u0432\u043d\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 \u2014 3D-\u043b\u043e\u0433\u043e\u0442\u0438\u043f \u0424\u0438\u0437\u0442\u0435\u0445\u0430 \u0438\u0437 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432<\/strong><\/p>\n<p>\u0412\u043e\u0442 \u043e\u043d, \u0441\u0430\u043c\u044b\u0439 \u0434\u043e\u0440\u043e\u0433\u043e\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 \u0432\u0441\u0435\u0439 \u0442\u0440\u043e\u0439\u043a\u0438. \u0412 \u0441\u0435\u043a\u0446\u0438\u0438-\u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442\u0435 \u0441\u043f\u0440\u0430\u0432\u0430 \u0432\u0438\u0441\u0438\u0442 \u043b\u043e\u0433\u043e\u0442\u0438\u043f \u0424\u0438\u0437\u0442\u0435\u0445\u0430, \u0441\u043e\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u0438\u0437 \u0442\u044b\u0441\u044f\u0447 \u043b\u0435\u0442\u0430\u044e\u0449\u0438\u0445 \u0447\u0430\u0441\u0442\u0438\u0446, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0440\u0430\u0449\u0430\u044e\u0442\u0441\u044f, \u0440\u0435\u0430\u0433\u0438\u0440\u0443\u044e\u0442 \u043d\u0430 \u043a\u0443\u0440\u0441\u043e\u0440 \u0438 \u043f\u0435\u0440\u0435\u043b\u0438\u0432\u0430\u044e\u0442\u0441\u044f. \u0412 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 \u044d\u0442\u043e \u043e\u0434\u0438\u043d \u0442\u0435\u0433:<\/p>\n<pre><code>&lt;canvas class=\"manifesto__logo\"        data-cloud-glyph        data-cloud-shape=\"brainimg\"        data-cloud-img=\"\u2026\/phystech_mask.png\"        data-cloud-density=\"1.9\"        data-cloud-depth=\"0.85\"&gt;&lt;\/canvas&gt;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0414\u0432\u0438\u0436\u043e\u043a <code>brain.js<\/code> \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u043e\u0431\u043b\u0430\u043a\u043e \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0448\u0430\u0433\u043e\u0432. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0438\u0441\u0443\u0435\u0442 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443-\u043c\u0430\u0441\u043a\u0443 \u043d\u0430 \u0441\u043a\u0440\u044b\u0442\u043e\u043c 2D-canvas (480\u00d7440) \u0438 \u0447\u0438\u0442\u0430\u0435\u0442 \u043f\u0438\u043a\u0441\u0435\u043b\u0438:<\/p>\n<pre><code class=\"javascript\">function glyphMask(spec,W,H,img){  const c=document.createElement('canvas'); c.width=W; c.height=H;  const x=c.getContext('2d');  if(spec==='brainimg'){ \/\/ \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430-\u043b\u043e\u0433\u043e\u0442\u0438\u043f \u0432\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443    const sc=Math.min(W\/img.naturalWidth, H\/img.naturalHeight)*0.98;    const dw=img.naturalWidth*sc, dh=img.naturalHeight*sc;    x.drawImage(img,(W-dw)\/2,(H-dh)\/2,dw,dh);  }  return x.getImageData(0,0,W,H).data; \/\/ \u2190 \u043f\u0438\u043a\u0441\u0435\u043b\u0438 \u043c\u0430\u0441\u043a\u0438}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0418\u0437 \u043d\u0435\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0445 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043c\u0430\u0441\u043a\u0438 \u0441\u0442\u0440\u043e\u044f\u0442\u0441\u044f 3D-\u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0447\u0430\u0441\u0442\u0438\u0446: \u043f\u043b\u043e\u0441\u043a\u0438\u0439 \u0441\u0438\u043b\u0443\u044d\u0442 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043e\u0431\u044a\u0451\u043c \u043f\u043e \u043e\u0441\u0438 Z (<code>data-cloud-depth=\"0.85\"<\/code> \u2014 \u043f\u043e\u0447\u0442\u0438 \u043f\u043e\u043b\u043d\u044b\u0439 \u043e\u0431\u044a\u0451\u043c). \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0447\u0430\u0441\u0442\u0438\u0446 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0448\u0438\u0440\u0438\u043d\u044b \u044d\u043a\u0440\u0430\u043d\u0430 \u0438 \u043f\u043b\u043e\u0442\u043d\u043e\u0441\u0442\u0438:<\/p>\n<pre><code class=\"javascript\">const dense=+(canvas.getAttribute('data-cloud-density')||1);const target=Math.round((w&lt;560?2600 : w&lt;900?4200 : 5800)*dense);<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041f\u0440\u0438 density=1.9 \u0438\u0437 \u044d\u0442\u043e\u0439 \u0444\u043e\u0440\u043c\u0443\u043b\u044b \u0432\u044b\u0445\u043e\u0434\u0438\u0442 \u043e\u043a\u043e\u043b\u043e 4900 \u0442\u043e\u0447\u0435\u043a \u043d\u0430 \u0443\u0437\u043a\u043e\u043c \u044d\u043a\u0440\u0430\u043d\u0435, 8000 \u043d\u0430 \u0441\u0440\u0435\u0434\u043d\u0435\u043c \u0438 11 000 \u043d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0435.<\/p>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u2014 \u0434\u0432\u0435 \u0432\u0435\u0449\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438 \u0434\u0435\u043b\u0430\u044e\u0442 \u044d\u0444\u0444\u0435\u043a\u0442 \u00ab\u0434\u043e\u0440\u043e\u0433\u0438\u043c\u00bb. \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043a\u0430\u0436\u0434\u0430\u044f \u0447\u0430\u0441\u0442\u0438\u0446\u0430 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u043c \u2014 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u043e\u0439-\u0442\u0435\u043a\u0441\u0442\u0443\u0440\u043e\u0439, \u043d\u0430\u0442\u044f\u043d\u0443\u0442\u043e\u0439 \u043d\u0430 \u0442\u043e\u0447\u043a\u0443. \u0417\u0434\u0435\u0441\u044c \u044d\u0442\u043e \u043a\u0440\u043e\u0448\u0435\u0447\u043d\u044b\u0439 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a-\u0432\u0430\u0439\u0440\u0444\u0440\u0435\u0439\u043c (\u0432 \u043a\u043e\u0434\u0435 \u0447\u0435\u0441\u0442\u043d\u044b\u0439 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439: \u00abreads as a data\/AI particle, not a water drop\u00bb). \u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u044d\u0442\u043e THREE.Points, \u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u044f \u043f\u043e\u0442\u043e\u043c \u0434\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e \u0448\u0435\u0439\u0434\u0435\u0440\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0443 \u043a\u0430\u0436\u0434\u043e\u0439 \u0447\u0430\u0441\u0442\u0438\u0446\u044b \u0431\u044b\u043b\u0438 \u0441\u0432\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0438 \u0441\u0432\u043e\u0451 \u043c\u0435\u0440\u0446\u0430\u043d\u0438\u0435:<\/p>\n<pre><code class=\"javascript\">geo=new THREE.BufferGeometry();geo.setAttribute('position', new THREE.BufferAttribute(pos,3));geo.setAttribute('color',    new THREE.BufferAttribute(col,3));const mat=new THREE.PointsMaterial({  size:+(canvas.getAttribute('data-cloud-size')||0.05),  map:SPRITE, vertexColors:true, transparent:true,  sizeAttenuation:true, depthWrite:false, opacity:0.92});<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c <code>pos<\/code> \u0438 <code>col<\/code> \u2014 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u044b \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0438 \u0446\u0432\u0435\u0442\u043e\u0432, \u0441\u043e\u0431\u0440\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u0448\u0430\u0433\u0435 \u0438\u0437 \u043c\u0430\u0441\u043a\u0438, \u0430 <code>SPRITE<\/code> \u2014 \u0442\u0430 \u0441\u0430\u043c\u0430\u044f \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0430 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430.<\/p>\n<p>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u2014 \u043e\u0431\u043b\u0430\u043a\u043e \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e \u043a\u0440\u0443\u0442\u0438\u0442\u0441\u044f \u0437\u0430 \u043a\u0443\u0440\u0441\u043e\u0440\u043e\u043c, \u0430 \u0432\u0431\u043b\u0438\u0437\u0438 \u043c\u044b\u0448\u0438 \u0447\u0430\u0441\u0442\u0438\u0446\u044b \u0440\u0430\u0437\u043b\u0435\u0442\u0430\u044e\u0442\u0441\u044f \u0438 \u0443\u043f\u0440\u0443\u0433\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0441\u0432\u043e\u0438 \u043c\u0435\u0441\u0442\u0430:<\/p>\n<pre><code class=\"javascript\">group.rotation.y = smx*0.5;   \/\/ \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u0437\u0430 \u043a\u0443\u0440\u0441\u043e\u0440\u043e\u043c, \u0441\u043e \u0441\u0433\u043b\u0430\u0436\u0438\u0432\u0430\u043d\u0438\u0435\u043cgroup.rotation.x = -smy*0.38;\/\/ \u0443\u043f\u0440\u0443\u0433\u0438\u0439 \u0432\u043e\u0437\u0432\u0440\u0430\u0442 \u043a\u0430\u0436\u0434\u043e\u0439 \u0447\u0430\u0441\u0442\u0438\u0446\u044b \u043a home-\u043f\u043e\u0437\u0438\u0446\u0438\u0438:const K=0.045, DAMP=0.865, R=0.30, PUSH=0.024;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0427\u0442\u043e\u0431\u044b \u0442\u044b\u0441\u044f\u0447\u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0445 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432 \u043d\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0438 \u043c\u0451\u0440\u0442\u0432\u043e\u0439 \u0441\u0435\u0442\u043a\u043e\u0439, \u0443 \u043a\u0430\u0436\u0434\u043e\u0439 \u0447\u0430\u0441\u0442\u0438\u0446\u044b \u0441\u0432\u043e\u0439 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0439 \u00ab\u0441\u0438\u0434\u00bb. \u041c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u043f\u0430\u0442\u0447\u0438\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 <code>onBeforeCompile<\/code> \u2014 \u044d\u0442\u043e \u0448\u0442\u0430\u0442\u043d\u044b\u0439 \u0445\u0443\u043a Three.js, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u0430\u0451\u0442 \u0434\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u0432 \u0443\u0436\u0435 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u0448\u0435\u0439\u0434\u0435\u0440 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430. \u0412 \u0448\u0435\u0439\u0434\u0435\u0440 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b <code>asize<\/code>\/<code>aseed<\/code> \u0438 \u043e\u0431\u0449\u0438\u0439 <code>uTime<\/code>, \u0438 \u0442\u043e\u0447\u043a\u0438 \u0435\u043b\u0435 \u0437\u0430\u043c\u0435\u0442\u043d\u043e \u043f\u0443\u043b\u044c\u0441\u0438\u0440\u0443\u044e\u0442 \u0432\u0440\u0430\u0437\u043d\u043e\u0431\u043e\u0439. \u0410 \u0437\u0430 \u0441\u0430\u043c\u0438\u043c \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u043c \u043a\u0440\u0443\u0442\u0438\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439, \u0431\u043e\u043b\u0435\u0435 \u0440\u0435\u0434\u043a\u0438\u0439 \u0441\u043b\u043e\u0439 \u0444\u043e\u043d\u043e\u0432\u044b\u0445 \u0447\u0430\u0441\u0442\u0438\u0446 \u2014 \u043e\u043d \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0433\u043b\u0443\u0431\u0438\u043d\u044b, \u0447\u0442\u043e\u0431\u044b \u0444\u0438\u0433\u0443\u0440\u0430 \u043d\u0435 \u0432\u0438\u0441\u0435\u043b\u0430 \u0432 \u043f\u0443\u0441\u0442\u043e\u0442\u0435.<\/p>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u043b\u043e\u0433\u043e\u0442\u0438\u043f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u0435\u0440\u0436\u0438\u0442 \u0444\u043e\u0440\u043c\u0443, \u043d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u00ab\u0434\u044b\u0448\u0438\u0442\u00bb \u0438 \u0440\u0430\u0441\u0441\u044b\u043f\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0434 \u0440\u0443\u043a\u043e\u0439. \u0422\u043e\u0442 \u0436\u0435 <code>brain.js<\/code> \u0440\u0438\u0441\u0443\u0435\u0442 \u0438 \u043e\u0431\u043b\u0430\u043a\u043e-\u043c\u043e\u0437\u0433 \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u044d\u043a\u0440\u0430\u043d\u0435 \u2014 \u0442\u0430 \u0436\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0430 \u0441 \u0434\u0440\u0443\u0433\u043e\u0439 \u043c\u0430\u0441\u043a\u043e\u0439.<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a28\/904\/f69\/a28904f692e30234dc051612efff6f68.jpg\" alt=\"\u041b\u043e\u0433\u043e\u0442\u0438\u043f \u043a\u0430\u0444\u0435\u0434\u0440\u044b \u0441\u043e\u0431\u0440\u0430\u043d \u0438\u0437 \u0442\u044b\u0441\u044f\u0447 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0438\u0446 \u2014 \u044d\u0442\u043e \u043d\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430, \u0430 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u0438\u0434\u0435\u043e\u043a\u0430\u0440\u0442\u0430 \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u0430\u0434\u0440\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/a28\/904\/f69\/a28904f692e30234dc051612efff6f68.jpg 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a28\/904\/f69\/a28904f692e30234dc051612efff6f68.jpg 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041b\u043e\u0433\u043e\u0442\u0438\u043f \u043a\u0430\u0444\u0435\u0434\u0440\u044b \u0441\u043e\u0431\u0440\u0430\u043d \u0438\u0437 \u0442\u044b\u0441\u044f\u0447 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0438\u0446 \u2014 \u044d\u0442\u043e \u043d\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430, \u0430 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u0438\u0434\u0435\u043e\u043a\u0430\u0440\u0442\u0430 \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u0430\u0434\u0440<\/figcaption><\/div>\n<\/figure>\n<p><strong>\u0416\u0438\u0432\u0430\u044f 3D-\u0431\u0430\u0448\u043d\u044f \u0438\u0437 \u043a\u0443\u0431\u043e\u0432<\/strong><\/p>\n<p>\u0412\u0442\u043e\u0440\u043e\u0439 \u0434\u0432\u0438\u0436\u043e\u043a, <code>blocks3d.js<\/code>, \u2014 \u00abliving 3D knowledge tower\u00bb: \u0431\u0430\u0448\u043d\u044f \u0438\u0437 \u043a\u0443\u0431\u043e\u0432 2\u00d72, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e \u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f. \u0417\u0434\u0435\u0441\u044c \u0443\u0436\u0435 \u0447\u0435\u0441\u0442\u043d\u0430\u044f 3D-\u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044f \u043d\u0430 Three.js (BoxGeometry, Mesh). \u0420\u043e\u0432\u043d\u043e \u0442\u043e\u0442 \u0441\u043b\u0443\u0447\u0430\u0439, \u0440\u0430\u0434\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0441\u0442\u043e\u0438\u043b\u043e \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c <a href=\"http:\/\/dayos.com\">dayos.com<\/a>.<\/p>\n<p>\u0422\u0440\u0435\u0442\u0438\u0439 \u0444\u0430\u0439\u043b, <code>school-fx.js<\/code>, \u043e\u0431\u043b\u0430\u043a\u043e\u0432 \u043d\u0435 \u0440\u0438\u0441\u0443\u0435\u0442. \u042d\u0442\u043e \u043d\u0430\u0431\u043e\u0440 \u043c\u0435\u043b\u043a\u0438\u0445 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0439, \u043f\u0435\u0440\u0435\u043a\u0440\u0430\u0448\u0435\u043d\u043d\u044b\u0445 \u043f\u043e\u0434 cyan\/navy \u0431\u0440\u0435\u043d\u0434 \u0428\u043a\u043e\u043b\u044b: \u0442\u043e\u0442 \u0436\u0435 3D-\u043d\u0430\u043a\u043b\u043e\u043d \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u043a \u043a\u0443\u0440\u0441\u043e\u0440\u0443 \u0438 \u043c\u044f\u0433\u043a\u043e\u0435 \u0441\u0432\u0435\u0447\u0435\u043d\u0438\u0435 \u0437\u0430 \u043c\u044b\u0448\u044c\u044e, \u0447\u0442\u043e \u0438 \u0432 \u0432\u0430\u043d\u0438\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0442\u043a\u0435, \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0434\u0435\u0441\u044c \u043e\u043d\u0438 \u0447\u0430\u0441\u0442\u044c \u043e\u0431\u0449\u0435\u0433\u043e Three.js-\u043d\u0430\u0431\u043e\u0440\u0430.<\/p>\n<p>\u0412\u043c\u0435\u0441\u0442\u0435 \u044d\u0442\u043e \u0447\u0435\u0442\u044b\u0440\u0435 \u0444\u0430\u0439\u043b\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u0441\u0430\u0439\u0442 \u043f\u044f\u0442\u044c\u044e \u0442\u0435\u0433\u0430\u043c\u0438 <code>&lt;script&gt;<\/code>.<\/p>\n<p><strong>\u041c\u043e\u0440\u0444\u0438\u043d\u0433 \u0444\u043e\u0440\u043c \u043f\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u0443 \u2014 \u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u044f \u0432\u044b\u043a\u043b\u044e\u0447\u0438\u043b bloom<\/strong><\/p>\n<p>\u0421\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0439 \u0441\u0430\u0439\u0442 \u043d\u0430 \u044d\u0442\u043e\u043c \u0434\u0432\u0438\u0436\u043a\u0435 \u2014 \u043c\u043e\u0439 \u043b\u0438\u0447\u043d\u044b\u0439 \u043b\u0435\u043d\u0434\u0438\u043d\u0433. \u0422\u0430\u043c \u0442\u043e\u0442 \u0436\u0435 <code>brain.js<\/code> \u044f \u0434\u043e\u0432\u0451\u043b \u0434\u043e morph-\u0434\u0432\u0438\u0436\u043a\u0430 (<code>morph.js<\/code>, \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u0447\u0435\u0441\u0442\u043d\u043e: \u00abbuilt by taking brain.js AS-IS\u00bb). \u041e\u0431\u043b\u0430\u043a\u043e \u0447\u0430\u0441\u0442\u0438\u0446 \u043f\u0435\u0440\u0435\u0442\u0435\u043a\u0430\u0435\u0442 \u043c\u0435\u0436\u0434\u0443 \u0444\u043e\u0440\u043c\u0430\u043c\u0438 \u043f\u043e \u043c\u0435\u0440\u0435 \u0441\u043a\u0440\u043e\u043b\u043b\u0430: \u043c\u043e\u0437\u0433, \u043b\u0430\u043c\u043f\u043e\u0447\u043a\u0430, \u0433\u043b\u043e\u0431\u0443\u0441, \u043a\u043e\u043c\u043f\u0430\u0441.<\/p>\n<p>\u0414\u0440\u0430\u0439\u0432\u0435\u0440 <code>morph-boot.js<\/code> \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0435\u043a\u0446\u0438\u0438 \u0441\u043a\u043e\u043b\u044c\u0437\u0438\u0442 \u0444\u0438\u0433\u0443\u0440\u0443 \u0432\u043b\u0435\u0432\u043e-\u0432\u043f\u0440\u0430\u0432\u043e \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u0445\u043e\u0434\u043e\u043c \u0442\u0435\u043a\u0441\u0442\u0443, \u0434\u043e\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u0435\u0451 \u043d\u0430 180 \u0433\u0440\u0430\u0434\u0443\u0441\u043e\u0432 \u0438 \u0432 \u043a\u043e\u043d\u0446\u0435 \u00ab\u0432\u0437\u0440\u044b\u0432\u0430\u0435\u0442\u00bb \u0447\u0430\u0441\u0442\u0438\u0446\u044b \u043a \u0446\u0435\u043d\u0442\u0440\u0443 \u044d\u043a\u0440\u0430\u043d\u0430, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0444\u043e\u0440\u043c\u0443. \u0420\u044f\u0434\u043e\u043c \u2014 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 3D-\u043a\u043e\u043c\u043f\u0430\u0441 \u0438\u0437 \u0447\u0430\u0441\u0442\u0438\u0446 (<code>compass3d.js<\/code>) \u0438 \u0442\u0435\u043a\u0441\u0442, \u043d\u0430\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u0442\u0435\u043c\u0438 \u0436\u0435 \u0441\u043f\u0440\u0430\u0439\u0442\u0430\u043c\u0438-\u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430\u043c\u0438 (<code>textsprites.js<\/code>).<\/p>\n<p>\u041a\u043e\u043c\u043f\u0430\u0441 \u0434\u0430\u043b\u0441\u044f \u0434\u043e\u0440\u043e\u0436\u0435 \u0432\u0441\u0435\u0433\u043e \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e. \u042f \u0441\u0434\u0435\u043b\u0430\u043b \u0442\u0440\u0438\u043d\u0430\u0434\u0446\u0430\u0442\u044c \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0439, \u043f\u044b\u0442\u0430\u044f\u0441\u044c \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0435\u0433\u043e \u0438\u0437 \u0447\u0430\u0441\u0442\u0438\u0446, \u0438 \u0441\u0434\u0430\u043b\u0441\u044f. \u0414\u0432\u0438\u0436\u043e\u043a \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u043f\u043b\u043e\u0448\u043d\u044b\u0435 \u00ab\u0431\u043b\u043e\u0431\u044b\u00bb \u2014 \u043c\u043e\u0437\u0433, \u0433\u043b\u043e\u0431\u0443\u0441, \u043b\u0430\u043c\u043f\u043e\u0447\u043a\u0443. \u0410 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u0443\u044e \u0433\u0440\u0430\u0444\u0438\u043a\u0443 (\u043a\u043e\u043b\u044c\u0446\u043e, \u0440\u043e\u0437\u0443 \u0432\u0435\u0442\u0440\u043e\u0432, \u043c\u0435\u0442\u043a\u0438 \u0441\u0442\u043e\u0440\u043e\u043d \u0441\u0432\u0435\u0442\u0430) \u043f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u0435 \u0437\u0430\u043c\u044b\u043b\u0438\u0432\u0430\u0435\u0442 \u0432 \u0437\u043e\u043b\u043e\u0442\u043e\u0439 \u0448\u0430\u0440, \u043a\u0430\u043a \u043d\u0438 \u043a\u0440\u0443\u0442\u0438 \u043f\u043b\u043e\u0442\u043d\u043e\u0441\u0442\u044c \u0438 \u0433\u043b\u0443\u0431\u0438\u043d\u0443.<\/p>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u0444\u043e\u0440\u043c\u0443 \u043a\u043e\u043c\u043f\u0430\u0441\u0430 \u044f \u0432\u0437\u044f\u043b \u0432\u043d\u0435\u0448\u043d\u0435\u0439 PNG-\u043c\u0430\u0441\u043a\u043e\u0439, \u0430 \u0447\u0430\u0441\u0442\u0438\u0446\u0430\u043c\u0438 \u043e\u0441\u0442\u0430\u0432\u0438\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u00ab\u0436\u0438\u0432\u043e\u0441\u0442\u044c\u00bb \u0432\u043e\u043a\u0440\u0443\u0433: ambient-\u043f\u043e\u043b\u0435, \u043f\u043e\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0435 \u043e\u0442 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u0438 \u0441\u0442\u0440\u0435\u043b\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043a\u0440\u0443\u0442\u0438\u0442\u0441\u044f \u0437\u0430 \u043c\u044b\u0448\u044c\u044e, \u043d\u0435 \u0432\u044b\u0445\u043e\u0434\u044f \u0437\u0430 \u043a\u0440\u0443\u0433. \u0423\u0440\u043e\u043a \u0442\u043e\u0442 \u0436\u0435, \u0447\u0442\u043e \u0441 EXR-\u0444\u043e\u0440\u043c\u0430\u043c\u0438: \u043d\u0435 \u0432\u0441\u0451 \u0441\u0442\u043e\u0438\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0447\u0430\u0441\u0442\u0438\u0446\u0430\u043c\u0438.<\/p>\n<p>\u041c\u0435\u0445\u0430\u043d\u0438\u043a\u0443 \u043c\u043e\u0440\u0444\u0438\u043d\u0433\u0430 \u0438 \u00ab\u0432\u0437\u0440\u044b\u0432\u0430\u00bb \u0447\u0430\u0441\u0442\u0438\u0446 \u044f \u043f\u043e\u0434\u0441\u043c\u043e\u0442\u0440\u0435\u043b \u043a\u0430\u043a \u0440\u0430\u0437 \u0432 \u0440\u0430\u0437\u0431\u043e\u0440\u0435 Dala \u2014 \u0442\u0430\u043c \u0432 \u0448\u0435\u0439\u0434\u0435\u0440\u0435 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0431\u044b\u043b \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0441\u0438\u043b\u044b \u0432\u0437\u0440\u044b\u0432\u0430 \u043d\u0430 \u043a\u0430\u0436\u0434\u0443\u044e \u0447\u0430\u0441\u0442\u0438\u0446\u0443 \u0441 \u043a\u0430\u0441\u043a\u0430\u0434\u043e\u043c \u00ab\u0440\u044f\u0431\u044c\u044e \u043e\u0442 \u0446\u0435\u043d\u0442\u0440\u0430\u00bb. \u042f \u043f\u0435\u0440\u0435\u043d\u0451\u0441 \u0438\u0434\u0435\u044e (\u0432 \u043a\u043e\u0434\u0435 \u0434\u0430\u0436\u0435 \u043e\u0441\u0442\u0430\u043b\u0430\u0441\u044c \u043f\u043e\u043c\u0435\u0442\u043a\u0430 <code>Dala tParams3.x \u2208 [1..6] \u2014 per-particle blast strength<\/code>), \u043d\u043e \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u043b \u043f\u043e\u0434 \u0441\u0432\u043e\u0439 \u0434\u0432\u0438\u0436\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0447\u0438\u0442\u0430\u0435\u0442 \u0447\u0430\u0441\u0442\u0438\u0446\u044b \u043d\u0430 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0435.<\/p>\n<p>\u0410 \u0432\u043e\u0442 \u043e\u0434\u0438\u043d \u0443\u0440\u043e\u043a Dala \u044f \u0441\u043e\u0437\u043d\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0435 \u0432\u0437\u044f\u043b. \u041f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b \u043f\u043e\u0441\u0442\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u2014 EffectComposer + UnrealBloom \u0434\u043b\u044f \u0441\u0432\u0435\u0447\u0435\u043d\u0438\u044f \u0447\u0430\u0441\u0442\u0438\u0446, \u043a\u0430\u043a \u043d\u0430 Dala. \u0418 \u0432\u044b\u043a\u043b\u044e\u0447\u0438\u043b. Bloom \u0434\u0430\u0432\u0430\u043b \u00ab\u0437\u0435\u0444\u0438\u0440\u043d\u0443\u044e\u00bb \u0434\u044b\u043c\u043a\u0443 \u043f\u043e \u0432\u0441\u0435\u043c\u0443 \u043a\u0430\u0434\u0440\u0443 \u0438 \u0443\u0431\u0438\u0432\u0430\u043b \u0442\u0451\u043c\u043d\u043e\u0435 \u044f\u0434\u0440\u043e \u043e\u0431\u043b\u0430\u043a\u0430. \u0412 \u043a\u043e\u0434\u0435 \u0442\u0430\u043a \u0438 \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c:<\/p>\n<pre><code class=\"javascript\">if(false &amp;&amp; typeof THREE.EffectComposer!=='undefined' &amp;&amp; !reduced){  \/\/ composer DISABLED: bloom was a permanent haze-glow AND killed the dim CORE layer.  \/\/ Direct render = crisp sprites.}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041f\u0440\u044f\u043c\u043e\u0439 \u0440\u0435\u043d\u0434\u0435\u0440 \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u0447\u0451\u0442\u0447\u0435.<\/p>\n<p><strong>\u0413\u043b\u0430\u0432\u043d\u044b\u0439 \u0443\u0440\u043e\u043a: WebGL \u043d\u0435\u043b\u044c\u0437\u044f \u043e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u0442\u044c \u043d\u0430 \u0433\u043b\u0430\u0437<\/strong><\/p>\n<p>\u0421\u0430\u043c\u044b\u043c \u0442\u044f\u0436\u0451\u043b\u044b\u043c \u0432 \u044d\u0442\u0438\u0445 \u0434\u0432\u0438\u0436\u043a\u0430\u0445 \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u043e\u0442\u043b\u0430\u0434\u043a\u0430, \u0430 \u043d\u0435 \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0430. \u0421\u0446\u0435\u043d\u0443 \u0438\u0437 \u0447\u0430\u0441\u0442\u0438\u0446 \u043d\u0435\u043b\u044c\u0437\u044f \u00ab\u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0438 \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u043d\u0435 \u0442\u0430\u043a\u00bb: \u0433\u043b\u0430\u0437 \u0432\u0440\u0451\u0442, \u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u044b \u0432\u0440\u0443\u0442 \u0435\u0449\u0451 \u0441\u0438\u043b\u044c\u043d\u0435\u0435.<\/p>\n<p>\u0421\u0430\u043c\u044b\u0439 \u0434\u043e\u0440\u043e\u0433\u043e\u0439 \u0441\u043b\u0443\u0447\u0430\u0439: \u0444\u043e\u043d\u043e\u0432\u044b\u0435 \u0447\u0430\u0441\u0442\u0438\u0446\u044b \u043f\u0440\u043e\u043f\u0430\u0434\u0430\u043b\u0438 \u0432 \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u0441\u0435\u043a\u0446\u0438\u0439. \u042f \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b \u043f\u043e\u0447\u0442\u0438 \u0434\u0435\u043d\u044c, \u0442\u044b\u043a\u0430\u044f \u0432\u0441\u043b\u0435\u043f\u0443\u044e \u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u0441\u043b\u043e\u043c\u0430\u0432 \u0444\u043e\u043d \u043f\u043e \u0432\u0441\u0435\u043c\u0443 \u0441\u0430\u0439\u0442\u0443. \u0421\u043f\u043e\u0440 \u043e \u0442\u043e\u043c, \u0435\u0441\u0442\u044c \u043b\u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u0431\u0430\u0433, \u0441\u0432\u0451\u043b\u0441\u044f \u043a \u00ab\u043c\u044b \u043d\u0430 \u0440\u0430\u0437\u043d\u043e\u0435 \u0441\u043c\u043e\u0442\u0440\u0438\u043c\u00bb \u043f\u043e \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0430\u043c.<\/p>\n<p>\u041f\u0435\u0440\u0435\u043b\u043e\u043c \u043d\u0430\u0441\u0442\u0443\u043f\u0438\u043b, \u043a\u043e\u0433\u0434\u0430 \u044f \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043b \u0432\u0435\u0440\u0438\u0442\u044c \u0433\u043b\u0430\u0437\u0430\u043c \u0438 \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u043b \u043e\u0431\u044a\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0437\u0430\u043c\u0435\u0440\u044b. \u0421\u0435\u0442\u043a\u0430 <code>gl.readPixels<\/code> \u043f\u043e \u043a\u0430\u0434\u0440\u0443 \u2014 \u0447\u0438\u0442\u0430\u044e \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0438\u043a\u0441\u0435\u043b\u0438 \u0438\u0437 \u0444\u0440\u0435\u0439\u043c\u0431\u0443\u0444\u0435\u0440\u0430 \u0432\u043c\u0435\u0441\u0442\u043e \u0440\u0430\u0437\u0433\u043b\u044f\u0434\u044b\u0432\u0430\u043d\u0438\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438. \u041f\u043e\u0434\u0441\u0447\u0451\u0442 \u0447\u0430\u0441\u0442\u0438\u0446 \u043f\u0440\u043e\u0435\u043a\u0446\u0438\u0435\u0439 \u0432 NDC \u2014 \u044d\u0442\u043e \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430, \u043a\u0443\u0431 \u043e\u0442 \u22121 \u0434\u043e 1, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u0432\u0441\u0451 \u0432\u0438\u0434\u0438\u043c\u043e\u0435; \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0447\u0435\u043a \u043f\u043e\u043f\u0430\u043b\u043e \u0432 \u043a\u0443\u0431, \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0438 \u0435\u0441\u0442\u044c. \u041f\u043b\u044e\u0441 \u0440\u0435\u043d\u0434\u0435\u0440 \u0441\u043b\u043e\u0451\u0432 \u043f\u043e \u043e\u0434\u043d\u043e\u043c\u0443 \u0438 \u0431\u0438\u0441\u0435\u043a\u0446\u0438\u044f \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430: \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0443 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0432\u044b\u043a\u043b\u044e\u0447\u0438\u043b, \u0441\u043c\u043e\u0442\u0440\u044e, \u043d\u0430 \u043a\u0430\u043a\u043e\u0439 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0435 \u043f\u0440\u043e\u043f\u0430\u0434\u0430\u0435\u0442.<\/p>\n<p>\u0411\u0430\u0433 \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0441\u044f \u0437\u0430 \u043c\u0438\u043d\u0443\u0442\u044b. \u0412\u0438\u043d\u043e\u0432\u0430\u0442 \u0431\u044b\u043b \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 rotation-\u0448\u0435\u0439\u0434\u0435\u0440 (<code>onBeforeCompile<\/code>), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0431\u0438\u0432\u0430\u043b \u0440\u0430\u0437\u0440\u0435\u0436\u0435\u043d\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438. \u041d\u0430 \u043f\u043b\u043e\u0442\u043d\u043e\u0439 \u0444\u043e\u0440\u043c\u0435 \u0441\u043e \u0441\u0432\u0435\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u043e\u0432\u0435\u0440\u0445 \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u043d\u0435 \u0432\u0438\u0434\u043d\u043e \u2014 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0444\u043e\u043d\u043e\u0432\u044b\u0439 \u0441\u043b\u043e\u0439 \u0438 \u00ab\u0438\u0441\u0447\u0435\u0437\u0430\u043b\u00bb.<\/p>\n<p>\u0422\u0430\u043a\u0438\u0445 \u043b\u043e\u0432\u0443\u0448\u0435\u043a \u00ab\u0433\u043b\u0430\u0437 \u0432\u0440\u0451\u0442\u00bb \u0431\u044b\u043b\u043e \u043c\u043d\u043e\u0433\u043e. \u0421\u0432\u0435\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u0434 \u043a\u0443\u0440\u0441\u043e\u0440\u043e\u043c \u044f \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u0434\u0435\u043b\u0430\u043b \u043a\u0430\u043a \u0440\u043e\u0441\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432 \u2014 \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0442\u044c \u0447\u0430\u0441\u0442\u0438\u0446\u044b \u043f\u043e \u043e\u0441\u0438 Z. \u041e\u0442\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u043d\u0438\u0435 \u0447\u0430\u0441\u0442\u0438\u0446 \u043e\u0442 \u043c\u044b\u0448\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u043b\u043e \u0440\u0435\u0437\u043e\u043d\u0430\u043d\u0441 \u0438 \u00ab\u0447\u0451\u0440\u043d\u0443\u044e \u0434\u044b\u0440\u0443\u00bb-\u0432\u0438\u0445\u0440\u044c, \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0435\u0433\u043e \u0441\u0434\u0432\u0438\u0433\u043e\u043c \u0446\u0435\u043b\u0438 \u043f\u0440\u0443\u0436\u0438\u043d\u044b \u043f\u043e \u043a\u0440\u0443\u0433\u0443.<\/p>\n<p>\u0426\u0432\u0435\u0442\u043d\u044b\u0435 \u044f\u0434\u0440\u0430-\u0441\u043f\u0440\u0430\u0439\u0442\u044b \u043d\u0430 NormalBlending, \u043e\u0431\u044b\u0447\u043d\u043e\u043c \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u0438 \u0446\u0432\u0435\u0442\u043e\u0432, \u043e\u043a\u0430\u0437\u0430\u043b\u0438\u0441\u044c \u043d\u0435\u0432\u0438\u0434\u0438\u043c\u044b\u043c\u0438 \u0441\u0430\u043c\u0438 \u043f\u043e \u0441\u0435\u0431\u0435 \u2014 \u0438\u0445 \u00ab\u0432\u044b\u0442\u044f\u0433\u0438\u0432\u0430\u043b\u043e\u00bb \u0442\u043e\u043b\u044c\u043a\u043e \u0430\u0434\u0434\u0438\u0442\u0438\u0432\u043d\u043e\u0435 \u0441\u0432\u0435\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u0432\u0435\u0440\u0445. \u042d\u0442\u043e \u043d\u0430\u0434\u043e\u043b\u0433\u043e \u0443\u0432\u0435\u043b\u043e \u043e\u0442\u043b\u0430\u0434\u043a\u0443 \u043f\u043e \u043b\u043e\u0436\u043d\u043e\u043c\u0443 \u0441\u043b\u0435\u0434\u0443. \u0410 \u043c\u043e\u0439 \u043f\u0440\u043e\u0446\u0435\u0434\u0443\u0440\u043d\u044b\u0439 \u043c\u043e\u0437\u0433 \u0438\u0437 2D-PNG \u043f\u0440\u0438 \u0440\u0430\u0437\u0432\u043e\u0440\u043e\u0442\u0435 \u043d\u0430 180 \u0433\u0440\u0430\u0434\u0443\u0441\u043e\u0432 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u043b \u00ab\u0440\u0435\u0431\u0440\u043e\u00bb: \u043f\u043b\u043e\u0441\u043a\u0438\u0439 \u0441\u0438\u043b\u0443\u044d\u0442 \u0432\u044b\u0434\u0430\u0432\u0430\u043b \u0441\u0435\u0431\u044f. \u041f\u043e\u043c\u043e\u0433 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442\u043a\u0430\u0437 \u043e\u0442 \u043f\u0440\u043e\u0446\u0435\u0434\u0443\u0440\u043d\u043e\u0441\u0442\u0438 \u0432 \u043f\u043e\u043b\u044c\u0437\u0443 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u0431\u044a\u0451\u043c\u043d\u044b\u0445 \u0444\u043e\u0440\u043c, \u0432\u0437\u044f\u0442\u044b\u0445 \u0438\u0437 EXR-\u043e\u0431\u043b\u0430\u043a\u0430 Dala \u043a\u0430\u043a \u0434\u0430\u043d\u043d\u044b\u0435.<\/p>\n<p>\u041e\u0442\u0441\u044e\u0434\u0430 \u0442\u0440\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u0430. \u041f\u0435\u0440\u0432\u043e\u0435: \u0434\u043b\u044f WebGL \u0437\u0430\u0432\u043e\u0434\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u044b (readPixels, \u0441\u0447\u0451\u0442\u0447\u0438\u043a\u0438 \u0447\u0430\u0441\u0442\u0438\u0446, \u043f\u043e\u0441\u043b\u043e\u0439\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440) \u0441 \u0441\u0430\u043c\u043e\u0433\u043e \u043d\u0430\u0447\u0430\u043b\u0430 \u2014 \u043e\u0442\u043b\u0430\u0434\u043a\u0430 \u00ab\u043d\u0430 \u0433\u043b\u0430\u0437\u00bb \u0441\u0436\u0438\u0433\u0430\u0435\u0442 \u0434\u043d\u0438. \u0412\u0442\u043e\u0440\u043e\u0435: \u0447\u0443\u0436\u043e\u0439 3D \u0447\u0430\u0441\u0442\u043e \u0434\u0435\u0448\u0435\u0432\u043b\u0435 \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u0434\u0430\u043d\u043d\u044b\u0435, \u0433\u043e\u0442\u043e\u0432\u043e\u0435 \u043e\u0431\u043b\u0430\u043a\u043e \u0442\u043e\u0447\u0435\u043a, \u0447\u0435\u043c \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u043f\u0440\u043e\u0446\u0435\u0434\u0443\u0440\u043d\u043e. \u0422\u0440\u0435\u0442\u044c\u0435, \u043f\u0440\u043e\u0437\u0430\u0438\u0447\u043d\u043e\u0435: headless-\u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0430 \u0441\u0446\u0435\u043d\u0435 \u0432 10 000 \u0447\u0430\u0441\u0442\u0438\u0446 \u0443 \u043c\u0435\u043d\u044f \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e \u043f\u0430\u0434\u0430\u043b, \u0442\u0430\u043a \u0447\u0442\u043e \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u00ab\u0436\u0438\u0432\u043e\u0433\u043e\u00bb \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u0434\u0435\u043b\u0430\u0435\u0448\u044c \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0439 \u043c\u0430\u0448\u0438\u043d\u0435 \u0441 \u0434\u0438\u0441\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0432\u0438\u0434\u0435\u043e\u043a\u0430\u0440\u0442\u043e\u0439, \u0430 \u043d\u0435 \u0432 CI.<\/p>\n<p>\u0417\u0430 \u0432\u0440\u0435\u043c\u044f \u044d\u0442\u043e\u0439 \u0432\u043e\u0437\u043d\u0438 \u0443 \u043c\u0435\u043d\u044f \u043d\u0430\u043a\u043e\u043f\u0438\u043b\u0438\u0441\u044c \u0434\u0435\u0441\u044f\u0442\u043a\u0438 \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0441\u043d\u0430\u043f\u0448\u043e\u0442\u043e\u0432 <code>good-state-NN<\/code> \u2014 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043d\u0435 \u043f\u043e\u0442\u0435\u0440\u044f\u0442\u044c \u0440\u0430\u0431\u043e\u0447\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043a\u043e\u0433\u0434\u0430 \u043a\u0430\u0436\u0434\u0430\u044f \u0442\u0440\u0435\u0442\u044c\u044f \u043f\u0440\u0430\u0432\u043a\u0430 \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u043b\u043e\u043c\u0430\u0435\u0442.<\/p>\n<p><strong>\u0414\u0435\u0433\u0440\u0430\u0434\u0430\u0446\u0438\u044f \u0437\u0430\u043b\u043e\u0436\u0435\u043d\u0430 \u0437\u0430\u0440\u0430\u043d\u0435\u0435<\/strong><\/p>\n<p>\u0412\u0430\u0436\u043d\u043e\u0435 \u0432 \u044d\u0442\u043e\u043c \u043f\u0443\u0442\u0438 \u2014 \u043e\u043d \u043d\u0435 \u043f\u0430\u0434\u0430\u0435\u0442, \u0435\u0441\u043b\u0438 Three.js \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u0441\u044f. \u041a\u0430\u0436\u0434\u044b\u0439 \u0434\u0432\u0438\u0436\u043e\u043a \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 <code>typeof THREE<\/code>, \u0438 \u043f\u0440\u0438 \u0441\u0431\u043e\u0435 CDN \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043e\u0442\u043a\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0438\u043d\u043b\u0430\u0439\u043d\u043e\u0432\u044b\u0439 2D-canvas: \u0442\u043e \u0436\u0435 \u043f\u043e\u043b\u0435 \u0447\u0430\u0441\u0442\u0438\u0446, \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u043e\u0431\u044b\u0447\u043d\u044b\u043c <code>getContext('2d')<\/code> \u0431\u0435\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u0421\u0435\u043c\u044c \u0432\u043e\u043b\u043d\u043e\u0432\u044b\u0445 \u043b\u0438\u043d\u0438\u0439 \u0438\u0437 \u0442\u043e\u0447\u0435\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u0440\u0430\u0441\u0441\u044b\u043f\u0430\u044e\u0442\u0441\u044f \u0432 \u044f\u0440\u043a\u0438\u0435 \u00ab\u0430\u0442\u043e\u043c\u044b\u00bb \u0438 \u043f\u0440\u0443\u0436\u0438\u043d\u044f\u0442 \u043e\u0431\u0440\u0430\u0442\u043d\u043e:<\/p>\n<pre><code class=\"javascript\">const LINES=7, R=92, K=0.072, DAMP=0.84;function homeY(x,i,phase){  const cy=h*0.40, amp=h*0.16, spread=h*0.028;  return cy + Math.sin((x\/w)*5+phase)*amp*Math.cos(phase*0.6)            + (i-(LINES-1)\/2)*spread;}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041d\u0430 \u0445\u043e\u0440\u043e\u0448\u0435\u043c \u043a\u0430\u043d\u0430\u043b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0438\u0434\u0438\u0442 3D-\u043e\u0431\u043b\u0430\u043a\u043e \u043d\u0430 Three.js, \u043d\u0430 \u043f\u043b\u043e\u0445\u043e\u043c (\u0438\u043b\u0438 \u0441\u043e \u0441\u0442\u0430\u0440\u044b\u043c WebGL) \u2014 \u043b\u0451\u0433\u043a\u0443\u044e 2D-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0432\u043c\u0435\u0441\u0442\u043e \u043f\u0443\u0441\u0442\u043e\u0442\u044b.<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ee5\/65f\/1bd\/ee565f1bd9f504913329e7b8b3ad7f69.jpg\" alt=\"\u041f\u0440\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0435 \u043b\u043e\u0433\u043e\u0442\u0438\u043f \u0440\u0430\u0441\u0441\u044b\u043f\u0430\u0435\u0442\u0441\u044f: \u0447\u0430\u0441\u0442\u0438\u0446\u044b \u0440\u0430\u0437\u043b\u0435\u0442\u0430\u044e\u0442\u0441\u044f \u0438 \u043e\u0441\u0435\u0434\u0430\u044e\u0442 \u043e\u0431\u043b\u0430\u043a\u043e\u043c. \u0422\u043e\u0442 \u0436\u0435 \u043c\u0430\u0441\u0441\u0438\u0432 \u0442\u043e\u0447\u0435\u043a, \u0434\u0440\u0443\u0433\u0430\u044f \u0444\u0430\u0437\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/ee5\/65f\/1bd\/ee565f1bd9f504913329e7b8b3ad7f69.jpg 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ee5\/65f\/1bd\/ee565f1bd9f504913329e7b8b3ad7f69.jpg 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041f\u0440\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0435 \u043b\u043e\u0433\u043e\u0442\u0438\u043f \u0440\u0430\u0441\u0441\u044b\u043f\u0430\u0435\u0442\u0441\u044f: \u0447\u0430\u0441\u0442\u0438\u0446\u044b \u0440\u0430\u0437\u043b\u0435\u0442\u0430\u044e\u0442\u0441\u044f \u0438 \u043e\u0441\u0435\u0434\u0430\u044e\u0442 \u043e\u0431\u043b\u0430\u043a\u043e\u043c. \u0422\u043e\u0442 \u0436\u0435 \u043c\u0430\u0441\u0441\u0438\u0432 \u0442\u043e\u0447\u0435\u043a, \u0434\u0440\u0443\u0433\u0430\u044f \u0444\u0430\u0437\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/figcaption><\/div>\n<\/figure>\n<p><strong>\u041e\u0434\u0438\u043d \u0434\u0432\u0438\u0436\u043e\u043a \u2014 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0430\u0439\u0442\u043e\u0432<\/strong><\/p>\n<p>\u0412\u0430\u0439\u0431\u043a\u043e\u0434 \u043e\u043a\u0443\u043f\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0434\u0438\u0441\u0442\u0430\u043d\u0446\u0438\u0438 \u2014 \u043a\u043e\u0433\u0434\u0430 \u0438\u0437 \u0440\u0430\u0437\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432\u044b\u0440\u0430\u0441\u0442\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u0434\u0432\u0438\u0436\u043e\u043a. \u041e\u0431\u0430 \u043f\u0443\u0442\u0438 \u044d\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442, \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e-\u0440\u0430\u0437\u043d\u043e\u043c\u0443.<\/p>\n<p>\u0412 \u0432\u0430\u043d\u0438\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0442\u043a\u0435 (\u00ab\u0422\u043e\u0447\u043a\u0430 \u0441\u0431\u043e\u0440\u043a\u0438\u00bb) \u0432\u043e\u043b\u043d\u0430 \u2014 \u044d\u0442\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 (<code>setupWave3D<\/code>). \u0427\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043f\u0435\u0440\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d \u043f\u043e\u0434 \u0434\u0440\u0443\u0433\u0443\u044e \u043f\u0430\u043b\u0438\u0442\u0440\u0443, \u044f \u043f\u043e\u0434\u0430\u044e \u0432 \u043d\u0435\u0451 \u0447\u0435\u0442\u044b\u0440\u0435 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0445 \u0432\u0435\u043a\u0442\u043e\u0440\u0430 \u0438 \u043d\u0435 \u0442\u0440\u043e\u0433\u0430\u044e \u0448\u0435\u0439\u0434\u0435\u0440. \u0421\u0430\u043c \u043b\u0435\u043d\u0434\u0438\u043d\u0433 \u043f\u0440\u043e\u0448\u0451\u043b \u0432\u043e\u0441\u0435\u043c\u044c \u0432\u0435\u0440\u0441\u0438\u0439: \u043f\u0435\u0440\u0432\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0432\u0435\u0441\u0438\u043b\u0430 44 \u041a\u0411, \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u2014 148 \u041a\u0411. \u0412\u0435\u0441 \u0432\u044b\u0440\u043e\u0441 \u0432\u0442\u0440\u043e\u0435 \u0441 \u043b\u0438\u0448\u043d\u0438\u043c, \u0438 \u043f\u043e\u0447\u0442\u0438 \u0432\u0435\u0441\u044c \u043f\u0440\u0438\u0440\u043e\u0441\u0442 \u2014 \u043a\u043e\u0434 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432.<\/p>\n<p>\u0412 Three.js-\u0432\u0435\u0442\u043a\u0435 \u0434\u0432\u0438\u0436\u043e\u043a \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u044b\u043d\u0435\u0441\u0435\u043d \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u043d\u0430 S3, \u0438 \u0428\u043a\u043e\u043b\u0430 \u0441 <a href=\"http:\/\/aimipt.ru\">aimipt.ru<\/a> \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u044e\u0442 \u043e\u0434\u043d\u0438 \u0438 \u0442\u0435 \u0436\u0435. \u041f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u043e\u0431\u043b\u0430\u043a\u043e-\u043b\u043e\u0433\u043e\u0442\u0438\u043f \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u0431\u0440\u0435\u043d\u0434 \u2014 \u044d\u0442\u043e \u0441\u043c\u0435\u043d\u0438\u0442\u044c <code>data-cloud-img<\/code> \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435, \u043a\u043e\u0434 \u0434\u0432\u0438\u0436\u043a\u0430 \u043d\u0435 \u0442\u0440\u043e\u0433\u0430\u0435\u0442\u0441\u044f \u0432\u043e\u0432\u0441\u0435.<\/p>\n<p>\u041f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0440\u0430\u0437\u0440\u043e\u0441\u043b\u043e\u0441\u044c \u0434\u0430\u043b\u044c\u0448\u0435 \u0434\u0432\u0443\u0445 \u0441\u0430\u0439\u0442\u043e\u0432: \u0442\u043e\u0442 \u0436\u0435 <code>brain.js<\/code> \u043a\u0440\u0443\u0442\u0438\u0442\u0441\u044f \u0435\u0449\u0451 \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u043c\u0430\u0433\u0438\u0441\u0442\u0440\u0430\u0442\u0443\u0440\u044b <a href=\"http:\/\/techpred.online\">techpred.online<\/a>, \u043d\u0430 \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u0435 \u0448\u043a\u043e\u043b\u044b, \u0432 \u043a\u0432\u0438\u0437\u0435 \u0438 \u043d\u0430 \u043a\u043e\u043d\u043a\u0443\u0440\u0441\u0435 \u044d\u0441\u0441\u0435. \u0412\u0435\u0437\u0434\u0435 \u043e\u0434\u0438\u043d \u0434\u0432\u0438\u0436\u043e\u043a, \u0440\u0430\u0437\u043d\u0430\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u0430\u0441\u043a\u0430.<\/p>\n<p>\u041d\u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u043c\u0430\u0433\u0438\u0441\u0442\u0440\u0430\u0442\u0443\u0440\u044b \u043e\u043d \u043b\u0435\u043f\u0438\u0442 \u0438\u0437 \u0447\u0430\u0441\u0442\u0438\u0446 \u043b\u043e\u0433\u043e\u0442\u0438\u043f \u0424\u0438\u0437\u0442\u0435\u0445\u0430 (<code>phystech_mask.png<\/code>); \u043c\u0430\u0441\u043a\u0438 \u043b\u0435\u0436\u0430\u0442 \u0432 \u043e\u0434\u043d\u043e\u043c \u0431\u0430\u043a\u0435\u0442\u0435 \u0438 \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043e\u0434\u043d\u0438\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c. \u0418\u0442\u043e\u0433\u043e \u043e\u0434\u0438\u043d Three.js-\u0434\u0432\u0438\u0436\u043e\u043a \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0435\u0442 \u043f\u043e\u043b\u0434\u044e\u0436\u0438\u043d\u044b \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u043e\u0432.<\/p>\n<p><strong>\u0415\u0449\u0451 \u043e\u0434\u0438\u043d \u043f\u0440\u0438\u0451\u043c: \u0440\u044f\u0431\u044c \u043f\u043e \u0436\u0438\u0432\u043e\u043c\u0443 \u0444\u043e\u0442\u043e<\/strong><\/p>\n<p>\u041d\u0435 \u0432\u0441\u0435 \u00ab\u0434\u043e\u0440\u043e\u0433\u0438\u0435\u00bb \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u2014 \u044d\u0442\u043e \u0447\u0430\u0441\u0442\u0438\u0446\u044b \u0438 \u043f\u0440\u043e\u0446\u0435\u0434\u0443\u0440\u043d\u0430\u044f \u0432\u043e\u0434\u0430. \u0418\u043d\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u043e\u0436\u0438\u0432\u0438\u0442\u044c \u043e\u0431\u044b\u0447\u043d\u0443\u044e \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u044e. \u041d\u0430 \u043c\u043e\u0451\u043c \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u0435 \u043f\u0440\u043e \u0440\u0435\u043b\u043e\u043a\u0430\u0446\u0438\u044e \u0432 \u0411\u0440\u0430\u0437\u0438\u043b\u0438\u044e (\u0442\u043e\u0436\u0435 Tilda) \u043f\u0435\u0440\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d \u2014 \u0430\u044d\u0440\u043e\u0444\u043e\u0442\u043e \u043c\u043e\u0441\u0442\u0430 \u043d\u0430\u0434 \u043e\u043a\u0435\u0430\u043d\u043e\u043c, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043e\u0442 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u0440\u0430\u0441\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0440\u044f\u0431\u044c, \u043a\u0430\u043a \u043f\u043e \u0432\u043e\u0434\u0435.<\/p>\n<p>\u0421\u0434\u0435\u043b\u0430\u043d\u043e \u0441\u043d\u043e\u0432\u0430 \u043d\u0430 \u0433\u043e\u043b\u043e\u043c WebGL, \u0431\u0435\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a. Canvas \u0433\u0440\u0443\u0437\u0438\u0442 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u044e \u043a\u0430\u043a \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443, \u0430 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043d\u044b\u0439 \u0448\u0435\u0439\u0434\u0435\u0440 \u0447\u0438\u0442\u0430\u0435\u0442 \u0435\u0451 \u0438 \u0438\u0441\u043a\u0430\u0436\u0430\u0435\u0442 UV-\u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u2014 \u044d\u0442\u043e \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0442\u043e\u0447\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b, \u0441\u0434\u0432\u0438\u043d\u0443\u043b \u0438\u0445, \u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u00ab\u043f\u043e\u0435\u0445\u0430\u043b\u0430\u00bb. \u0420\u044f\u0431\u044c \u0440\u0430\u0434\u0438\u0430\u043b\u044c\u043d\u043e \u0440\u0430\u0441\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043e\u0442 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043c\u044b\u0448\u0438 \u0438 \u0437\u0430\u0442\u0443\u0445\u0430\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0437\u0430 \u043f\u043e\u043b\u0442\u043e\u0440\u044b \u0441\u0435\u043a\u0443\u043d\u0434\u044b. \u0421\u0430\u043c \u0448\u0435\u0439\u0434\u0435\u0440 \u044f \u043f\u0435\u0440\u0435\u043d\u0451\u0441 \u0438\u0437 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0441\u0432\u043e\u0435\u0433\u043e \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u0430 \u2014 \u0435\u0449\u0451 \u043e\u0434\u0438\u043d \u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u043c\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430.<\/p>\n<pre><code>\/\/ \u0440\u044f\u0431\u044c \u043f\u043e\u0434\u043c\u0435\u0448\u0438\u0432\u0430\u0435\u0442 \u0430\u043a\u0446\u0435\u043d\u0442\u043d\u044b\u0439 \u0446\u0432\u0435\u0442 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445 \u0433\u0440\u0435\u0431\u043d\u044f \u0432\u043e\u043b\u043d\u044bbaseColor.rgb = mix(baseColor.rgb, accent, clamp(waveIntensity, 0.0, 0.32));gl_FragColor = baseColor;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0414\u0435\u0433\u0440\u0430\u0434\u0430\u0446\u0438\u044f \u0447\u0435\u0441\u0442\u043d\u0430\u044f: \u0435\u0441\u043b\u0438 WebGL \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0438\u043b\u0438 \u0432\u043a\u043b\u044e\u0447\u0451\u043d <code>prefers-reduced-motion<\/code>, canvas \u043f\u0440\u044f\u0447\u0435\u0442\u0441\u044f \u0438 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043e\u0431\u044b\u0447\u043d\u044b\u0439 CSS-\u0444\u043e\u043d \u0441 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0435\u0439.<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b70\/a9d\/3c7\/b70a9d3c73dc2409d27a02eae8aaf86a.jpg\" alt=\"\u0412\u0442\u043e\u0440\u043e\u0439 \u0441\u0430\u0439\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0442\u0435 \u0436\u0435 \u0444\u0430\u0439\u043b\u044b \u0434\u0432\u0438\u0436\u043a\u0430. \u041f\u043e\u043c\u0435\u043d\u044f\u043b\u0430\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u0430\u0441\u043a\u0430: \u0432\u043c\u0435\u0441\u0442\u043e \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430 \u043a\u0430\u0444\u0435\u0434\u0440\u044b \u2014 \u0431\u0443\u043a\u0432\u0430 \u00ab\u042e\u00bb \u043e\u0444\u0438\u0441\u0430 \u0441\u0442\u0443\u0434\u0435\u043d\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043f\u0440\u0435\u0434\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0430\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/b70\/a9d\/3c7\/b70a9d3c73dc2409d27a02eae8aaf86a.jpg 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b70\/a9d\/3c7\/b70a9d3c73dc2409d27a02eae8aaf86a.jpg 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0412\u0442\u043e\u0440\u043e\u0439 \u0441\u0430\u0439\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0442\u0435 \u0436\u0435 \u0444\u0430\u0439\u043b\u044b \u0434\u0432\u0438\u0436\u043a\u0430. \u041f\u043e\u043c\u0435\u043d\u044f\u043b\u0430\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u0430\u0441\u043a\u0430: \u0432\u043c\u0435\u0441\u0442\u043e \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430 \u043a\u0430\u0444\u0435\u0434\u0440\u044b \u2014 \u0431\u0443\u043a\u0432\u0430 \u00ab\u042e\u00bb \u043e\u0444\u0438\u0441\u0430 \u0441\u0442\u0443\u0434\u0435\u043d\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043f\u0440\u0435\u0434\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0430<\/figcaption><\/div>\n<\/figure>\n<p><strong>\u0411\u043e\u043d\u0443\u0441: \u0432\u0430\u0439\u0431\u043a\u043e\u0434 \u0445\u043e\u0440\u043e\u0448 \u0432 \u043e\u0434\u043d\u043e\u0440\u0430\u0437\u043e\u0432\u044b\u0445 \u0443\u0442\u0438\u043b\u0438\u0442\u0430\u0445<\/strong><\/p>\n<p>\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u0431\u043e\u043b\u044c \u043d\u0430 \u043a\u0443\u0440\u0441\u0435 \u0431\u044b\u043b\u0430 \u0432 \u0434\u0430\u043d\u043d\u044b\u0445, \u0430 \u043d\u0435 \u0432 \u0432\u0435\u0431\u0435, \u2014 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0438 \u043f\u0440\u0435\u043f\u043e\u0434\u0430\u0432\u0430\u0442\u0435\u043b\u0435\u0439. \u0421\u043d\u0438\u043c\u043a\u0438 \u0441 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0444\u043e\u043d\u0430\u043c\u0438, \u0430 \u043d\u0430 \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u0435 \u0438\u043c \u0432\u0441\u0435\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043d\u0430 \u0435\u0434\u0438\u043d\u043e\u043c \u0442\u0451\u043c\u043d\u043e-\u0431\u0438\u0440\u044e\u0437\u043e\u0432\u043e\u043c \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0435. \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0440\u0430\u0434\u0438 \u044d\u0442\u043e\u0433\u043e Photoshop \u0438 \u0440\u0443\u043a\u0430\u043c\u0438 \u0432\u044b\u0440\u0435\u0437\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u2014 \u0434\u043e\u043b\u0433\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u0443\u0442\u0438\u043b\u0438\u0442\u0443.<\/p>\n<p>\u0422\u043e\u0447\u043d\u0435\u0435, \u0432\u043e\u0441\u0435\u043c\u044c \u0432\u0435\u0440\u0441\u0438\u0439 \u0443\u0442\u0438\u043b\u0438\u0442\u044b \u2014 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430: \u043e\u0442 \u043d\u0430\u0438\u0432\u043d\u043e\u0433\u043e \u043f\u043e\u0440\u043e\u0433\u0430 \u043f\u043e RGB \u043a \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 rembg, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0440\u0435\u0437\u0430\u0435\u0442 \u0444\u043e\u043d \u043d\u0435\u0439\u0440\u043e\u0441\u0435\u0442\u044c\u044e, \u0438 \u0434\u0430\u043b\u044c\u0448\u0435 \u043a \u0433\u0438\u0431\u0440\u0438\u0434\u0443 \u0438\u0437 HSV-\u043c\u0430\u0441\u043e\u043a \u0438 \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043a\u0440\u0443\u0433\u0430, \u0441\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u043f\u043e AND.<\/p>\n<p>\u0421\u0430\u043c\u044b\u043c \u043d\u0435\u043e\u0447\u0435\u0432\u0438\u0434\u043d\u044b\u043c \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u043a\u0430\u0434\u0440 \u0441\u043e \u0441\u0432\u0435\u0442\u043b\u044b\u043c\u0438 \u0432\u043e\u043b\u043e\u0441\u0430\u043c\u0438 \u043d\u0430 \u0436\u0451\u043b\u0442\u043e\u043c \u0444\u043e\u043d\u0435: \u043d\u0430\u0438\u0432\u043d\u0430\u044f \u043c\u0430\u0441\u043a\u0430 \u043f\u043e \u0446\u0432\u0435\u0442\u0443 \u0441\u0440\u0435\u0437\u0430\u043b\u0430 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0444\u043e\u043d\u043e\u043c \u0438 \u0432\u043e\u043b\u043e\u0441\u044b. \u0421\u043f\u0430\u0441\u0430\u0435\u0442 \u043f\u043e\u0440\u043e\u0433 \u043f\u043e \u043d\u0430\u0441\u044b\u0449\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u2014 \u0444\u043e\u043d \u043d\u0430\u0441\u044b\u0449\u0435\u043d\u043d\u043e-\u0436\u0451\u043b\u0442\u044b\u0439, \u0430 \u0431\u043b\u043e\u043d\u0434 \u043d\u0435\u0442 (<code>hue<\/code>, <code>sat<\/code>, <code>val<\/code> \u0437\u0434\u0435\u0441\u044c \u2014 \u043a\u0430\u043d\u0430\u043b\u044b HSV, \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u043d\u043d\u044b\u0435 \u043f\u043e \u0432\u0441\u0435\u043c\u0443 \u043c\u0430\u0441\u0441\u0438\u0432\u0443 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439):<\/p>\n<pre><code class=\"python\"># \u0436\u0451\u043b\u0442\u044b\u0439 \u0444\u043e\u043d: H 20-58, S&gt;0.55 (\u0432\u043e\u043b\u043e\u0441\u044b \u0431\u043b\u043e\u043d\u0434 S\u22480.3-0.5 \u2014 \u043d\u0435 \u0437\u0430\u0434\u0435\u0432\u0430\u044e\u0442\u0441\u044f)yellow_bg = (hue&gt;20)&amp;(hue&lt;58)&amp;(sat&gt;0.55)&amp;(val&gt;0.55)<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0412\u043e\u0441\u0435\u043c\u044c \u0432\u0435\u0440\u0441\u0438\u0439 \u0441\u043a\u0440\u0438\u043f\u0442\u0430 \u043f\u043e\u0434 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u0444\u043e\u0442\u043e \u043f\u043e \u043e\u0449\u0443\u0449\u0435\u043d\u0438\u044f\u043c \u0432\u044b\u0448\u043b\u0438 \u0431\u044b\u0441\u0442\u0440\u0435\u0435, \u0447\u0435\u043c \u0432\u043e\u0437\u043d\u044f \u0441 \u043f\u044f\u0442\u044c\u044e \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0444\u043e\u043d\u0430\u043c\u0438 \u0432\u0440\u0443\u0447\u043d\u0443\u044e; \u0441\u0435\u043a\u0443\u043d\u0434\u043e\u043c\u0435\u0440 \u044f \u043d\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u043b. \u0417\u0430\u0442\u043e \u0443\u0442\u0438\u043b\u0438\u0442\u0430 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u043c\u0430\u044f: \u043f\u0440\u0430\u0432\u043a\u0438 \u0432\u0438\u0434\u043d\u043e \u0432 \u043a\u043e\u0434\u0435, \u0430 \u043d\u0435 \u0432 \u0434\u0443\u0445\u0435 \u00ab\u044f \u0442\u0430\u043c \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u0432\u043e\u0434\u0438\u043b \u043b\u0430\u0441\u0441\u043e\u00bb.<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/800\/18a\/144\/80018a144f56aa6a8d0c03337f65ad98.jpg\" alt=\"\u041d\u0438\u0436\u0435 \u043f\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0442\u0435 \u0436\u0435 \u0447\u0430\u0441\u0442\u0438\u0446\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0444\u043e\u043d\u043e\u043c \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u2014 \u0434\u0432\u0438\u0436\u043e\u043a \u043e\u0434\u0438\u043d, \u0430 \u0441\u0446\u0435\u043d \u043d\u0430 \u043d\u0451\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/800\/18a\/144\/80018a144f56aa6a8d0c03337f65ad98.jpg 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/800\/18a\/144\/80018a144f56aa6a8d0c03337f65ad98.jpg 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041d\u0438\u0436\u0435 \u043f\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0442\u0435 \u0436\u0435 \u0447\u0430\u0441\u0442\u0438\u0446\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0444\u043e\u043d\u043e\u043c \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u2014 \u0434\u0432\u0438\u0436\u043e\u043a \u043e\u0434\u0438\u043d, \u0430 \u0441\u0446\u0435\u043d \u043d\u0430 \u043d\u0451\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e<\/figcaption><\/div>\n<\/figure>\n<p><strong>\u041a\u0430\u043a \u044d\u0442\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u0432\u0430\u0439\u0431\u043a\u043e\u0434\u0438\u043b\u043e\u0441\u044c<\/strong><\/p>\n<p>\u041a\u043e\u0434 \u2014 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0430 \u0434\u0435\u043b\u0430. \u0412\u0442\u043e\u0440\u0430\u044f \u2014 \u043a\u0430\u043a \u0441\u0442\u0430\u0432\u0438\u0442\u0441\u044f \u0437\u0430\u0434\u0430\u0447\u0430, \u043a\u043e\u0433\u0434\u0430 \u0422\u0417 \u043d\u0435\u0442, \u0430 \u0435\u0441\u0442\u044c \u0436\u0438\u0432\u043e\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441 \u0441\u043e\u0437\u0432\u043e\u043d\u0430\u043c\u0438.<\/p>\n<p>\u041f\u0440\u0430\u0432\u043a\u0438 \u043d\u0430 \u043b\u0435\u043d\u0434\u0438\u043d\u0433 \u00ab\u0422\u043e\u0447\u043a\u0438 \u0441\u0431\u043e\u0440\u043a\u0438\u00bb \u043c\u043d\u0435 \u043d\u0435 \u043f\u0440\u0438\u0441\u044b\u043b\u0430\u043b\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u043c. \u041f\u0440\u0438\u0441\u044b\u043b\u0430\u043b\u0438 \u0442\u0440\u0430\u043d\u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0441\u043e\u0437\u0432\u043e\u043d\u043e\u0432 \u043e\u0440\u0433\u043a\u043e\u043c\u0438\u0442\u0435\u0442\u0430. \u042f \u043e\u0442\u0434\u0430\u0432\u0430\u043b \u0438\u0445 Claude Code, \u0438 \u043e\u043d \u0441\u0430\u043c \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u043b \u0438\u0437 \u043d\u0438\u0445 \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u0440\u0430\u0432\u043e\u043a \u0441 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u0430\u043c\u0438 P0\/P1\/P2: \u0431\u043e\u043b\u044c\u0448\u0435 \u0441\u043e\u0442\u043d\u0438 \u043f\u0443\u043d\u043a\u0442\u043e\u0432, \u043a\u0430\u0436\u0434\u044b\u0439 \u0441 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043c\u0435\u0442\u043a\u043e\u0439 \u0446\u0438\u0442\u0430\u0442\u044b.<\/p>\n<p>\u041e\u0434\u0438\u043d \u043c\u043e\u043c\u0435\u043d\u0442 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0435\u043d. \u041b\u0435\u043d\u0434\u0438\u043d\u0433 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u043b \u0441\u0442\u0430\u0440\u0442 \u0432 11:00, \u0430 \u0432 \u0442\u0440\u0430\u043d\u0441\u043a\u0440\u0438\u043f\u0442\u0435 \u0437\u0432\u0443\u0447\u0430\u043b\u043e \u00ab\u0441 10 \u0443\u0442\u0440\u0430\u00bb. Claude \u043d\u0435 \u0441\u0442\u0430\u043b \u043c\u043e\u043b\u0447\u0430 \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u043e\u0434\u043d\u043e \u0438\u0437 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u2014 \u043e\u043d \u0437\u0430\u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043b \u044d\u0442\u043e \u043a\u0430\u043a P0-\u0431\u043b\u043e\u043a\u0435\u0440 \u0441 \u0444\u043e\u0440\u043c\u0443\u043b\u0438\u0440\u043e\u0432\u043a\u043e\u0439 \u00ab\u043d\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043f\u0440\u043e\u043c\u043e \u0441 \u0440\u0430\u0441\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u0435\u043c\u00bb \u0438 \u044d\u0441\u043a\u0430\u043b\u0438\u0440\u043e\u0432\u0430\u043b. \u041a\u043e\u043d\u0444\u043b\u0438\u043a\u0442 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0435\u043b\u044c\u0437\u044f \u00ab\u0440\u0435\u0448\u0438\u0442\u044c\u00bb \u0443\u0433\u0430\u0434\u044b\u0432\u0430\u043d\u0438\u0435\u043c: \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0437\u043d\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0442\u043e\u0440\u044b.<\/p>\n<p>\u041e\u0434\u043d\u0430\u0436\u0434\u044b \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u0441\u043f\u0438\u043a\u0435\u0440\u043e\u0432 \u0440\u043e\u043b\u044c \u043e\u0434\u043d\u043e\u0433\u043e \u0441\u043b\u0438\u043f\u043b\u0430\u0441\u044c \u0441 \u0431\u0438\u043e \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0431\u0435\u0437 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u0435\u043b\u044f \u2014 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0431\u0430\u0433 \u043a\u043e\u043d\u043a\u0430\u0442\u0435\u043d\u0430\u0446\u0438\u0438, \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0432\u0448\u0438\u0439 \u0430\u0431\u0440\u0430\u043a\u0430\u0434\u0430\u0431\u0440\u043e\u0439 \u0432 \u043f\u043e\u0434\u043f\u0438\u0441\u0438.<\/p>\n<p>\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043c\u0443\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0431\u044b\u043b \u043d\u0435\u0439\u043c\u0438\u043d\u0433: \u0440\u0430\u0431\u043e\u0447\u0435\u0435 \u00ab\u0421\u0434\u0432\u0438\u0433\u00bb (\u043e\u0442\u0441\u044e\u0434\u0430 \u0438 <code>sdvig-<\/code> \u0432 \u0438\u043c\u0435\u043d\u0438 \u0444\u0430\u0439\u043b\u0430) \u0432 \u0444\u0438\u043d\u0430\u043b\u0435 \u0441\u0442\u0430\u043b\u043e \u00ab\u0422\u043e\u0447\u043a\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438\u00bb. \u041a\u0430\u0436\u0434\u043e\u0435 \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u0435 \u2014 \u044d\u0442\u043e \u043f\u0440\u0430\u0432\u043a\u0430 \u043f\u043e \u0432\u0441\u0435\u043c\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0443: \u0435\u0449\u0451 \u043e\u0434\u0438\u043d \u0434\u043e\u0432\u043e\u0434 \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u044b \u0432 \u0434\u0430\u043d\u043d\u044b\u0445, \u0430 \u043d\u0435 \u0432\u0448\u0438\u0432\u0430\u0442\u044c \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443.<\/p>\n<p>\u0410 \u043c\u043e\u044f \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u0430\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u0432 \u0440\u0430\u0431\u043e\u0442\u0435 \u0437\u0432\u0443\u0447\u0430\u043b\u0430 \u043f\u0440\u043e\u0441\u0442\u043e: \u00ab\u043e\u0442\u043a\u0440\u043e\u0439 \u0432 Playwright \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044c, \u0447\u0442\u043e \u0432\u0441\u0451 \u0442\u0430\u043a, \u043a\u0430\u043a \u0437\u0430\u0434\u0443\u043c\u0430\u043d\u043e\u00bb. \u041f\u043e\u0441\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0439 \u043a\u0440\u0443\u043f\u043d\u043e\u0439 \u043f\u0440\u0430\u0432\u043a\u0438 \u2014 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0433\u043e\u043d \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0430 \u043d\u0435 \u00ab\u043f\u043e \u043a\u043e\u0434\u0443 \u0434\u043e\u043b\u0436\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c\u00bb.<\/p>\n<p><strong>\u0413\u0440\u0430\u0431\u043b\u0438<\/strong><\/p>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u2014 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e, \u0447\u0442\u043e \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u043b\u043e\u043c\u0430\u043b\u043e\u0441\u044c.<\/p>\n<p><strong>CORS \u0441 \u0434\u0432\u043e\u0439\u043d\u044b\u043c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u043c \u2014 \u0444\u043e\u0440\u043c\u0430 \u00ab\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442\u00bb, \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0439 \u043d\u043e\u043b\u044c<\/strong><\/p>\n<p>\u0421\u0430\u043c\u0430\u044f \u0434\u043e\u0440\u043e\u0433\u0430\u044f \u0433\u0440\u0430\u0431\u043b\u044f \u0438\u0437 \u0432\u0441\u0435\u0445: \u043f\u043e\u0441\u043b\u0435 \u0434\u0435\u043f\u043b\u043e\u044f \u0444\u043e\u0440\u043c\u0430 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0430 \u0440\u0430\u0431\u043e\u0447\u0435\u0439 \u2014 \u043f\u043e\u043b\u044f \u043d\u0430 \u043c\u0435\u0441\u0442\u0435, \u043a\u043d\u043e\u043f\u043a\u0430 \u0436\u043c\u0451\u0442\u0441\u044f, \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442. \u0410 \u0432 \u0431\u0430\u0437\u0435 \u2014 \u043d\u043e\u043b\u044c.<\/p>\n<p>\u0417\u0430\u043f\u0440\u043e\u0441 \u043f\u0430\u0434\u0430\u043b \u0441 <code>Access-Control-Allow-Origin: <em>, <\/em><\/code> \u2014 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043f\u0440\u0438\u0448\u0451\u043b \u0434\u0432\u0430\u0436\u0434\u044b. \u042d\u0442\u043e \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a CORS, \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0441\u0435\u0440\u0432\u0435\u0440 \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u0435\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043e\u0442\u0432\u0435\u0442 \u0441 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0434\u043e\u043c\u0435\u043d\u0430. \u0415\u0433\u043e \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u043b\u0438 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e CORSMiddleware \u0432 FastAPI \u0438 <code>add_header<\/code> \u0432 nginx. \u041d\u0430 \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u044e\u0449\u0435\u043c\u0441\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043e\u0442\u0431\u0440\u0430\u043a\u043e\u0432\u044b\u0432\u0430\u043b \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 OPTIONS \u2014 \u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 POST \u0434\u043e \u0431\u044d\u043a\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u0443\u0445\u043e\u0434\u0438\u043b.<\/p>\n<p>\u041b\u0435\u0447\u0435\u043d\u0438\u0435 \u2014 \u0443\u0431\u0440\u0430\u0442\u044c <code>add_header<\/code> \u0438\u0437 nginx \u0438 \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c CORS \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435. \u0423\u0440\u043e\u043a: \u00ab\u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442\u00bb \u2014 \u044d\u0442\u043e \u0435\u0449\u0451 \u043d\u0435 \u00ab\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442\u00bb, \u0438 \u043f\u0440\u043e\u0433\u043e\u043d \u0432 Playwright \u043d\u0435 \u043e\u0442\u043c\u0435\u043d\u044f\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0432\u0441\u0435\u0433\u043e \u043f\u0443\u0442\u0438 \u0446\u0435\u043b\u0438\u043a\u043e\u043c: \u0444\u043e\u0440\u043c\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b\u0430, \u0431\u044d\u043a \u043f\u0440\u0438\u043d\u044f\u043b, \u0437\u0430\u043f\u0438\u0441\u044c \u043b\u0435\u0433\u043b\u0430 \u0432 \u0431\u0430\u0437\u0443.<\/p>\n<p><strong>Tilda T123 \u043b\u043e\u043c\u0430\u0435\u0442 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c DOM<\/strong><\/p>\n<p>\u041b\u0435\u043d\u0434\u0438\u043d\u0433\u0438 \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432 Tilda \u0447\u0435\u0440\u0435\u0437 \u0431\u043b\u043e\u043a T123 \u2014 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0439 HTML. Tilda \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0441\u0432\u043e\u0438\u043c\u0438 \u043e\u0431\u0451\u0440\u0442\u043a\u0430\u043c\u0438 \u0438 \u043b\u043e\u043c\u0430\u0435\u0442 \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u0443\u044e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c DOM. \u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b, \u0437\u0430\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u00ab\u043f\u043e\u0442\u043e\u043c\u043e\u043a \u0442\u0430\u043a\u043e\u0433\u043e-\u0442\u043e wrapper \u043f\u043e id\u00bb, \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u044e\u0442 \u043f\u043e\u043f\u0430\u0434\u0430\u0442\u044c.<\/p>\n<p>\u041f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u043f\u043b\u043e\u0441\u043a\u0438\u0439 CSS: \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 \u0430\u0434\u0440\u0435\u0441\u0443\u0435\u0442\u0441\u044f \u0441\u0430\u043c \u043f\u043e \u0441\u0435\u0431\u0435, \u0431\u0435\u0437 \u0446\u0435\u043f\u043e\u0447\u0435\u043a \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p><strong>\u0417\u0430\u043b\u0438\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u043e\u0435 \u0432 Tilda \u2014 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u0432\u0435\u0441\u0442<\/strong><\/p>\n<p>\u0421\u0430\u043c \u0434\u0435\u043f\u043b\u043e\u0439 \u0432 Tilda \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u043c \u0431\u043e\u043b\u0438. \u041a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 HTML \u0436\u0438\u0432\u0451\u0442 \u0432 ACE \u2014 \u044d\u0442\u043e \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043a\u043e\u0434\u0430, \u0442\u043e\u0442 \u0436\u0435 \u0434\u0432\u0438\u0436\u043e\u043a, \u0447\u0442\u043e \u0432 \u043e\u0431\u043b\u0430\u0447\u043d\u044b\u0445 IDE. \u0418 <code>editor.setValue()<\/code> \u043c\u043e\u043b\u0447\u0430 \u043d\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u043b\u0441\u044f: Tilda \u043f\u0438\u0448\u0435\u0442 \u0438\u0437 \u0441\u043a\u0440\u044b\u0442\u043e\u0439 <code>textarea[name=\"code\"]<\/code>, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043d\u0430\u0434\u043e \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0443\u043a\u0430\u043c\u0438 \u0438 \u0434\u0451\u0440\u043d\u0443\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u044f <code>input<\/code>\/<code>change<\/code>.<\/p>\n<p>\u0421\u043a\u0440\u0438\u043f\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u043b\u0441\u044f \u0440\u0430\u0437 \u043f\u044f\u0442\u044c, \u043f\u043e\u043a\u0430 \u043d\u0435 \u0441\u043b\u043e\u0436\u0438\u043b\u0430\u0441\u044c \u0440\u0430\u0431\u043e\u0447\u0430\u044f \u0441\u0432\u044f\u0437\u043a\u0430: <code>setValue<\/code> + <code>session.setValue<\/code> + \u0440\u0443\u0447\u043d\u043e\u0439 sync textarea + dispatch. \u0412 \u043a\u043e\u0434\u0435 \u0442\u0430\u043a \u0438 \u043e\u0441\u0442\u0430\u043b\u0430\u0441\u044c \u043f\u043e\u043c\u0435\u0442\u043a\u0430 <code>\/\/ CRITICAL: sync textarea<\/code>. \u041e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043b\u0438\u043c\u0438\u0442 \u2014 \u0443 \u043c\u0435\u043d\u044f payload \u0431\u043e\u043b\u044c\u0448\u0435 ~50 \u041a\u0411 \u043d\u0435 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u043b \u0441\u0442\u0440\u043e\u043a\u043e\u0439 \u0432 <code>evaluate<\/code>, \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0447\u0435\u0440\u0435\u0437 fetch.<\/p>\n<p>\u0421\u0432\u0435\u0440\u0445\u0443 Tilda \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u043e\u043c \u043f\u0435\u0440\u0435\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u0432\u0441\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 \u0432 \u0441\u0432\u043e\u0439 \u043e\u0440\u0430\u043d\u0436\u0435\u0432\u044b\u0439, \u0442\u0430\u043a \u0447\u0442\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0446\u0432\u0435\u0442 \u0441\u0441\u044b\u043b\u043a\u0438 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441 <code>!important<\/code>. \u0418 \u043f\u043e\u0441\u043b\u0435 \u00ab\u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0439\u00bb \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0443 \u043d\u0435\u043b\u044c\u0437\u044f \u0434\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0438\u0437-\u0437\u0430 \u043a\u044d\u0448\u0430. \u0412\u044b\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0441\u044f \u0440\u0438\u0442\u0443\u0430\u043b: \u0434\u0451\u0440\u043d\u0443\u0442\u044c live \u0441 <code>?nocache=&lt;timestamp&gt;<\/code> \u0438 \u043f\u043e\u0431\u0430\u0439\u0442\u043e\u0432\u043e \u0441\u0432\u0435\u0440\u0438\u0442\u044c, \u0447\u0442\u043e \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u0434.<\/p>\n<p>\u0410 \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u0430\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f, \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0448\u043b\u0430 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u044f, \u0443\u043f\u0430\u043b\u0430 \u043f\u0440\u044f\u043c\u043e \u043f\u043e\u0441\u0440\u0435\u0434\u0438 \u0434\u0435\u043f\u043b\u043e\u044f \u2014 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0438 \u0434\u043e\u0432\u043e\u0434\u0438\u0442\u044c \u0432\u0440\u0443\u0447\u043d\u0443\u044e.<\/p>\n<p><strong>\u041c\u0430\u0441\u043a\u0438 \u0447\u0430\u0441\u0442\u0438\u0446 \u2014 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043e \u0441\u0432\u043e\u0435\u0433\u043e CORS-\u0434\u043e\u043c\u0435\u043d\u0430<\/strong><\/p>\n<p>\u0414\u0432\u0438\u0436\u043e\u043a \u043e\u0431\u043b\u0430\u043a\u043e\u0432 \u0447\u0438\u0442\u0430\u0435\u0442 \u043f\u0438\u043a\u0441\u0435\u043b\u0438 PNG-\u043c\u0430\u0441\u043a\u0438 \u0447\u0435\u0440\u0435\u0437 <code>getImageData<\/code>, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u043b\u043e\u0436\u0438\u0442\u044c \u0447\u0430\u0441\u0442\u0438\u0446\u044b \u043f\u043e \u0444\u043e\u0440\u043c\u0435. \u0410 <code>drawImage<\/code> \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0441 \u0447\u0443\u0436\u043e\u0433\u043e \u0434\u043e\u043c\u0435\u043d\u0430 \u0431\u0435\u0437 CORS \u00ab\u043f\u0430\u0447\u043a\u0430\u0435\u0442\u00bb canvas, \u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0437\u0430 \u043d\u0438\u043c <code>getImageData<\/code> \u043f\u0430\u0434\u0430\u0435\u0442 \u0441 <code>SecurityError<\/code>. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0441\u0435 \u043c\u0430\u0441\u043a\u0438, \u0448\u0435\u0439\u0434\u0435\u0440\u044b \u0438 JS-\u0434\u0432\u0438\u0436\u043a\u0438 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043d\u0430 \u0441\u0432\u043e\u0451\u043c S3 \u0441 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u043c\u0438 CORS-\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430\u043c\u0438 \u0438 \u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0441 <code>crossOrigin='anonymous'<\/code>. \u0424\u043e\u0442\u043e \u0441\u043f\u0438\u043a\u0435\u0440\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043d\u0430 CDN \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430, \u0430 \u0432\u043e\u0442 \u0432\u0441\u0451, \u0447\u0442\u043e \u0434\u0432\u0438\u0436\u043e\u043a \u0447\u0438\u0442\u0430\u0435\u0442 \u043f\u043e\u043f\u0438\u043a\u0441\u0435\u043b\u044c\u043d\u043e, \u2014 \u043d\u0435\u0442.<\/p>\n<p><strong>v5 \u00ab\u043a\u0430\u043a \u0443 Stripe\u00bb \u2014 \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0439 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u0434\u043e\u0435\u0445\u0430\u043b<\/strong><\/p>\n<p>\u0421\u0442\u0438\u043b\u044c Stripe \u044f \u043f\u0440\u0438\u043d\u043e\u0441\u0438\u043b \u0438\u0437 <a href=\"http:\/\/DESIGN.md\">DESIGN.md<\/a> \u0435\u0449\u0451 \u0432 \u043c\u043e\u043a\u0430\u043f, \u0438 \u043e\u0434\u043d\u0430 \u0438\u0437 \u0432\u0435\u0440\u0441\u0438\u0439 \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u0430 \u2014 v5 \u00abStripe DS\u00bb \u2014 \u0431\u044b\u043b\u0430 \u0441\u043e\u0431\u0440\u0430\u043d\u0430 \u043f\u0440\u044f\u043c\u043e \u043f\u043e\u0434 \u043d\u0435\u0433\u043e. \u0421\u0432\u043e\u0439 mesh-gradient \u0432 \u0441\u0442\u0438\u043b\u0435 Stripe: \u043f\u0435\u0440\u0435\u043b\u0438\u0432\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u0446\u0432\u0435\u0442\u043d\u043e\u0439 \u0444\u043e\u043d, \u0433\u0434\u0435 \u0446\u0432\u0435\u0442\u0430 \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0441\u0435\u0442\u043a\u043e\u0439 \u0442\u043e\u0447\u0435\u043a. \u041e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 <code>stripe-gradient.js<\/code>, 113 \u0441\u0442\u0440\u043e\u043a, \u0448\u0443\u043c value-noise \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0432 \u0432\u0435\u0440\u0448\u0438\u043d\u043d\u043e\u043c \u0448\u0435\u0439\u0434\u0435\u0440\u0435.<\/p>\n<p>\u0422\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u043e \u043c\u043e\u0434\u043d\u043e. \u042f \u043e\u0442 \u043d\u0435\u0451 \u043e\u0442\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u0432 \u043f\u043e\u043b\u044c\u0437\u0443 3D-\u0432\u043e\u043b\u043d\u044b \u0441 \u0447\u0435\u0441\u0442\u043d\u044b\u043c \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u0438\u0435\u043c \u2014 \u043e\u043d\u0430 \u0437\u0440\u0435\u043b\u0438\u0449\u043d\u0435\u0435. \u0412\u044b\u0431\u0440\u043e\u0448\u0435\u043d\u043d\u044b\u0439 \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u2014 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430.<\/p>\n<p><strong>\u0414\u0435\u0433\u0440\u0430\u0434\u0430\u0446\u0438\u044f \u0434\u043b\u0438\u043d\u043d\u043e\u0439 \u0441\u0435\u0441\u0441\u0438\u0438<\/strong><\/p>\n<p>\u041a \u043a\u043e\u043d\u0446\u0443 \u0434\u043b\u0438\u043d\u043d\u043e\u0439 \u0441\u0435\u0441\u0441\u0438\u0438 \u0432 Claude Code \u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u0441\u043b\u043e\u043c\u0430\u043b \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0432\u044b\u0437\u043e\u0432\u043e\u0432 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432. \u041a\u043b\u0430\u0441\u0441\u0438\u043a\u0430: \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u043a\u043e\u043f\u0438\u0442\u0441\u044f, \u0438 tool-calls \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u043b\u043e\u043c\u0430\u0442\u044c\u0441\u044f. \u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0432\u044b\u0432\u043e\u0434 \u2014 \u0440\u0435\u0437\u0430\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0443 \u043d\u0430 \u0441\u0435\u0441\u0441\u0438\u0438 \u0438 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u0435 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442\u044b \u043d\u0430 \u0434\u0438\u0441\u043a, \u0430 \u043d\u0435 \u043f\u0440\u043e\u0434\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u043e\u0434\u043d\u0443 \u0433\u0438\u0433\u0430\u043d\u0442\u0441\u043a\u0443\u044e \u0441\u0435\u0441\u0441\u0438\u044e.<\/p>\n<p><strong>\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c<\/strong><\/p>\n<p>\u0422\u044f\u0436\u0451\u043b\u0430\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u043f\u0435\u0440\u0432\u043e\u043c \u044d\u043a\u0440\u0430\u043d\u0435 \u2014 \u044d\u0442\u043e \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0430, \u0438 \u0435\u0451 \u043d\u0435\u043b\u044c\u0437\u044f \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0432\u043a\u043b\u044e\u0447\u0451\u043d\u043d\u043e\u0439 \u0432\u0441\u0435\u043c \u043f\u043e\u0434\u0440\u044f\u0434. \u0421\u0440\u0430\u0437\u0443 \u043e\u0433\u043e\u0432\u043e\u0440\u044e\u0441\u044c: \u043f\u0440\u043e\u0444\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043e \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u043c \u0438 \u0437\u0430\u043c\u0435\u0440\u043e\u0432 FPS \u044f \u043d\u0435 \u0434\u0435\u043b\u0430\u043b. \u041d\u0438\u0436\u0435 \u0442\u043e, \u0447\u0442\u043e \u0437\u0430\u043b\u043e\u0436\u0435\u043d\u043e \u0432 \u043a\u043e\u0434, \u0430 \u043d\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0439.<\/p>\n<p><code>prefers-reduced-motion<\/code> \u0433\u0430\u0441\u0438\u0442 \u0432\u0441\u0451 \u0442\u044f\u0436\u0451\u043b\u043e\u0435 \u0432 \u043e\u0431\u043e\u0438\u0445 \u043f\u0443\u0442\u044f\u0445. \u041d\u0430 \u00ab\u0422\u043e\u0447\u043a\u0435 \u0441\u0431\u043e\u0440\u043a\u0438\u00bb \u043e\u0434\u0438\u043d media-query \u0443\u0431\u0438\u0440\u0430\u0435\u0442 WebGL-canvas \u0438 \u043e\u0431\u043d\u0443\u043b\u044f\u0435\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0412 Three.js-\u0432\u0435\u0442\u043a\u0435 \u0442\u043e\u0442 \u0436\u0435 \u0444\u043b\u0430\u0433 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043e\u0431\u043b\u0430\u043a\u0430 \u0447\u0430\u0441\u0442\u0438\u0446. \u0414\u043b\u044f \u043b\u044e\u0434\u0435\u0439 \u0441 \u0432\u0435\u0441\u0442\u0438\u0431\u0443\u043b\u044f\u0440\u043d\u043e\u0439 \u0447\u0443\u0432\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e \u0431\u0435\u0433\u0443\u0449\u0430\u044f \u0432\u043e\u0434\u0430 \u0438 \u043b\u0435\u0442\u0430\u044e\u0449\u0438\u0435 \u0447\u0430\u0441\u0442\u0438\u0446\u044b \u2014 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u0434\u0438\u0441\u043a\u043e\u043c\u0444\u043e\u0440\u0442, \u0442\u0430\u043a \u0447\u0442\u043e \u044d\u0442\u043e \u0432\u043e\u043f\u0440\u043e\u0441 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>\u041e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u043e \u043c\u0435\u043b\u043e\u0447\u0438, \u043d\u043e \u0432\u0430\u0436\u043d\u043e\u0435:<\/p>\n<ul>\n<li>\n<p><strong>\u041f\u043b\u043e\u0442\u043d\u043e\u0441\u0442\u044c \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0430 \u0441\u0432\u0435\u0440\u0445\u0443.<\/strong> <code>Math.min(devicePixelRatio, 2)<\/code>: \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0441 DPR 3 \u0440\u0435\u043d\u0434\u0435\u0440 \u0438\u0434\u0451\u0442 \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c \u0432 2x. \u0414\u043b\u044f \u0433\u043b\u0430\u0437\u0430 \u043f\u043e\u0447\u0442\u0438 \u043d\u0435\u0437\u0430\u043c\u0435\u0442\u043d\u043e, \u0430 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0434\u043b\u044f GPU \u0432 2,25 \u0440\u0430\u0437\u0430 \u043c\u0435\u043d\u044c\u0448\u0435 \u2014 \u043f\u043b\u043e\u0449\u0430\u0434\u044c \u0440\u0430\u0441\u0442\u0451\u0442 \u043a\u0430\u043a \u043a\u0432\u0430\u0434\u0440\u0430\u0442.<\/p>\n<\/li>\n<li>\n<p><strong>\u0412\u0441\u0435 scroll\/touch-\u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0438<\/strong> \u2014 <code>{passive:true}<\/code>, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0442\u043e\u0440\u043c\u043e\u0437\u0438\u0442\u044c \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0443.<\/p>\n<\/li>\n<li>\n<p><code><strong>IntersectionObserver<\/strong><\/code> \u0432\u043c\u0435\u0441\u0442\u043e \u0441\u043a\u0440\u043e\u043b\u043b-\u0441\u043f\u0430\u043c\u0430, \u0441 <code>unobserve()<\/code> \u043f\u043e\u0441\u043b\u0435 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p><strong>\u041e\u0431\u0444\u0443\u0441\u043a\u0430\u0446\u0438\u044f \u043f\u043e\u0447\u0442\u044b.<\/strong> \u0410\u0434\u0440\u0435\u0441 \u0432 \u043f\u043e\u0434\u0432\u0430\u043b\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0438\u0437 data-\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 <code>String.fromCharCode(64)<\/code> \u2014 \u0441\u043a\u0440\u0430\u043f\u0435\u0440\u044b \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u043e\u0433\u043e HTML \u0435\u0433\u043e \u043d\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442.<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0427\u0435\u043a-\u043b\u0438\u0441\u0442: \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u0441\u0430\u0439\u0442 \u043d\u0430 \u0432\u0430\u0439\u0431\u043a\u043e\u0434\u0435<\/strong><\/p>\n<ul>\n<li>\n<p><strong>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u043a\u0443\u0441, \u043f\u043e\u0442\u043e\u043c \u043a\u043e\u0434.<\/strong> \u0414\u0435\u0440\u0436\u0438 \u0441\u0442\u0438\u043b\u044c \u0432 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 \u2014 <a href=\"http:\/\/DESIGN.md\">DESIGN.md<\/a> \u0441 \u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438, \u0448\u043a\u0430\u043b\u043e\u0439 \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0438, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0438 Do\/Don&#8217;t. \u0410\u0433\u0435\u043d\u0442\u0443 \u043d\u0443\u0436\u0435\u043d \u0431\u043b\u044e\u043f\u0440\u0438\u043d\u0442, \u0441\u043b\u043e\u0432\u0435\u0441\u043d\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043e\u043d \u0442\u0440\u0430\u043a\u0442\u0443\u0435\u0442 \u043a\u0430\u043a \u0445\u043e\u0447\u0435\u0442.<\/p>\n<\/li>\n<li>\n<p><strong>\u041c\u043e\u043a\u0430\u043f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e, \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e.<\/strong> \u041a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044e \u0438 \u043f\u0430\u043b\u0438\u0442\u0440\u0443 \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0432 Claude Design \u0438 \u0437\u0430\u0431\u0440\u0430\u0442\u044c handoff-\u0431\u0430\u043d\u0434\u043b\u043e\u043c; \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0441\u043b\u043e\u0439 \u043d\u0430\u0432\u0435\u0448\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0443\u0436\u0435 \u0432 \u043a\u043e\u0434\u0435, \u043f\u043e\u0432\u0435\u0440\u0445.<\/p>\n<\/li>\n<li>\n<p><strong>\u0411\u0430\u043d\u0434\u043b \u2014 \u044d\u0442\u043e \u0440\u0435\u0444\u0435\u0440\u0435\u043d\u0441, \u0430 \u043d\u0435 production-\u043a\u043e\u0434.<\/strong> \u0427\u0438\u0442\u0430\u0439 \u0433\u043b\u0430\u0432\u043d\u044b\u0439 HTML \u0446\u0435\u043b\u0438\u043a\u043e\u043c, \u0432\u044b\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0439 \u0442\u043e\u043a\u0435\u043d\u044b, \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0438\u0440\u0430\u0439 \u0432\u0438\u0437\u0443\u0430\u043b \u0432 \u0438\u0434\u0438\u043e\u043c\u0430\u0445 \u0441\u0432\u043e\u0435\u0433\u043e \u0441\u0442\u0435\u043a\u0430. \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0430 \u043d\u0435 \u043a\u043e\u043f\u0438\u0440\u0443\u0439.<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u0440\u0435\u043f\u0430\u0440\u0438\u0440\u0443\u0439 \u0440\u0435\u0444\u0435\u0440\u0435\u043d\u0441, \u043d\u0435 \u0443\u0433\u0430\u0434\u044b\u0432\u0430\u0439.<\/strong> \u0421\u043d\u0438\u043c\u0438 \u0436\u0438\u0432\u043e\u0439 \u0441\u0430\u0439\u0442 \u0447\u0435\u0440\u0435\u0437 Playwright \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044c canvases\/three: \u043c\u043e\u0436\u0435\u0442 \u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u00ab3D\u00bb \u2014 \u044d\u0442\u043e webm, \u0438 \u0448\u0435\u0439\u0434\u0435\u0440 \u043d\u0435 \u043d\u0443\u0436\u0435\u043d.<\/p>\n<\/li>\n<li>\n<p><strong>\u0412\u044b\u0431\u0438\u0440\u0430\u0439 \u043f\u0443\u0442\u044c \u043e\u0441\u043e\u0437\u043d\u0430\u043d\u043d\u043e.<\/strong> \u041e\u0434\u0438\u043d \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u044d\u043a\u0440\u0430\u043d\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0440\u0443\u043a\u0430\u043c\u0438 \u0431\u0435\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a. \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e 3D-\u0441\u0446\u0435\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0435\u0440\u0435\u0435\u0437\u0436\u0430\u044e\u0442 \u043c\u0435\u0436\u0434\u0443 \u0441\u0430\u0439\u0442\u0430\u043c\u0438, \u0434\u0435\u0448\u0435\u0432\u043b\u0435 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0434\u0432\u0438\u0436\u043a\u043e\u043c \u043d\u0430 Three.js \u0438 \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b.<\/p>\n<\/li>\n<li>\n<p><strong>\u0422\u044f\u0436\u0451\u043b\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 \u043e\u0431\u044f\u0437\u0430\u043d \u0443\u043c\u0435\u0442\u044c \u0443\u043f\u0440\u043e\u0449\u0430\u0442\u044c\u0441\u044f.<\/strong> <code>typeof THREE<\/code> guard + 2D-fallback, <code>prefers-reduced-motion<\/code>, \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 DPR. \u042d\u0442\u043e \u0447\u0430\u0441\u0442\u044c \u043a\u0430\u0440\u043a\u0430\u0441\u0430, \u0430 \u043d\u0435 \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u043e\u043b\u0438\u0440\u043e\u0432\u043a\u0430.<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0439 \u0441\u043a\u0432\u043e\u0437\u043d\u043e\u0439 \u043f\u0443\u0442\u044c, \u0430 \u043d\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443.<\/strong> \u00ab\u0424\u043e\u0440\u043c\u0430 \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0430 \u0441\u043f\u0430\u0441\u0438\u0431\u043e\u00bb \u043d\u0435 \u0440\u0430\u0432\u043d\u043e \u00ab\u0437\u0430\u043f\u0438\u0441\u044c \u0432 \u0431\u0430\u0437\u0435\u00bb. \u0414\u043e\u0439\u0434\u0438 \u0434\u043e \u0431\u044d\u043a\u0430.<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u041f\u043e\u0447\u0435\u043c\u0443 \u044f \u0432\u044b\u043b\u043e\u0436\u0438\u043b \u043d\u0430\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/strong><\/p>\n<p>\u042f \u0432\u044b\u043b\u043e\u0436\u0438\u043b \u044d\u0442\u043e \u0432 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f. \u0412\u043e\u043a\u0440\u0443\u0433 Claude Code \u0440\u0430\u0441\u0442\u0451\u0442 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 ai-skills \u2014 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u043d\u0430\u0432\u044b\u043a\u0438 \u0438 \u043a\u0430\u0440\u043a\u0430\u0441\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043f\u0438\u0448\u0435\u0448\u044c \u0437\u0430\u043d\u043e\u0432\u043e, \u0430 \u0437\u0430\u0431\u0438\u0440\u0430\u0435\u0448\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u043c\u0438: \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 <a href=\"https:\/\/github.com\/letta-ai\/skills\">letta-ai\/skills<\/a> \u0438 \u0442\u0435\u0433\u0438 <code>ai-skills<\/code> \/ <code>ai-agents<\/code> \u043d\u0430 GitHub.<\/p>\n<p>\u0421\u0432\u043e\u0439 \u043d\u0430\u0431\u043e\u0440 \u044f \u0441\u043e\u0431\u0440\u0430\u043b \u0432 <a href=\"https:\/\/github.com\/JHamidun\/claude-code-config-pack\">\u043f\u043b\u0430\u0433\u0438\u043d-\u043c\u0430\u0440\u043a\u0435\u0442\u043f\u043b\u0435\u0439\u0441 \u0434\u043b\u044f Claude Code<\/a>. \u041f\u043e \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0442\u0430\u043c \u043f\u043e\u043b\u0435\u0437\u0435\u043d \u0441\u043a\u0438\u043b\u043b <code>claude-design<\/code> \u2014 \u0442\u043e\u0442 \u0441\u0430\u043c\u044b\u0439 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u043f\u043e \u0448\u0430\u0433\u0430\u043c workflow \u043e\u0440\u043a\u0435\u0441\u0442\u0440\u0430\u0446\u0438\u0438 Claude Design \u0447\u0435\u0440\u0435\u0437 Playwright, \u0441\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439 handoff-\u0431\u0430\u043d\u0434\u043b\u0430 \u0438 \u0447\u0435\u0441\u0442\u043d\u043e\u0439 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439 \u043d\u0430 Turnstile. \u041a\u0430\u0440\u043a\u0430\u0441 \u0441 \u0441\u0430\u043c\u0438\u043c\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c\u0438 \u2014 \u0432\u043e\u043b\u043d\u0430, \u043d\u0430\u043a\u043b\u043e\u043d \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a, \u0441\u0432\u0435\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u0434 \u043a\u0443\u0440\u0441\u043e\u0440\u043e\u043c \u2014 \u043f\u043e\u043a\u0430 \u043b\u0435\u0436\u0438\u0442 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e: \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e \u0437\u0430\u0432\u044f\u0437\u043e\u043a \u043d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b. \u0412\u044b\u043b\u043e\u0436\u0443, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b\u0447\u0438\u0449\u0443.<\/p>\n<p><strong>\u0412\u044b\u0432\u043e\u0434\u044b<\/strong><\/p>\n<p>\u0413\u043b\u0430\u0432\u043d\u043e\u0435, \u0447\u0442\u043e \u044f \u0445\u043e\u0442\u0435\u043b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c: \u00ab\u0434\u043e\u0440\u043e\u0433\u043e\u0439\u00bb \u0432\u0438\u0437\u0443\u0430\u043b \u0443 \u043c\u0435\u043d\u044f \u0441\u0432\u0451\u043b\u0441\u044f \u043a \u0434\u0432\u0443\u043c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u043c \u0432\u0435\u0449\u0430\u043c. \u041b\u0438\u0431\u043e ~70 \u0441\u0442\u0440\u043e\u043a GLSL \u0440\u0443\u043a\u0430\u043c\u0438, \u043b\u0438\u0431\u043e \u0441\u0432\u043e\u0439 \u0434\u0432\u0438\u0436\u043e\u043a \u043d\u0430 Three.js \u0441 \u0440\u0430\u0431\u043e\u0447\u0438\u043c fallback. \u041e\u0431\u0430 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u0432\u0438\u0434\u043d\u043e \u0432 \u043a\u043e\u0434\u0435, \u043e\u0431\u0430 \u0447\u0438\u043d\u044f\u0442\u0441\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0447\u043d\u043e, \u043e\u0431\u0430 \u043f\u0435\u0440\u0435\u0435\u0437\u0436\u0430\u044e\u0442 \u0441 \u0441\u0430\u0439\u0442\u0430 \u043d\u0430 \u0441\u0430\u0439\u0442.<\/p>\n<p>\u0421\u043e\u0431\u0440\u0430\u0442\u044c \u0441\u0430\u0439\u0442 \u0430\u0433\u0435\u043d\u0442\u043e\u043c \u2014 \u0447\u0430\u0441\u0442\u043d\u044b\u0439 \u0441\u043b\u0443\u0447\u0430\u0439 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u0441\u044e\u0436\u0435\u0442\u0430: \u043a\u0430\u043a \u0418\u0418 \u0434\u043e\u0435\u0437\u0436\u0430\u0435\u0442 \u0434\u043e \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432 \u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f\u0445.<\/p>\n<p>16 \u0441\u0435\u043d\u0442\u044f\u0431\u0440\u044f \u0441 10:00 \u0434\u043e 16:00 (\u041c\u0421\u041a) \u043c\u044b \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u043c \u0432\u0442\u043e\u0440\u0443\u044e \u043e\u043d\u043b\u0430\u0439\u043d-\u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u044e <a href=\"https:\/\/t.me\/AlpinaAIconfbot?start=habr__article__vibecode_sites\">\u00ab\u0418\u0418-\u0422\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f\u00bb<\/a> \u2014 \u043f\u0440\u043e \u0440\u043e\u0441\u0441\u0438\u0439\u0441\u043a\u0438\u0435 \u0438 \u043c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u044b\u0435 \u043a\u0435\u0439\u0441\u044b \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044f \u0418\u0418 \u0432 \u0431\u0438\u0437\u043d\u0435\u0441-\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u044b. \u0412\u044b\u0441\u0442\u0443\u043f\u044f\u0442 \u0441\u043f\u0438\u043a\u0435\u0440\u044b \u0438\u0437 Skyeng, mymeet \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0439.<\/p>\n<p>\u0412 \u0430\u043f\u0440\u0435\u043b\u0435 \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u0439 \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u0438 \u0441\u043e\u0431\u0440\u0430\u043b\u043e\u0441\u044c \u0431\u043e\u043b\u044c\u0448\u0435 1150 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u043e\u0432: CEO, CTO \u0438 HRD \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u043b\u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044f \u2014 \u043e\u0442 \u0418\u0418-\u0430\u0433\u0435\u043d\u0442\u043e\u0432 \u0432 \u0431\u044d\u043a-\u043e\u0444\u0438\u0441\u0435 \u0434\u043e \u0440\u0430\u0441\u0447\u0451\u0442\u0430 \u043e\u043a\u0443\u043f\u0430\u0435\u043c\u043e\u0441\u0442\u0438. \u0417\u0430\u043f\u0438\u0441\u0438 \u0432\u044b\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0439 \u0438 \u0441\u0430\u043c\u043c\u0430\u0440\u0438 \u0441 \u0442\u0440\u0435\u043d\u0434\u0430\u043c\u0438 \u043b\u0435\u0436\u0430\u0442 <a href=\"https:\/\/t.me\/AlpinaAIconfbot?start=habr__article__vibecode_sites\">\u0432 \u043d\u0430\u0448\u0435\u043c \u0431\u043e\u0442\u0435<\/a> \u2014 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0443\u0436\u0435 \u0441\u0435\u0439\u0447\u0430\u0441.<\/p>\n<p>\u0423\u0447\u0430\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0436\u043d\u043e \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e, <a href=\"https:\/\/t.me\/AlpinaAIconfbot?start=habr__article__vibecode_sites\">\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>P.S. \u042d\u0442\u0438 \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u0438 \u2014 \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u0439 \u043f\u0440\u043e\u0434\u0443\u043a\u0442: \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0435, \u0447\u0435\u043c \u044f \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0441\u044c, \u2014 \u043f\u0440\u043e\u0434\u0443\u043a\u0442 AlpinaGPT \u0432 \u0410\u043b\u044c\u043f\u0438\u043d\u0435, \u0438 \u0432\u0430\u0439\u0431\u043a\u043e\u0434-\u0441\u0431\u043e\u0440\u043a\u0430 \u0441\u0430\u0439\u0442\u043e\u0432 \u0432\u044b\u0440\u043e\u0441\u043b\u0430 \u043a\u0430\u043a \u0440\u0430\u0437 \u0438\u0437 \u0435\u0436\u0435\u0434\u043d\u0435\u0432\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0430\u0433\u0435\u043d\u0442\u0430\u043c\u0438 \u0442\u0430\u043c.<\/p>\n<p>P.P.S. \u0415\u0449\u0451 \u0431\u043e\u043b\u044c\u0448\u0435 \u043a\u0435\u0439\u0441\u043e\u0432 \u0438 \u0440\u0430\u0437\u0431\u043e\u0440\u043e\u0432 \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0439 \u0418\u0418 \u2014 \u0432 Telegram-\u043a\u0430\u043d\u0430\u043b\u0435 <a href=\"https:\/\/t.me\/alpinagpt\">\u00ab\u0414\u0435\u043b\u043e \u0432 \u043f\u0440\u043e\u043c\u043f\u0442\u0435\u00bb<\/a>. \u0417\u0430\u0445\u043e\u0434\u0438\u0442\u0435, \u0435\u0441\u043b\u0438 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0431\u044b\u0442\u044c \u0432 \u043a\u0443\u0440\u0441\u0435. <\/p>\n<\/div>\n<p>\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/1066732\/\">https:\/\/habr.com\/ru\/articles\/1066732\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0421\u043e\u0431\u0440\u0430\u0442\u044c \u043b\u0435\u043d\u0434\u0438\u043d\u0433 \u0441 \u00ab\u0434\u043e\u0440\u043e\u0433\u0438\u043c\u0438\u00bb \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c\u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0432\u0435\u0447\u0435\u0440\u043e\u043c, \u0431\u0435\u0437 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438TL;DR\u0417\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0433\u043e\u0434 \u044f \u0441\u043e\u0431\u0440\u0430\u043b \u0432\u0430\u0439\u0431\u043a\u043e\u0434\u0438\u043d\u0433\u043e\u043c \u043d\u0435 \u043e\u0434\u0438\u043d \u0434\u0435\u0441\u044f\u0442\u043e\u043a \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u043e\u0432 \u2014 \u0434\u043b\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c \u041c\u0424\u0422\u0418, \u0434\u043b\u044f \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0438 \u043d\u0430 \u0437\u0430\u043a\u0430\u0437. \u0420\u0430\u0437\u0431\u0435\u0440\u0443 \u0447\u0435\u0442\u044b\u0440\u0435 \u0441\u0430\u043c\u044b\u0445 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445: \u0428\u043a\u043e\u043b\u0443 \u0422\u0435\u0445\u043f\u0440\u0435\u0434\u0430, \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u044e \u00ab\u0422\u043e\u0447\u043a\u0430 \u0441\u0431\u043e\u0440\u043a\u0438\u00bb, \u043a\u0443\u0440\u0441 \u00ab\u0418\u0418 \u041f\u0440\u043e\u0434\u0430\u043a\u0442-\u043c\u0435\u043d\u0435\u0434\u0436\u043c\u0435\u043d\u0442\u00bb (aimipt.ru) \u0438 \u043e\u0434\u0438\u043d \u0441\u0432\u043e\u0439, \u043b\u0438\u0447\u043d\u044b\u0439 \u2014 \u043d\u0430 \u043d\u0451\u043c \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0440\u0430\u0441\u043a\u0430\u0447\u0430\u043d\u044b \u0441\u0438\u043b\u044c\u043d\u0435\u0435 \u0432\u0441\u0435\u0433\u043e. \u0412\u0430\u0439\u0431\u043a\u043e\u0434\u0438\u043d\u0433 \u0437\u0434\u0435\u0441\u044c \u2014 \u044d\u0442\u043e \u043a\u043e\u0433\u0434\u0430 \u043a\u043e\u0434 \u043f\u0438\u0448\u0435\u0442 \u0430\u0433\u0435\u043d\u0442 \u043f\u043e\u0434 \u043c\u043e\u044e \u043f\u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443 \u0437\u0430\u0434\u0430\u0447\u0438, \u0430 \u044f \u0441\u0442\u0430\u0432\u043b\u044e \u0440\u0430\u043c\u043a\u0438, \u043f\u0440\u0430\u0432\u043b\u044e \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.\u0423 \u0432\u0441\u0435\u0445 \u0447\u0435\u0442\u044b\u0440\u0451\u0445 \u0435\u0441\u0442\u044c \u0441\u043b\u043e\u0439 \u00ab\u0434\u043e\u0440\u043e\u0433\u0438\u0445\u00bb \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432: \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0432\u043e\u0434\u0430 \u043d\u0430 WebGL-\u0448\u0435\u0439\u0434\u0435\u0440\u0435 \u0441 \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u0438\u0435\u043c, 3D-\u043b\u043e\u0433\u043e\u0442\u0438\u043f \u0424\u0438\u0437\u0442\u0435\u0445\u0430 \u0438\u0437 \u0442\u044b\u0441\u044f\u0447 \u0447\u0430\u0441\u0442\u0438\u0446-\u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432, \u0436\u0438\u0432\u0430\u044f 3D-\u0431\u0430\u0448\u043d\u044f \u0438\u0437 \u043a\u0443\u0431\u043e\u0432, \u043e\u0431\u043b\u0430\u043a\u043e \u0447\u0430\u0441\u0442\u0438\u0446, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u043e\u0440\u0444\u0438\u0442 \u0444\u043e\u0440\u043c\u0443 \u043f\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u0443.\u041a \u044d\u0442\u043e\u043c\u0443 \u0441\u043b\u043e\u044e \u044f \u043f\u0440\u0438\u0448\u0451\u043b \u0434\u0432\u0443\u043c\u044f \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u043f\u0443\u0442\u044f\u043c\u0438. \u041d\u0430 \u00ab\u0422\u043e\u0447\u043a\u0435 \u0441\u0431\u043e\u0440\u043a\u0438\u00bb \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u0440\u0443\u043a\u0430\u043c\u0438 \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c WebGL \u2014 \u043d\u043e\u043b\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a. \u041d\u0430 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u0432\u043e\u0439 \u0434\u0432\u0438\u0436\u043e\u043a \u043d\u0430 Three.js: \u0432\u044b\u043d\u0435\u0441\u0435\u043d \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0444\u0430\u0439\u043b\u0430\u043c\u0438, \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0441\u0430\u0439\u0442\u0430\u043c\u0438 \u0438 \u043e\u0442\u043a\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 2D-canvas, \u0435\u0441\u043b\u0438 CDN \u043d\u0435 \u043e\u0442\u0432\u0435\u0442\u0438\u0442. \u041d\u0430 \u043b\u0438\u0447\u043d\u043e\u043c \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u0435 \u044f \u0440\u0430\u0441\u043a\u0430\u0447\u0430\u043b \u044d\u0442\u043e\u0442 \u0434\u0432\u0438\u0436\u043e\u043a \u0441\u0438\u043b\u044c\u043d\u0435\u0435 \u0432\u0441\u0435\u0433\u043e.\u041c\u0435\u0436\u0434\u0443 \u00ab\u043d\u0430\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u044e\u00bb \u0438 \u043a\u043e\u0434\u043e\u043c \u0441\u0442\u043e\u0438\u0442 \u0446\u0435\u043f\u043e\u0447\u043a\u0430 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432: \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 DESIGN.md, \u0438\u0437 \u043d\u0435\u0451 \u043c\u043e\u043a\u0430\u043f \u0432 Claude Design, \u0438\u0437 \u043c\u043e\u043a\u0430\u043f\u0430 handoff-\u0431\u0430\u043d\u0434\u043b \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0442\u043e\u043c \u043f\u0435\u0440\u0435\u043d\u043e\u0441 \u0432 \u043a\u043e\u0434. \u041d\u0438\u0436\u0435 \u2014 \u043e\u0431\u0430 \u043f\u0443\u0442\u0438 \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043a\u043e\u0434\u0435, \u044d\u0442\u0430 \u0446\u0435\u043f\u043e\u0447\u043a\u0430 \u0438 \u0433\u0440\u0430\u0431\u043b\u0438, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u043d\u0430\u0441\u0442\u0443\u043f\u0438\u043b.\u0421\u0440\u0430\u0437\u0443 \u043f\u0440\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c\u043e\u0441\u0442\u044c. \u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 \u044d\u0442\u0438\u0445 \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u043e\u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u0438 \u0437\u0430\u043a\u0440\u044b\u0442\u044b\u0435: \u0438\u043c\u0435\u043d\u0430 \u0444\u0430\u0439\u043b\u043e\u0432, \u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0438 \u0441\u0447\u0451\u0442\u0447\u0438\u043a\u0438 \u043d\u0438\u0436\u0435 \u2014 \u0438\u0437 \u043c\u043e\u0435\u0439 \u0440\u0430\u0431\u043e\u0447\u0435\u0439 \u043a\u043e\u043f\u0438\u0438, \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 \u0432\u044b \u0435\u0451 \u043d\u0435 \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0435. \u0421\u043d\u0430\u0440\u0443\u0436\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0436\u0438\u0432\u044b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u0447\u0443\u0436\u043e\u0439 \u0440\u0435\u0444\u0435\u0440\u0435\u043d\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u044e; \u043a\u043e\u0434 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u2014 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u0438\u0437 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432.\u041f\u0430\u0440\u0430 \u0441\u043b\u043e\u0432 \u043e \u0441\u0435\u0431\u0435: \u044f \u0416\u0435\u043c\u0430\u043b \u0425\u0430\u043c\u0438\u0434\u0443\u043d, CPO AlpinaGPT \u0438 Head of AI \u0432 Alpina Digital. \u0424\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u2014 \u043d\u0435 \u043c\u043e\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430, \u0442\u0430\u043a \u0447\u0442\u043e \u0434\u0430\u043b\u044c\u0448\u0435 \u2014 \u0432\u0437\u0433\u043b\u044f\u0434 \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0442\u0430\u043a\u043e\u0435 \u0430\u0433\u0435\u043d\u0442\u043e\u043c \u0438 \u043f\u0438\u0448\u0435\u0442 \u043f\u0440\u043e \u044d\u0442\u043e \u0432 \u00ab\u0413\u043e\u0442\u043e\u0432\u0438\u043c \u0418\u0418\u0448\u043d\u0438\u0446\u0443\u00bb.\u0427\u0435\u0442\u044b\u0440\u0435 \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u0430, \u0434\u0432\u0435 \u0432\u0435\u0442\u043a\u0438\u0422\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438 \u044d\u0442\u0438 \u0447\u0435\u0442\u044b\u0440\u0435 \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u0430 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043b\u0438\u0441\u044c \u043d\u0430 \u0434\u0432\u0435 \u0432\u0435\u0442\u043a\u0438. \u041f\u0435\u0440\u0432\u043e\u0439 \u0431\u044b\u043b\u0430 \u0428\u043a\u043e\u043b\u0430 \u0422\u0435\u0445\u043f\u0440\u0435\u0434\u0430: \u0438\u043c\u0435\u043d\u043d\u043e \u043d\u0430 \u043d\u0435\u0439 \u0434\u0432\u0438\u0436\u043e\u043a 3D-\u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u043d\u0430 Three.js \u0432\u043f\u0435\u0440\u0432\u044b\u0435 \u043f\u0435\u0440\u0435\u0435\u0445\u0430\u043b \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0438 \u0441\u0442\u0430\u043b \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u043c. \u0418\u0437 \u0442\u043e\u0433\u043e \u0436\u0435 \u043d\u0430\u0431\u043e\u0440\u0430 \u0432\u044b\u0440\u043e\u0441 \u043b\u0435\u043d\u0434\u0438\u043d\u0433 \u043a\u0443\u0440\u0441\u0430 \u00ab\u0418\u0418 \u041f\u0440\u043e\u0434\u0430\u043a\u0442-\u043c\u0435\u043d\u0435\u0434\u0436\u043c\u0435\u043d\u0442\u00bb (aimipt.ru) \u2014 \u043e\u043d \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0442\u0435 \u0436\u0435 \u0434\u0432\u0438\u0436\u043a\u0438 \u0441\u043e \u0428\u043a\u043e\u043b\u044b.\u0410 \u043b\u0435\u043d\u0434\u0438\u043d\u0433 \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u0438 \u00ab\u0422\u043e\u0447\u043a\u0430 \u0441\u0431\u043e\u0440\u043a\u0438\u00bb (techpred.online\/upcycle) \u043f\u043e\u0448\u0451\u043b \u0434\u0440\u0443\u0433\u0438\u043c \u043f\u0443\u0442\u0451\u043c: \u0432\u0435\u0441\u044c \u0432\u0438\u0437\u0443\u0430\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u043d\u0430 \u0433\u043e\u043b\u043e\u043c WebGL \u0438 CSS, \u0431\u0435\u0437 \u0435\u0434\u0438\u043d\u043e\u0439 \u0432\u043d\u0435\u0448\u043d\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.\u0418 \u0447\u0435\u0442\u0432\u0451\u0440\u0442\u044b\u0439 \u2014 \u043e\u0434\u0438\u043d \u0438\u0437 \u043c\u043e\u0438\u0445 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u043e\u0432. \u0422\u043e\u0442 \u0436\u0435 Three.js-\u0434\u0432\u0438\u0436\u043e\u043a \u043d\u0430 \u043d\u0451\u043c \u0440\u0430\u0441\u043a\u0430\u0447\u0430\u043d \u0441\u0438\u043b\u044c\u043d\u0435\u0435 \u0432\u0441\u0435\u0433\u043e: \u043e\u0431\u043b\u0430\u043a\u043e \u0447\u0430\u0441\u0442\u0438\u0446 \u043c\u043e\u0440\u0444\u0438\u0442 \u0444\u043e\u0440\u043c\u0443 \u043f\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u0443, \u0440\u044f\u0434\u043e\u043c 3D-\u043a\u043e\u043c\u043f\u0430\u0441, \u0441\u043f\u043e\u0442\u043b\u0430\u0439\u0442-\u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0430 \u043f\u043e\u0434 \u043a\u0443\u0440\u0441\u043e\u0440\u043e\u043c \u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438, \u043d\u0430\u0431\u0440\u0430\u043d\u043d\u044b\u0435 \u0442\u0435\u043c\u0438 \u0436\u0435 \u0447\u0430\u0441\u0442\u0438\u0446\u0430\u043c\u0438. \u0422\u0440\u0438 \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u0430 \u041c\u0424\u0422\u0418 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442, \u00ab\u043a\u0430\u043a \u044d\u0442\u043e \u0443\u0441\u0442\u0440\u043e\u0435\u043d\u043e\u00bb. \u0427\u0435\u0442\u0432\u0451\u0440\u0442\u044b\u0439 \u2014 \u00ab\u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u0430\u043b\u0435\u043a\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0435\u0441\u0442\u0438 \u043e\u0434\u0438\u043d \u0434\u0432\u0438\u0436\u043e\u043a\u00bb.\u0426\u0435\u043f\u043e\u0447\u043a\u0430 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432: \u043e\u0442 \u043d\u0430\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0434\u043e \u043f\u0440\u043e\u0434\u0430\u0426\u0435\u043f\u043e\u0447\u043a\u0430 \u043e\u0434\u043d\u0430: \u0432\u043a\u0443\u0441 \u2192 \u043c\u043e\u043a\u0430\u043f \u2192 handoff-\u0431\u0430\u043d\u0434\u043b \u2192 \u043a\u043e\u0434. \u041a\u0430\u0436\u0434\u043e\u0435 \u0437\u0432\u0435\u043d\u043e \u2014 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442.\u0412\u043a\u0443\u0441 \u0432 \u043c\u0430\u0448\u0438\u043d\u043e\u0447\u0438\u0442\u0430\u0435\u043c\u043e\u043c \u0432\u0438\u0434\u0435 \u2014 DESIGN.md\u042f \u0434\u0435\u0440\u0436\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c, \u0433\u0434\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u0431\u0440\u0435\u043d\u0434 (Stripe, Linear, Apple, Cursor \u0438 \u0434\u0435\u0441\u044f\u0442\u043a\u0438 \u0434\u0440\u0443\u0433\u0438\u0445, \u043f\u043b\u044e\u0441 \u043c\u043e\u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435) \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043d \u0432 \u043e\u0434\u0438\u043d \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b DESIGN.md. \u0414\u043b\u044f \u0430\u0433\u0435\u043d\u0442\u0430 \u044d\u0442\u043e \u0441\u044b\u0440\u044c\u0451, \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043e\u043d \u0431\u0435\u0440\u0451\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0422\u0443\u0434\u0430 \u0432\u0445\u043e\u0434\u044f\u0442:\u0422\u043e\u043a\u0435\u043d\u044b \u0441 \u0440\u043e\u043b\u044f\u043c\u0438. \u0422\u043e\u043a\u0435\u043d \u2014 \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u0438\u0437\u0430\u0439\u043d\u0430: \u0446\u0432\u0435\u0442, \u043e\u0442\u0441\u0442\u0443\u043f, \u0440\u0430\u0434\u0438\u0443\u0441. \u0420\u044f\u0434\u043e\u043c \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043b\u0435\u0436\u0438\u0442 \u0440\u043e\u043b\u044c: #533afd \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043d \u043a\u0430\u043a \u00abDeep Violet \u2014 primary calls to action, active states\u00bb.Type scale \u2014 \u0448\u043a\u0430\u043b\u0430 \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0438: \u0440\u0430\u0437\u043c\u0435\u0440\u044b, line-height, letter-spacing \u043f\u043b\u044e\u0441 OpenType-\u0444\u0438\u0447\u0438, \u0442\u043e \u0435\u0441\u0442\u044c \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u0447\u0435\u0440\u0442\u0430\u043d\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0448\u0440\u0438\u0444\u0442\u0430 (&#171;ss01&#187; \u2014 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0433\u043b\u0438\u0444\u043e\u0432, &#171;tnum&#187; \u2014 \u043c\u043e\u043d\u043e\u0448\u0438\u0440\u0438\u043d\u043d\u044b\u0435 \u0446\u0438\u0444\u0440\u044b).Spacing\/radius\/shadows \u2014 base unit 4px, \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0440\u0430\u0434\u0438\u0443\u0441\u044b, \u043c\u044f\u0433\u043a\u0438\u0435 \u0442\u0435\u043d\u0438.\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u2014 Primary\/Ghost\/Outlined Button, Default\/Feature Card \u0441 \u0442\u043e\u0447\u043d\u044b\u043c\u0438 padding \u0438 \u0444\u043e\u043d\u0430\u043c\u0438.Do&#8217;s \u0438 Don&#8217;ts \u2014 \u00ab\u043d\u0435 \u0432\u0432\u043e\u0434\u0438 \u043d\u043e\u0432\u044b\u0435 \u0441\u0435\u043c\u0435\u0439\u0441\u0442\u0432\u0430 \u0448\u0440\u0438\u0444\u0442\u043e\u0432\u00bb, \u00ab\u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439 \u0436\u0451\u0441\u0442\u043a\u0438\u0435 \u0442\u0435\u043d\u0438\u00bb.Agent Prompt Guide \u2014 \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043f\u0440\u043e\u043c\u043f\u0442\u043e\u0432 \u043f\u043e\u0434 \u044d\u0442\u043e\u0442 \u0441\u0442\u0438\u043b\u044c.Quick Start \u2014 \u0442\u0435 \u0436\u0435 \u0442\u043e\u043a\u0435\u043d\u044b \u0441\u0440\u0430\u0437\u0443 \u043a\u0430\u043a CSS Custom Properties \u0438 @theme \u0434\u043b\u044f Tailwind v4.\u041e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u043f\u0430\u043b\u0438\u0442\u0440\u044b \u2014 \u0432 \u0440\u043e\u043b\u044f\u0445. \u0428\u0440\u0438\u0444\u0442 \u043e\u043f\u0438\u0441\u0430\u043d \u0442\u0430\u043a: \u00absohne-var, \u0432\u0435\u0441 300 \u0434\u043b\u044f \u043a\u0440\u0443\u043f\u043d\u044b\u0445 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 \u0440\u0430\u0434\u0438 \u0441\u0434\u0435\u0440\u0436\u0430\u043d\u043d\u043e\u0439 \u0430\u0432\u0442\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u043e\u0441\u0442\u0438, 400 \u0434\u043b\u044f \u0442\u0435\u043b\u0430\u00bb. \u0410\u0433\u0435\u043d\u0442 \u0438\u0437 \u0442\u0430\u043a\u043e\u0433\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043d\u043e \u0438 \u0433\u0434\u0435 \u0435\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c. \u0410\u043a\u0446\u0435\u043d\u0442\u043d\u044b\u0439 \u0446\u0432\u0435\u0442 \u0443 \u043d\u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u0451\u0442 \u0443\u0435\u0437\u0436\u0430\u0442\u044c \u0432 \u0444\u043e\u043d, \u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u0447\u043d\u044b\u0439 \u0448\u0440\u0438\u0444\u0442 \u2014 \u0432 \u043f\u043e\u0434\u043f\u0438\u0441\u0438.\u041f\u043e\u0445\u043e\u0436\u0438\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u043e\u0442\u0434\u0430\u0451\u0442 Refero Styles \u2014 \u0433\u0430\u043b\u0435\u0440\u0435\u044f \u0441\u0442\u0438\u043b\u0435\u0439 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0438\u0437 \u0431\u0440\u0435\u043d\u0434\u0430 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 DESIGN.md. \u0421\u043c\u044b\u0441\u043b \u043e\u0434\u0438\u043d: \u0432\u043c\u0435\u0441\u0442\u043e \u00ab\u0441\u0434\u0435\u043b\u0430\u0439 \u043a\u0440\u0430\u0441\u0438\u0432\u043e, \u0441\u0438\u043d\u0435\u043d\u044c\u043a\u043e\u00bb \u044f \u043a\u043b\u0430\u0434\u0443 \u0430\u0433\u0435\u043d\u0442\u0443 \u043f\u043e\u043b\u043d\u044b\u0439 \u0431\u043b\u044e\u043f\u0440\u0438\u043d\u0442 \u0438 \u0433\u043e\u0432\u043e\u0440\u044e, \u0447\u0442\u043e \u0432 \u043d\u0451\u043c \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c. \u0414\u043b\u044f \u00ab\u0422\u043e\u0447\u043a\u0438 \u0441\u0431\u043e\u0440\u043a\u0438\u00bb \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u0441\u0442\u0438\u043b\u0435\u043c \u0431\u044b\u043b Stripe.Claude Design \u2014 \u043c\u043e\u043a\u0430\u043f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0440\u043a\u0435\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u0441\u0430\u043c Claude Code\u0414\u0430\u043b\u044c\u0448\u0435 \u2014 \u043c\u043e\u043a\u0430\u043f. \u042f \u0434\u0435\u043b\u0430\u044e \u0435\u0433\u043e \u0432 Claude Design (claude.ai\/design) \u2014 \u044d\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 Anthropic, \u0433\u0434\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u0434\u0438\u0430\u043b\u043e\u0433\u043e\u043c \u0441 \u043c\u043e\u0434\u0435\u043b\u044c\u044e: \u00ab\u0441\u0434\u0435\u043b\u0430\u0439 \u0442\u0451\u043c\u043d\u0435\u0435\u00bb, \u00ab\u043a\u0430\u043a \u0432 Linear\u00bb, \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0442\u044c \u0440\u0435\u0444\u0435\u0440\u0435\u043d\u0441\u043d\u044b\u0435 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u044b. \u041d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u2014 \u043a\u043d\u043e\u043f\u043a\u0430 Handoff, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0442\u0434\u0430\u0451\u0442 zip-\u0430\u0440\u0445\u0438\u0432 \u0441 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u043c\u0438 \u043c\u0430\u043a\u0435\u0442\u0430 (\u0434\u0430\u043b\u044c\u0448\u0435 \u2014 \u0431\u0430\u043d\u0434\u043b).\u041f\u043e Claude Design \u044f \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0435 \u043a\u043b\u0438\u043a\u0430\u044e \u0440\u0443\u043a\u0430\u043c\u0438. \u042f \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u044e Claude Code \u043e\u0440\u043a\u0435\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c Claude Design \u0447\u0435\u0440\u0435\u0437 Playwright-\u043f\u043b\u0430\u0433\u0438\u043d: \u0430\u0433\u0435\u043d\u0442 \u0441\u0430\u043c \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u043f\u0440\u043e\u0435\u043a\u0442, \u0432\u0431\u0438\u0432\u0430\u0435\u0442 \u0434\u043b\u0438\u043d\u043d\u044b\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u043c\u043f\u0442 \u0446\u0435\u043b\u0438\u043a\u043e\u043c, \u0436\u0434\u0451\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 canvas, \u0438\u0442\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0440\u0435\u043f\u043b\u0438\u043a\u0430\u043c\u0438 \u0432 \u0447\u0430\u0442 \u0438 \u0432 \u043a\u043e\u043d\u0446\u0435 \u0436\u043c\u0451\u0442 Handoff, \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u044f \u0431\u0430\u043d\u0434\u043b. \u0427\u0442\u043e\u0431\u044b \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e, \u044f \u0440\u0435\u0432\u0435\u0440\u0441-\u0438\u043d\u0436\u0438\u043d\u0438\u0440\u0438\u043b \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 Claude Design \u2014 \u043a\u0430\u043a\u0438\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0436\u0434\u0430\u0442\u044c, \u043a\u0430\u043a \u0443\u0441\u0442\u0440\u043e\u0435\u043d \u0431\u0430\u043d\u0434\u043b, \u0433\u0434\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u043f\u043e\u0442\u044b\u043a\u0430\u0435\u0442\u0441\u044f \u2014 \u0438 \u0441\u043e\u0431\u0440\u0430\u043b \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u043a\u0438\u043b\u043b.\u0413\u043b\u0430\u0432\u043d\u044b\u0439 \u043a\u0430\u043c\u0435\u043d\u044c \u2014 Cloudflare Turnstile. \u041b\u043e\u0433\u0438\u043d \u0432 Claude Design \u043f\u0440\u0438\u043a\u0440\u044b\u0442 \u043a\u0430\u043f\u0447\u0435\u0439, \u0438 \u043e\u043d\u0430 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0434\u0435\u0442\u0435\u043a\u0442\u0438\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044e. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u0441\u043a\u0438\u043b\u043b\u0435 \u0437\u0430\u0448\u0438\u0442 \u0447\u0435\u0441\u0442\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438: \u0430\u0433\u0435\u043d\u0442 \u0434\u043e\u0445\u043e\u0434\u0438\u0442 \u0434\u043e \u043a\u0430\u043f\u0447\u0438, \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u00ab\u043a\u043b\u0438\u043a\u043d\u0438 \u0447\u0435\u043a\u0431\u043e\u043a\u0441 \u0440\u0443\u043a\u0430\u043c\u0438\u00bb, \u044f \u043a\u043b\u0438\u043a\u0430\u044e \u2014 \u0438 \u0434\u0430\u043b\u044c\u0448\u0435 \u043e\u043d \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u0442 \u0441\u0430\u043c. \u041e\u0431\u0445\u043e\u0434\u0438\u0442\u044c \u043a\u0430\u043f\u0447\u0443 \u044f \u043d\u0435 \u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b: \u043e\u043d\u0430 \u0442\u0443\u0442 \u0441\u0442\u043e\u0438\u0442 \u043f\u043e \u0434\u0435\u043b\u0443.Handoff-\u0431\u0430\u043d\u0434\u043b \u2014 \u0447\u0442\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0411\u0430\u043d\u0434\u043b \u0438\u0437 Claude Design \u0440\u0430\u0441\u043f\u0430\u043a\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443, \u0438 \u043f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u0432 \u043d\u0451\u043c \u043b\u0435\u0436\u0438\u0442, \u2014 README.md \u0441 \u043f\u0440\u044f\u043c\u044b\u043c \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435\u043c \u043a coding-\u0430\u0433\u0435\u043d\u0442\u0443. \u0414\u043e\u0441\u043b\u043e\u0432\u043d\u043e \u043e\u0442\u0442\u0443\u0434\u0430:CODING AGENTS: READ THIS FIRST. This is a handoff bundle from Claude Design. Recreate the designs pixel-perfectly in whatever technology fits the codebase. Don&#8217;t render these files in a browser or take screenshots \u2014 everything you need is in the source.\u0414\u0430\u043b\u044c\u0448\u0435 \u2014 project\/&lt;Name&gt;.html (\u0441\u0430\u043c \u043c\u043e\u043a\u0430\u043f, \u0447\u0438\u0442\u0430\u0442\u044c \u0446\u0435\u043b\u0438\u043a\u043e\u043c), styles.css \u0441 \u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438, \u0438 uploads\/ \u0441 \u043c\u043e\u0438\u043c\u0438 \u0440\u0435\u0444\u0435\u0440\u0435\u043d\u0441\u0430\u043c\u0438 \u0438 \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c DESIGN.md + tokens.json. \u0411\u0430\u043d\u0434\u043b\u044b \u044f \u0434\u0435\u0440\u0436\u0443 \u0432 git \u0440\u044f\u0434\u043e\u043c \u0441 \u043a\u043e\u0434\u043e\u043c: \u044d\u0442\u043e source-of-truth \u0434\u0438\u0437\u0430\u0439\u043d\u0430.\u0418 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043b\u0435\u0433\u043a\u043e \u043d\u0430\u0440\u0443\u0448\u0438\u0442\u044c: \u0431\u0430\u043d\u0434\u043b \u2014 \u044d\u0442\u043e \u0440\u0435\u0444\u0435\u0440\u0435\u043d\u0441, \u0430 \u043d\u0435 production-\u043a\u043e\u0434. HTML \u0438\u0437 Claude Design \u044f \u043d\u0435 \u043a\u043e\u043f\u0438\u0440\u0443\u044e \u0434\u043e\u0441\u043b\u043e\u0432\u043d\u043e \u2014 \u0447\u0438\u0442\u0430\u044e \u0446\u0435\u043b\u0438\u043a\u043e\u043c (\u043d\u0435 skim, \u043d\u0435 \u043f\u0435\u0440\u0432\u044b\u0435 \u0441\u0442\u043e \u0441\u0442\u0440\u043e\u043a), \u0432\u044b\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u044e \u0442\u043e\u043a\u0435\u043d\u044b \u0438 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b \u0438 \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0438\u0440\u0430\u044e \u0432\u0438\u0437\u0443\u0430\u043b \u0443\u0436\u0435 \u0432 \u0436\u0438\u0432\u043e\u043c \u043a\u043e\u0434\u0435, \u043d\u0430\u0432\u0435\u0448\u0438\u0432\u0430\u044f \u0442\u0443 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c, \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432 \u043c\u043e\u043a\u0430\u043f\u0435 \u043d\u0435\u0442. \u041c\u043e\u043a\u0430\u043f \u0437\u0430\u0434\u0430\u0451\u0442 \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044e \u0438 \u043f\u0430\u043b\u0438\u0442\u0440\u0443. \u042d\u0444\u0444\u0435\u043a\u0442\u044b \u2014 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u043b\u043e\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e \u0440\u0443\u043a\u0430\u043c\u0438 \u043f\u043e\u0432\u0435\u0440\u0445.\u0420\u0430\u0437\u0431\u043e\u0440 \u0436\u0438\u0432\u043e\u0433\u043e \u0440\u0435\u0444\u0435\u0440\u0435\u043d\u0441\u0430 \u2014 \u0438 \u0443\u0440\u043e\u043a \u043f\u0440\u043e \u00ab3D, \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0435\u0442\u00bb\u041a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u0435\u043d \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 \u0441 \u0447\u0443\u0436\u043e\u0433\u043e \u0441\u0430\u0439\u0442\u0430, \u044f \u0435\u0433\u043e \u043f\u0440\u0435\u043f\u0430\u0440\u0438\u0440\u0443\u044e: \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e \u0436\u0438\u0432\u043e\u0439 \u0440\u0435\u0444\u0435\u0440\u0435\u043d\u0441 \u0447\u0435\u0440\u0435\u0437 Playwright, \u0441\u043d\u0438\u043c\u0430\u044e DOM \u0438 computed styles, \u0441\u043c\u043e\u0442\u0440\u044e, \u0438\u0437 \u0447\u0435\u0433\u043e \u043e\u043d \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u0441\u043e\u0431\u0440\u0430\u043d.\u0425\u0440\u0435\u0441\u0442\u043e\u043c\u0430\u0442\u0438\u0439\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u2014 dayos.com. \u0421\u0430\u0439\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a, \u0431\u0443\u0434\u0442\u043e \u0442\u0430\u043c \u0442\u044f\u0436\u0451\u043b\u044b\u0439 3D \u043d\u0430 Three.js: \u043e\u0431\u044a\u0451\u043c\u043d\u044b\u0435 \u0431\u043b\u043e\u043a\u0438 \u043a\u0440\u0443\u0442\u044f\u0442\u0441\u044f \u0438 \u043f\u0435\u0440\u0435\u043b\u0438\u0432\u0430\u044e\u0442\u0441\u044f. \u042f \u0441\u043d\u044f\u043b \u0435\u0433\u043e \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u0440\u0430\u0437\u0431\u043e\u0440\u0430, \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043b DOM \u2014 \u0438 \u0443\u0432\u0438\u0434\u0435\u043b: canvases=0, \u043d\u0438 three, \u043d\u0438 spline. \u00ab3D-\u0431\u043b\u043e\u043a\u0438\u00bb \u043e\u043a\u0430\u0437\u0430\u043b\u0438\u0441\u044c \u043f\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d\u043d\u044b\u043c \u0437\u0430\u0446\u0438\u043a\u043b\u0435\u043d\u043d\u044b\u043c webm-\u0432\u0438\u0434\u0435\u043e. \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0435\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u043e\u043a\u0443 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438: document.querySelectorAll(&#8216;canvas&#8217;).length.\u0412\u044b\u0432\u043e\u0434 \u0434\u0432\u043e\u0439\u043d\u043e\u0439. \u0421 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u043d\u0435 \u0432\u0441\u0451, \u0447\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 3D, \u043d\u0430\u0434\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434\u043e\u043c: \u0438\u043d\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u043e\u043b\u0438\u043a, \u0438 \u0434\u0432\u0430 \u0434\u043d\u044f \u043d\u0430 \u0448\u0435\u0439\u0434\u0435\u0440\u044b \u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u0442\u0440\u0430\u0442\u0438\u0442\u044c. \u0421 \u0434\u0440\u0443\u0433\u043e\u0439 \u2014 \u043a\u043e\u0433\u0434\u0430 \u043c\u043d\u0435 \u0441\u0430\u043c\u043e\u043c\u0443 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u0438\u0441\u044c \u0436\u0438\u0432\u044b\u0435 3D-\u0431\u043b\u043e\u043a\u0438 \u043d\u0430 \u0428\u043a\u043e\u043b\u0435, \u044f \u0441\u043e\u0437\u043d\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u043b \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0439 Three.js, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0431\u043b\u043e\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u043b\u0438 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.\u0413\u043b\u0443\u0431\u043e\u043a\u043e\u0435 \u043f\u0440\u0435\u043f\u0430\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435: \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c \u0447\u0443\u0436\u043e\u0439 \u0434\u0432\u0438\u0436\u043e\u043a \u043d\u0430 27 \u0448\u0435\u0439\u0434\u0435\u0440\u043e\u0432\u0421\u043d\u044f\u0442\u044c DOM \u2014 \u044d\u0442\u043e \u043b\u0451\u0433\u043a\u0438\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c. \u0422\u044f\u0436\u0451\u043b\u044b\u0439 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u0440\u0435\u0444\u0435\u0440\u0435\u043d\u0441 \u2014 \u0442\u043e\u043f\u043e\u0432\u044b\u0439 WebGL-\u0441\u0430\u0439\u0442 \u0438 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u043f\u043e\u043d\u044f\u0442\u044c \u043d\u0435 \u00ab\u0447\u0442\u043e\u00bb, \u0430 \u00ab\u043a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e\u00bb. \u0421\u0430\u043c\u044b\u0439 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043c\u043e\u0439 \u0440\u0430\u0437\u0431\u043e\u0440 \u2014 dala.craftedbygc.com: \u0441\u0430\u0439\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0442\u0443\u0434\u0438\u044f Unseen \u0441\u0434\u0435\u043b\u0430\u043b\u0430 \u0434\u043b\u044f AI-\u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0438\u043a\u0430 Dala (\u0440\u0430\u0437\u0431\u043e\u0440 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0443 \u0441\u0430\u043c\u043e\u0439 \u0441\u0442\u0443\u0434\u0438\u0438). \u0427\u0451\u0440\u043d\u044b\u0439 \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u0438\u043a \u0441 3D-\u00ab\u043c\u043e\u0437\u0433\u043e\u043c\u00bb \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0434\u0435\u0441\u044f\u0442\u0438 \u0442\u044b\u0441\u044f\u0447 \u0446\u0432\u0435\u0442\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0438\u0446-\u043f\u0438\u0440\u0430\u043c\u0438\u0434\u043e\u043a. \u041f\u0440\u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u0435 \u043e\u043d \u0440\u0430\u0437\u043b\u0435\u0442\u0430\u0435\u0442\u0441\u044f, \u043c\u043e\u0440\u0444\u0438\u0442 \u043c\u0435\u0436\u0434\u0443 \u0444\u043e\u0440\u043c\u0430\u043c\u0438 \u0438 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e; \u0441\u0432\u0435\u0440\u0445\u0443 \u043f\u043e\u0441\u0442\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430, smooth-scroll \u0438 \u0442\u0435\u043a\u0441\u0442, \u0432\u044b\u0435\u0437\u0436\u0430\u044e\u0449\u0438\u0439 \u00ab\u0438\u0437-\u043f\u043e\u0434 \u043f\u043e\u043b\u0430\u00bb.\u0422\u0443\u0442 \u043e\u0434\u043d\u0438\u043c \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u043e\u043c \u043d\u0435 \u043e\u0431\u043e\u0439\u0434\u0451\u0448\u044c\u0441\u044f. \u042f \u0441\u043a\u0430\u0447\u0430\u043b \u0431\u0430\u043d\u0434\u043b \u0446\u0435\u043b\u0438\u043a\u043e\u043c, \u043f\u0440\u043e\u0433\u043d\u0430\u043b \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 theme.js \u0447\u0435\u0440\u0435\u0437 beautifier (266 \u041a\u0411 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u043b\u0438\u0441\u044c \u0432 9168 \u0447\u0438\u0442\u0430\u0435\u043c\u044b\u0445 \u0441\u0442\u0440\u043e\u043a) \u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u0441\u043a\u0440\u0438\u043f\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0434\u0440\u0430\u043b \u0438\u0437 \u043d\u0435\u0433\u043e \u0432\u0441\u0435 \u0448\u0435\u0439\u0434\u0435\u0440\u044b. \u041f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c 27 \u0444\u0430\u0439\u043b\u043e\u0432 .glsl.\u0412\u043d\u0443\u0442\u0440\u0438 \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u0434\u0432\u0438\u0436\u043e\u043a \u0431\u0435\u0437 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430, \u043d\u0430 Three.js. GPGPU \u043d\u0430 ping-pong FBO \u2014 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0438 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0447\u0430\u0441\u0442\u0438\u0446 \u0436\u0438\u0432\u0443\u0442 \u0432 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0430\u0445 \u0438 \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0430 GPU, \u0434\u0432\u0435 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0440\u043e\u043b\u044f\u043c\u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u0430\u0434\u0440. \u0427\u0430\u0441\u0442\u0438\u0446\u044b \u2014 InstancedMesh, \u0442\u043e \u0435\u0441\u0442\u044c \u0442\u044b\u0441\u044f\u0447\u0438 \u043a\u043e\u043f\u0438\u0439 \u043e\u0434\u043d\u043e\u0439 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0438 \u0437\u0430 \u043e\u0434\u0438\u043d \u0432\u044b\u0437\u043e\u0432 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438, \u0438\u0437 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0445 .glb-\u043f\u0438\u0440\u0430\u043c\u0438\u0434\u043e\u043a.\u041f\u043e\u0441\u0442\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0434\u0451\u0442 \u0447\u0435\u0440\u0435\u0437 EffectComposer, \u0446\u0435\u043f\u043e\u0447\u043a\u0443 \u044d\u043a\u0440\u0430\u043d\u043d\u044b\u0445 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432: \u0441\u0432\u0435\u0447\u0435\u043d\u0438\u0435 (UnrealBloom), \u0440\u0430\u0437\u043c\u044b\u0442\u0438\u0435 \u043f\u043e \u0433\u043b\u0443\u0431\u0438\u043d\u0435 (Bokeh DoF), \u0432\u0438\u043d\u044c\u0435\u0442\u043a\u0430 \u0438 \u0437\u0435\u0440\u043d\u043e. \u0412\u0441\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043e\u0440\u043a\u0435\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u0438\u043c \u0442\u0438\u043a\u0435\u0440\u043e\u043c GSAP \u043f\u043e\u0432\u0435\u0440\u0445 ASScroll \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043f\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u0430. \u0424\u043e\u0440\u043c\u0430 \u043c\u043e\u0437\u0433\u0430 \u0437\u0430\u0448\u0438\u0442\u0430 \u0432 EXR-\u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443 (\u044d\u0442\u043e \u0444\u043e\u0440\u043c\u0430\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0441 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u043d\u044b\u043c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u043e\u043c), \u0430 \u0448\u0440\u0438\u0444\u0442 \u2014 PP Neue Montreal \u043e\u0442 Pangram Pangram: \u0441\u0432\u043e\u0431\u043e\u0434\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043b\u0438\u0447\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f, \u043a\u043e\u043c\u043c\u0435\u0440\u0447\u0435\u0441\u043a\u0430\u044f \u043b\u0438\u0446\u0435\u043d\u0437\u0438\u044f \u043f\u043b\u0430\u0442\u043d\u0430\u044f.\u0413\u043b\u0430\u0434\u043a\u043e \u044d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0448\u043b\u043e: \u0441\u043a\u0440\u0438\u043f\u0442-\u044d\u043a\u0441\u0442\u0440\u0430\u043a\u0442\u043e\u0440 \u0448\u0435\u0439\u0434\u0435\u0440\u043e\u0432 \u0441 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0440\u0430\u0437\u0430 \u043f\u0430\u0434\u0430\u043b \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0431\u044d\u043a\u0441\u043b\u0435\u0448\u0435\u0439 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0442\u0440\u043e\u043a\u043e\u0432\u044b\u0445 \u043b\u0438\u0442\u0435\u0440\u0430\u043b\u043e\u0432 \u2014 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u0440\u0443\u0447\u043d\u043e\u0439 \u043f\u043e\u0441\u0438\u043c\u0432\u043e\u043b\u044c\u043d\u044b\u0439 \u043f\u0430\u0440\u0441\u0435\u0440.EXR-\u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0430 \u0441 \u00ab\u0444\u043e\u0440\u043c\u043e\u0439\u00bb \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u043d\u0435 \u043e\u0434\u043d\u0438\u043c \u043e\u0431\u043b\u0430\u043a\u043e\u043c. \u0422\u0430\u043c \u0447\u0435\u0442\u044b\u0440\u0435 \u0444\u043e\u0440\u043c\u044b, \u0443\u043f\u0430\u043a\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0432 \u043a\u0432\u0430\u0434\u0440\u0430\u043d\u0442\u044b \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b 200\u00d7200 \u2014 \u043c\u043e\u0437\u0433, \u043b\u0430\u043c\u043f\u043e\u0447\u043a\u0430, \u0433\u043b\u043e\u0431\u0443\u0441, \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u0430\u044f \u0441\u0435\u0442\u044c, \u043f\u043e 100\u00d7100 \u043a\u0430\u0436\u0434\u0430\u044f. \u041d\u0430 \u043f\u0435\u0440\u0432\u043e\u0439 \u043f\u043e\u043f\u044b\u0442\u043a\u0435 \u044f \u0432\u044b\u0442\u0430\u0449\u0438\u043b \u0432\u0441\u0435 40 000 \u0442\u043e\u0447\u0435\u043a \u0441\u043a\u043e\u043f\u043e\u043c \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u043a\u0430\u0448\u0443. \u041f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0440\u0435\u0437\u0430\u0442\u044c \u043f\u043e \u043a\u0432\u0430\u0434\u0440\u0430\u043d\u0442\u0430\u043c.\u0410 Bokeh DoF \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u0432\u044b\u0448\u043b\u043e. \u0415\u043c\u0443 \u043d\u0443\u0436\u0435\u043d depth-\u0431\u0443\u0444\u0435\u0440 \u2014 \u043a\u0430\u0440\u0442\u0430 \u0433\u043b\u0443\u0431\u0438\u043d\u044b \u0441\u0446\u0435\u043d\u044b, \u0430 \u043c\u043e\u0438 \u0447\u0430\u0441\u0442\u0438\u0446\u044b \u0440\u0438\u0441\u0443\u044e\u0442\u0441\u044f \u0441 depthTest:false \u0438 \u0430\u0434\u0434\u0438\u0442\u0438\u0432\u043d\u044b\u043c \u0431\u043b\u0435\u043d\u0434\u0438\u043d\u0433\u043e\u043c, \u0433\u043b\u0443\u0431\u0438\u043d\u0443 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0431\u044b \u043f\u043e\u0434\u0434\u0435\u043b\u044b\u0432\u0430\u0442\u044c.\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u043c\u0435\u043b\u043a\u0430\u044f \u0437\u0430\u0441\u0430\u0434\u0430: \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 python http.server \u043e\u0442\u0434\u0430\u0432\u0430\u043b JS \u0438\u0437 \u043a\u044d\u0448\u0430, \u0438 \u043f\u0440\u0430\u0432\u043a\u0438 \u043d\u0435 \u0431\u044b\u043b\u0438 \u0432\u0438\u0434\u043d\u044b \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u041f\u043e\u043a\u0430 \u043d\u0435 \u043f\u043e\u0434\u043d\u044f\u043b \u0441\u0432\u043e\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u0441 Cache-Control: no-store, \u043b\u0435\u0433\u043a\u043e \u0431\u044b\u043b\u043e \u043f\u0440\u0438\u043d\u044f\u0442\u044c \u0441\u0442\u0430\u0440\u044b\u0439 \u043a\u043e\u0434 \u0437\u0430&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-489776","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/489776","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=489776"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/489776\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=489776"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=489776"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=489776"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}