Library Websites

Orbit Finance

Fintech landing with orbital motif and calm type.

Fintech landing with orbital motif and calm type.将本资源作为视觉与交互简报使用。把 Prompt 复制到 AI 编程工具，再按你的产品调整布局、品牌语气与动效强度。

Back to Library

Then paste it into your favorite AI coding tool.

Details

Type: Websites
Category: Saas
Style: Futuristic
Tech stack: CSS
Animation: Cursor
Difficulty: Beginner
License: Personal
Access: Free
Views: 816

Cursor
Parallax
CSS
React

Copy. Paste. Create.

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

Orbit Finance SaaS landing: orbital hero motif, calm typography, one accent, trust strip below fold only.

Code

<!-- HTML -->
<div class="sys" id="sys"><span></span><span></span><span></span><span></span></div>

/* CSS */
body{display:grid;place-items:center}.sys{position:relative;width:min(52vmin,220px);height:min(52vmin,220px)}.sys span{position:absolute;inset:18%;border:1px solid rgba(255,255,255,.12);border-radius:50%;animation:spin 12s linear infinite}.sys span:nth-child(1){inset:0;border-color:hsl(67 85% 62%);opacity:.5;animation-duration:18s}.sys span:nth-child(2){inset:12%;animation-direction:reverse;animation-duration:14s}.sys span:nth-child(3){inset:28%;border-color:hsl(174 70% 55%);animation-duration:9s}.sys span:nth-child(4){inset:40%;background:radial-gradient(circle,hsl(67 85% 62%),transparent 70%);border:0;animation:pulse 3s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{transform:scale(1.15);opacity:.7}}

// JS
var s=document.getElementById("sys");window.addEventListener("pointermove",function(e){var r=s.getBoundingClientRect(),dx=(e.clientX-(r.left+r.width/2))/30,dy=(e.clientY-(r.top+r.height/2))/30;s.style.transform="perspective(600px) rotateY("+dx+"deg) rotateX("+(-dy)+"deg)"});