Interactive Portfolio

Portfolio prompt with cursor-aware project previews.

Portfolio prompt with cursor-aware 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: Prompts
Category: Portfolio
Style: Editorial
Tech stack: GSAP
Animation: Cursor
Difficulty: Beginner
License: Personal
Access: Free
Views: 135

Cursor
Magnetic
GSAP
JavaScript

Copy. Paste. Create.

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

Prompt an interactive portfolio: cursor-aware previews on fine pointers only, editorial type, case study depth.

Code

<!-- HTML -->
<div class="pc"><span class="tag">AI PROMPT</span><p>Design a cinematic dark landing with one accent and kinetic type…</p></div>

/* CSS */
.pc{width:100%;height:100%;padding:12%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(180deg,#101010,#050505);border-left:3px solid hsl(154 85% 62%)}.tag{font:700 10px/1 system-ui;letter-spacing:.2em;color:hsl(154 85% 62%)}.pc p{margin:.8rem 0 0;font:500 13px/1.55 system-ui;color:rgba(255,255,255,.72);max-width:28ch}

// JS