Arc Studio

Creative agency landing with oversized type, horizontal cues and interactive project previews.

Experimental agency siteCreative agency landing with oversized type, horizontal cues and interactive project previews.Use this asset as a visual and interaction brief. Copy the prompt into your AI coding tool, then adapt layout, brand voice and motion intensity to your product.

Back to Library

Then paste it into your favorite AI coding tool.

Details

Type: Websites
Category: Agency
Style: Experimental
Tech stack: GSAP
Animation: Magnetic
Libraries: gsap
Difficulty: Advanced
License: Personal
Access: Free
Creator: Noah Bennett
Views: 128

Magnetic
Page Transition
Scroll
GSAP
HTML
JavaScript

Copy. Paste. Create.

This prompt is engineered to communicate visual direction, layout, interaction, animation and technical requirements.

Design Arc Studio — an experimental creative agency website.

Oversized display type, asymmetric layouts, horizontal scroll chapter for selected work (desktop), vertical stack on mobile. Project previews react to pointer with restrained magnetic offset.

Tone: confident, slightly irreverent. One accent. Include About, Work, Approach, Contact. Page transitions: shared fade.

Performance: lazy-load project media; disable horizontal scroll on reduced motion.

Code

<!-- HTML -->
<div class="ed"><p>01</p><h1>Editorial</h1><div class="bar"></div></div>

/* CSS */
.ed{width:100%;height:100%;padding:10%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;background:#070707}.ed p{margin:0;font:600 11px/1 system-ui;letter-spacing:.2em;color:hsl(285 85% 62%)}.ed h1{margin:.6rem 0 1rem;font:700 clamp(1.8rem,7vw,3rem)/1 system-ui;letter-spacing:-.06em;max-width:8ch}.bar{height:2px;width:48%;background:linear-gradient(90deg,hsl(285 85% 62%),transparent);transform-origin:left;animation:grow 1.2s cubic-bezier(.22,1,.36,1) forwards}@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

// JS