Library Prompts

Interactive Portfolio

Portfolio prompt with cursor-aware project previews.

Portfolio prompt with cursor-aware project previews.将本资源作为视觉与交互简报使用。把 Prompt 复制到 AI 编程工具，再按你的产品调整布局、品牌语气与动效强度。

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