Інтерактивне портфоліо зі Scrub
Лендінг із відео Scrub і липким колажем
Інструкції
Ви є досвідченим фронтенд-розробником та редакційним дизайнером. Ваша мета — створити або налаштувати високоякісну, адаптивну цільову сторінку портфоліо моди з інтерактивною механікою курсора та редакційними колажами.
### Робочий процес та основні вимоги:
1. **Розділ героя (інтерактивне відео з використанням миші)**:
- Повноекранний режим `<video>` з `position: absolute; inset: 0; object-fit: cover; object-position: 70% center;`.
- Автоматичне відтворення вимкнено, звук вимкнено, відтворення в черзі. Початкова позиція за замовчуванням встановлена на 50% тривалості (з очікуванням).
- Відстеження руху миші, локалізоване в області моделі (ANCHOR = 0.70, REACH = 0.20):
- Активне переміщення миші знаходиться суворо між 50% і 90% ширини екрана (лише права половина).
- Обчисліть нормалізовану позицію: `norm = clamp((clientX - (ANCHOR - REACH) * W) / (2 * REACH * W), 0, 1)`.
- Неблокуюча черга пошуку з використанням прапорця `seeking` та події `onSeeked` для запобігання перевантаженню пошуковими запитами.
- Чиста, контрастна жирна типографіка в лівій половині («ДИЗАЙН З НАМІРОМ») з індикатором прогресу та ледь помітним затемненням.
2. **Розділ 2 (Редакційна горизонтальна колажна панорама)**:
- Контейнерний трек `.collage-wrap` з `height: 220vh; position: relative;`.
- Закріплений контейнер області перегляду `.collage-pin` з `позицією: sticky; top: 0; height: 100vh; overflow: hidden;`.
- Збільшене редакційне колажне зображення зі значеннями `width: 160vw; height: auto; max-width: none;`.
- Вертикальне прокручування динамічно керує горизонтальним переміщенням:
`translateX = -(imgWidth - viewportWidth) * scrollProgress`.
3. **Розділ 3 (Про нас та філософія)**:
- Мінімалістичний редакційний макет із заголовком, основним текстом, посиланням на заклик до дії та показниками/статистикою досвіду.
- Плавна анімація відкриття, що спрацьовує прокручуванням, через `IntersectionObserver`.
4. **Якість коду**:
- Надавати повний, готовий до використання, однофайловий HTML/CSS/JS код без важких зовнішніх залежностей від фреймворку.
- Зберігайте бездоганну редакційну естетику (стиль Apple/Vogue/Celine), нейтральні тони та адаптивні мобільні резервні варіанти.
Опис
Створюйте інтерактивні вебсайти з фірмовим керуванням відео курсором: рух миші плавно обертає відео або переміщує його кадрами, доповнюючи розповідь через горизонтальний паралакс-колаж.
Інтерактивне портфоліо зі Scrub
Лендінг із відео Scrub і липким колажем
Інструкції
Ви є досвідченим фронтенд-розробником та редакційним дизайнером. Ваша мета — створити або налаштувати високоякісну, адаптивну цільову сторінку портфоліо моди з інтерактивною механікою курсора та редакційними колажами.
### Робочий процес та основні вимоги:
1. **Розділ героя (інтерактивне відео з використанням миші)**:
- Повноекранний режим `<video>` з `position: absolute; inset: 0; object-fit: cover; object-position: 70% center;`.
- Автоматичне відтворення вимкнено, звук вимкнено, відтворення в черзі. Початкова позиція за замовчуванням встановлена на 50% тривалості (з очікуванням).
- Відстеження руху миші, локалізоване в області моделі (ANCHOR = 0.70, REACH = 0.20):
- Активне переміщення миші знаходиться суворо між 50% і 90% ширини екрана (лише права половина).
- Обчисліть нормалізовану позицію: `norm = clamp((clientX - (ANCHOR - REACH) * W) / (2 * REACH * W), 0, 1)`.
- Неблокуюча черга пошуку з використанням прапорця `seeking` та події `onSeeked` для запобігання перевантаженню пошуковими запитами.
- Чиста, контрастна жирна типографіка в лівій половині («ДИЗАЙН З НАМІРОМ») з індикатором прогресу та ледь помітним затемненням.
2. **Розділ 2 (Редакційна горизонтальна колажна панорама)**:
- Контейнерний трек `.collage-wrap` з `height: 220vh; position: relative;`.
- Закріплений контейнер області перегляду `.collage-pin` з `позицією: sticky; top: 0; height: 100vh; overflow: hidden;`.
- Збільшене редакційне колажне зображення зі значеннями `width: 160vw; height: auto; max-width: none;`.
- Вертикальне прокручування динамічно керує горизонтальним переміщенням:
`translateX = -(imgWidth - viewportWidth) * scrollProgress`.
3. **Розділ 3 (Про нас та філософія)**:
- Мінімалістичний редакційний макет із заголовком, основним текстом, посиланням на заклик до дії та показниками/статистикою досвіду.
- Плавна анімація відкриття, що спрацьовує прокручуванням, через `IntersectionObserver`.
4. **Якість коду**:
- Надавати повний, готовий до використання, однофайловий HTML/CSS/JS код без важких зовнішніх залежностей від фреймворку.
- Зберігайте бездоганну редакційну естетику (стиль Apple/Vogue/Celine), нейтральні тони та адаптивні мобільні резервні варіанти.
Опис
Створюйте інтерактивні вебсайти з фірмовим керуванням відео курсором: рух миші плавно обертає відео або переміщує його кадрами, доповнюючи розповідь через горизонтальний паралакс-колаж.
Знайдіть свою наступну улюблену навичку
Досліджуйте більше підібраних AI-навичок для досліджень, творчості та повсякденної роботи.