NSStudio — это футуристичный, но доступный продукт на стыке биохакинга, цифрового искусства и музыки.
Это новый способ управления эмоциональным состоянием через персонифицированные звуковые паттерны.
Сайт помогает подобрать подходящий продукт для пользователей, а также имеет интерактивные блоки.
Архитектура: Проект представляет собой одностраничный веб-сайт, размещённый через GitHub Pages.
Структура проекта: index.html — основная структура страницы styles.css — стилизация и визуальная айдентика script.js — интерактивность и поведение элементов
Используемые технологии: HTML5 — разметка и структура контента CSS3 — оформление, анимации, адаптивность JavaScript (Vanilla JS) — интерактивные элементы
Инструменты и библиотеки: Three.js — используется для создания и отображения 3D-графики и интерактивных визуальных элементов на сайте.
ИИ-инструменты: ChatGPT — генерация и объяснение кода DeepSeek — помощь с JavaScript-логикой
История разработки
Этап 1. Проектирование структуры и концепции На первом этапе была определена концепция сайта и его структура. HTML-разметка создавалась вручную, с разделением страницы на логические блоки (экран, контентные секции, интерактивные элементы).
Основной задачей было: выстроить последовательность пользовательского сценария заложить основу для будущей анимации и интерактивности
Этап 2. Визуальная реализация (CSS) Далее была реализована визуальная часть проекта: стилизация интерфейса работа с композицией, цветами и типографикой добавление анимаций через CSS
CSS полностью разрабатывался вручную.
Этап 3. Подключение и интеграция 3D-графики На следующем этапе была подключена библиотека Three.js.
Она использовалась для: создания 3D-сцены работы с камерой и рендерингом добавления визуальных объектов (капсулы / абстрактные формы)
Этап 4. Реализация интерактивности (JavaScript) JavaScript-логика разрабатывалась с использованием ИИ: генерация базовых скриптов через ChatGPT и DeepSeek адаптация под существующую HTML-структуру
Реализованы: обработчики событий (скролл, клики) анимации появления элементов взаимодействие с 3D-сценой
Типичные проблемы: несоответствие селекторов HTML и JS избыточный код (лишние функции, неиспользуемые переменные) ошибки при работе с Three.js
Решения: ручная правка селекторов и структуры упрощение логики поэтапная проверка работы каждого скрипта
Этап 5. Тестирование и оптимизация После реализации функциональности проект проходил этап доработки: исправление визуальных багов
Также была проведена финальная адаптация проекта перед публикацией через GitHub Pages.
Разработка проекта представляла собой сочетание:
ручного создания структуры и дизайна использования ИИ для ускорения разработки логики
ИИ использовался как инструмент генерации и обучения.
История запросов к ИИ
Работа с ИИ-инструментами (ChatGPT и DeepSeek) происходила поэтапно: от базовых запросов к более точечным и техническим.
«напиши JS для появления элементов при скролле с классом .section» «как сделать плавный скролл к якорю» «почему не работает addEventListener в моем коде»
Работа с Three.js
При подключении Three.js запросы стали более специализированными:
«создай базовую сцену three.js с камерой и renderer» «как добавить объект и анимацию вращения» «почему canvas не отображается на весь экран» «как связать three.js сцену с html блоком»
Сложности: ИИ генерировал код без учёта текущей структуры страницы возникали ошибки позиционирования и размеров
Решение: ручная адаптация параметров (camera, renderer, canvas) упрощение сцены
Отладка и исправление ошибок: ИИ активно использовался как инструмент дебага:
«почему не работает этот код» + вставка своего JS «исправь ошибку в функции» «объясни что делает этот код»
На этом этапе ИИ использовался не только для генерации, но и для понимания логики.
Финальный этап: Запросы стали максимально конкретными:
«оптимизируй этот код без изменения логики» «убери лишние функции» «сделай код проще и чище»
Результат: уменьшение объёма JS улучшение читаемости более стабильная работа сайта
Это позволило: сократить время разработки повысить качество кода лучше понять принципы работы JavaScript и Three.js
ИИ использовался не только как генератор, но и как инструмент обучения и отладки.
