Подписаться
← В библиотеку

Сайт «Билеты на Марс»

Космическое агентство, которого не существует: живой сайт с анимацией, сделанный одним запросом в Claude Code. Ни строчки кода руками.

▶ Открыть сайт
Как пользоваться. Нажми «Скопировать» и вставь в ChatGPT, Claude или другую нейросеть.

Открой Claude Code в пустой папке, вставь запрос целиком и подожди. Потом правь словами: что поменять, что добавить.

Хочешь свой сайт — замени в запросе блок «ТЕМА»: о чём сайт и каким тоном говорить. Остальное оставь как есть.

Запрос — сайт «Билеты на Марс» — целиком
Сделай в этой папке новый проект в папке `kosmos-sajt` — одностраничный сайт, от которого у человека вырывается «вау». Я покажу его в коротком видео, поэтому важнее всего первое впечатление и то, как страница оживает при прокрутке.

ТЕМА
Вымышленное турагентство «ОРБИТА» продаёт билеты на Марс. Тон — серьёзный дорогой бренд, а внутри лёгкий юмор (обратный билет «по наличию», багаж до 3 кг, вид из окна — «чёрное с точками»). Весь текст на русском.

ЧТО ДОЛЖНО БЫТЬ НА СТРАНИЦЕ
1. Первый экран: огромная объёмная планета Марс медленно вращается, вокруг — глубокое звёздное небо с параллаксом от движения мыши и наклона телефона. Крупный заголовок, кнопка «Купить билет».
2. Полёт при прокрутке: пока человек листает, камера летит от Земли к Марсу — Земля уменьшается, пролетают звёзды и астероиды, растёт Марс. По пути всплывают 4–5 коротких фактов о маршруте (расстояние, время в пути, скорость) с цифрами, которые «набегают».
3. Три тарифа карточками из «матового стекла»: «Эконом (стоя)», «Комфорт», «Первый класс (с окном)». При наведении карточка наклоняется и светится.
4. Обратный отсчёт до старта (дата — 12 апреля ближайшего года) крупными цифрами.
5. Финал: кнопка «Купить билет» — по нажатию ракета улетает вверх через весь экран, и появляется шутливое окно «Билеты закончились в 2019 году. Но вы в списке ожидания».

ОБРАЗЦЫ, НА КОТОРЫЕ РАВНЯТЬСЯ (если есть доступ в интернет — открой и посмотри; если нет — ориентируйся на описание)
- spacex.com — огромные заголовки, тёмные экраны во всю высоту, минимум текста.
- joshworth.com/dev/pixelspace — «Если бы Луна была размером в 1 пиксель»: путешествие, которое разворачивается прокруткой.
- stars.chromeexperiments.com — «100 000 звёзд»: объёмное звёздное небо, ощущение глубины.
- neal.fun/size-of-space — плавная смена масштабов, простые подписи.

КАК СДЕЛАТЬ
- Один файл `index.html` (стили и программа внутри). Открывается двойным щелчком, без установки и без сервера.
- Объём — Three.js, движение при прокрутке — GSAP со ScrollTrigger; обе библиотеки подключи с cdnjs.cloudflare.com. Шрифты — с Google Fonts, с поддержкой кириллицы (например, Unbounded для заголовков и Golos Text для текста).
- Никаких картинок из интернета: планеты, звёзды, астероиды и ракету нарисуй программой (шум, шейдеры, градиенты), чтобы ничего не «отвалилось» и не было чужих изображений.
- Палитра: почти чёрный космос, тёплый оранжево-красный Марс, один холодный акцент (голубой или бирюзовый). Свечение атмосферы, мягкие блики, зерно.
- Плавно работает на телефоне и на ноутбуке: на телефоне уменьшай число звёзд и качество, чтобы не тормозило. Если у человека включено «уменьшить движение» или объёмная графика недоступна — покажи красивую неподвижную версию, а не пустой экран.
- Без счётчиков, форм, регистрации и ключей.

ПРОВЕРКА ПЕРЕД «ГОТОВО»
Открой страницу в браузере без окна, сделай снимки экрана: первый экран, середина полёта, тарифы, финал — на ширине ноутбука и телефона. Посмотри на них сам: если планета плоская, текст налезает или экран пустой — исправь. В консоли не должно быть ошибок.

В КОНЦЕ
Напиши `ЧТО-ЭТО.md` в папке проекта простыми словами: что это, как открыть, что проверено и что нет. Когда закончишь, напиши мне, как открыть результат.
Скачать файлом
Завтра — новый приём от Вайба и КнопкиПодписаться в Instagram

Ещё посмотреть

Скопировано!