test

JS PLAYGROUND — всё, на что способен браузер

браузер умеет больше, чем кажется

JS PLAYGROUND

↓ скролль, тут 8 живых демок
01

Canvas: рисуй мышкой или пальцем

Полноценный рисовалка на <canvas> — координаты мыши/тача, цвет, очистка, экспорт в PNG одной кнопкой (Canvas API + Blob).

02

3D-tilt карточки под курсор

CSS 3D-трансформации, пересчитываемые в реальном времени от позиции мыши — никакого WebGL, чистый CSS + JS-математика.

Perspective
transform-style: preserve-3d + rotateX/Y от координат курсора
Parallax
Заголовок и подпись выступают на разную глубину (translateZ)
60 FPS
requestAnimationFrame throttling, без лагов при скролле
03

Реальные сетевые запросы

Настоящий fetch() к живым публичным API — курс биткоина и случайная цитата. Без ключей, без бэкенда.

Курс BTC/USD — CoinGecko API
Случайная цитата — Quotable API
Нажми кнопку →
04

Web Audio API: живой синтезатор

Осциллятор генерирует звук прямо в браузере, без единого аудиофайла. Жми клавиши или клавиатуру A-S-D-F-G-H-J.

05

Синтез речи (SpeechSynthesis API)

Браузер умеет говорить твой текст вслух — без сервера, без нейросетей, встроенный движок ОС.

06

Тест реакции

Жди зелёный, жми как можно быстрее. Меряется в миллисекундах через performance.now().

Жми, чтобы начать
— мс
лучший результат (localStorage)
07

Список задач с Drag&Drop

Перетаскивай пункты мышкой, чтобы менять порядок (Drag and Drop API). Всё сохраняется в localStorage между визитами.

08

По мелочи, но приятно

Ещё немного возможностей браузера в одном месте.

Буфер обмена
Вибрация (моб. устройства)
Часы и день недели
--:--:--
Собрано на чистом JS, без фреймворков — Canvas, Web Audio, SpeechSynthesis, Drag&Drop, fetch, localStorage, Clipboard, Vibration

Cosmic Kinetic Sandbox  

Зажмите ЛКМ для манипуляции полем.  

FPS: 60 | Частиц: 0
Факт: Загрузка...