Генератор структуры ТЗ
Опишите продукт одной фразой — демо соберёт каркас технического задания.
PSP / ЛАБОРАТОРИЯ / 001
PSP
Листать эксперименты ↓
PSP
ЛАБ
Тестируем движение, свет, глубину, физику и генеративную графику. Всё на этой странице реагирует на скролл, мышь, касание или время.
Графический эксперимент активендвигайте курсором
002 / КАТАЛОГ
Эксперименты PSP
Каждый модуль — самостоятельный технический приём, который можно использовать в коммерческом проекте там, где он помогает подаче продукта.
01Шейдерная площадкаЖидкость, шум, плазма, стекло и искажения.
023D-пространствоНоутбук, телефон и интерфейсные слои.
03Типографика из частицТекст собирается и разлетается от указателя.
04Сцена по скроллуПять состояний одного цифрового продукта.
05Лаборатория курсораТочка, след, магнит и эластичный режим.
06Стекло и преломлениеИнтерактивные параметры материала.
07Генеративный постерНовая композиция создаётся в реальном времени.
08Физическая площадкаТехнологии становятся живыми объектами.
09AI LabТЗ, анализ заявки, структура сайта и база знаний.
019 / AI LAB
AI-инструменты продукта
Локальные демонстрации сценариев: генерация структуры ТЗ, анализ заявки, структура сайта и поиск по базе знаний. Никакие данные из этих демо не отправляются во внешнюю AI-модель.
AI-анализ заявки
Демо классифицирует сложность и подсвечивает вопросы для discovery.
Структура сайта
Введите отрасль — получите пример информационной архитектуры.
Поиск по базе знаний
Попробуйте: SolarShadow, Cloudrive, marketplace, WebAR.
003 / ШЕЙДЕРНАЯ ПЛОЩАДКА
Свет, шум и постобработка
Переключайте пресеты и параметры. Эффект сразу применяется к главному WebGL-холсту наверху страницы.
Живое превью · меняется сразу
ДвижокWebGL с автоматическим упрощением
004 / 3D-ПРОСТРАНСТВО
Продуктовая комната
Двигайте мышью или наклоняйте телефон. Сцена показывает, как один интерфейс может жить сразу на нескольких устройствах.
PSPВеб-платформа
09:41Мобильный
интерфейс
интерфейс
01Дизайн-система
02Анимация
03Производительность60кадр/с
ПОТЯНИТЕ / НАКЛОНИТЕ
005 / ТИПОГРАФИКА ИЗ ЧАСТИЦ
PSP собирается из точек
Частицы стремятся к форме текста, но разлетаются рядом с указателем и затем возвращаются на место.
двигайте указателем по буквам
006 / МАГНИТНАЯ ТИПОГРАФИКА
Текст чувствует курсор
Крупные слова изгибаются и смещаются в направлении движения пользователя.
ДИЗАЙН
КОД
ДВИЖЕНИЕ
007 / СЦЕНА ПО СКРОЛЛУ
Сетка
Начинаем со структуры и ритма интерфейса.
01 / 05008 / ЛАБОРАТОРИЯ КУРСОРА
Выберите поведение
Режим применяется к курсору лаборатории на устройствах с мышью.
Наведи сюда
Интерактивная область
009 / 3D-КАРТОЧКИ
Глубина интерфейса
Перспектива, многослойность, блики и возможность «разобрать» карточку на составные части.
Глубина
без перегруза.
ДВИГАЙТЕ ↗
Движение
по смыслу.
60 КАДР/С
Дизайн ×
инженерия.
идея → дизайн
→ код
→ запускTYPESCRIPT010 / СТЕКЛО И ПРЕЛОМЛЕНИЕ
Настройте материал
Прозрачность, размытие, блик, шум и преломление меняются в реальном времени.
Прозрачный
интерфейс.
Материал реагирует на выбранные параметры.
011 / ВРЕМЕННАЯ ШКАЛА
Мини-редактор движения
Выберите тип анимации, длительность и кривую. Карточка справа сразу воспроизведёт результат.
PSPЭлемент интерфейса
012 / ПОКАДРОВАЯ АНИМАЦИЯ
Скролл управляет кадром
Серия состояний интерфейса имитирует видео, но каждый кадр генерируется прямо в браузере.
Кадр 01 / 36
013 / ЗВУК И КАМЕРА
Реакция на окружающую среду
Звук влияет на шейдер, а камера — только после явного разрешения пользователя — становится частью интерактивной композиции.
Шейдер слышит ритм.
Используется синтезированный звук внутри браузера. Ничего не загружается на сервер.
Движение становится текстурой.
Камера выключена
Видео обрабатывается локально в браузере и не отправляется на сервер.014 / ГЕНЕРАТИВНЫЙ ПОСТЕР
Каждый вариант уникален
Сетка, типографика, линии и композиция меняются по алгоритму. Постер можно перегенерировать одним нажатием.
Двигайте курсором над постером, чтобы менять глубину композиции.
015 / ФИЗИЧЕСКАЯ ПЛОЩАДКА
Технологии подчиняются физике
Толкайте объекты мышью, добавляйте новые и наблюдайте за столкновениями.
016 / РЕТРО-РЕНДЕР
Цифровая машина времени
Переключайте способ рендера, меняйте интенсивность помех и скорость кадра. Экран реагирует на движение указателя как старый кинескоп.
PSP / SIGNAL UNITТЕКСТОВЫЙ СИГНАЛ
PSP
ЛАБ
ЛАБ
CH 016
КАДР 0000
УПРАВЛЕНИЕ
Двигайте курсор внутри монитора — изображение слегка смещается и «плывёт».
017 / БЕСКОНЕЧНАЯ ГАЛЕРЕЯ
Двигайте плоскость в любом направлении.
Колесо мыши, трекпад или перетаскивание перемещают бесконечное поле экспериментальных работ.
018 / ПОРТАЛЬНЫЕ ПЕРЕХОДЫ
Карточка становится сценой
Если браузер поддерживает API переходов между представлениями, карточка превращается в сцену единой пространственной анимацией. Иначе включается плавный резервный переход.