Skip to content

adding my artsyness to the project #3325

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
firestarnc wants to merge 5 commits into
base: master
Choose a base branch
from
Open

adding my artsyness to the project #3325

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b662e7b
adding my artsyness to the project
firestarnc Dec 4, 2025
46cca32
adding my artsyness to the project
firestarnc Dec 4, 2025
da95dfb
adding my artsyness to the project
firestarnc Dec 4, 2025
ff99a07
adding my artsyness to the project
firestarnc Dec 4, 2025
cb73ad6
adding my artsyness to the project
firestarnc Dec 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions Art/firestarnc-thecross/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Earth & Cross — Sunlift Effect</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<main class="stage" role="main" aria-label="Earth and cross lifting animation">
<div class="scene" aria-hidden="false">
<div class="sun" aria-hidden="true"></div>
<div class="ground">
<div class="earth" aria-hidden="true"></div>
<div class="cross" role="img" aria-label="Cross being lifted">
<span class="bar horizontal"></span>
<span class="bar vertical"></span>
</div>
</div>
</div>
</main>
</body>
</html>
4 changes: 4 additions & 0 deletions Art/firestarnc-thecross/meta.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"artName": "moving cross",
"githubHandle": "firestarnc"
}
49 changes: 49 additions & 0 deletions Art/firestarnc-thecross/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
:root{
--scene-size: 420px;
--earth-size: 160px;
--cross-width: 14px;
--cross-height: 90px;
--sun-size: 260px;
--bg: #050306;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{display:flex;align-items:center;justify-content:center;background:var(--bg);font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial;color:#fff}
.stage{width:100%;max-width:1100px;height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column}
.scene{width:var(--scene-size);height:calc(var(--scene-size) * 0.7);position:relative;perspective:900px;overflow:visible}
.sun{position:absolute;right:-10%;top:-18%;width:var(--sun-size);height:var(--sun-size);background:radial-gradient(circle at 30% 30%, #fff9d6 0%, #ffd66b 12%, rgba(255,200,80,0.7) 35%, rgba(255,180,30,0.08) 65%, transparent 80%);filter:blur(18px) saturate(1.1);transform:translateZ(-120px) rotate(6deg);box-shadow:0 0 120px 40px rgba(255,190,70,0.12), 0 30px 90px rgba(255,160,20,0.06) inset}
.sun::before{content:'';position:absolute;left:-60%;top:30%;width:160%;height:120%;background:linear-gradient(120deg, rgba(255,245,200,0.06) 0%, rgba(255,210,120,0.18) 35%, rgba(255,180,60,0.06) 60%, transparent 100%);transform:rotate(-12deg);pointer-events:none}
.ground{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);width:100%;height:60%;display:flex;align-items:flex-end;justify-content:center}
.earth{width:calc(var(--earth-size) * 1.25);height:calc(var(--earth-size) * 0.36);border-radius:48% 52% 44% 56% / 60% 48% 52% 40%;background:radial-gradient(circle at 30% 30%, #fff2d8 0%, #f1dbb2 22%, #e0c38a 48%, #c69d5a 78%), linear-gradient(90deg, rgba(255,255,255,0.03), rgba(0,0,0,0.02));background-blend-mode:overlay;box-shadow:0 12px 30px rgba(0,0,0,0.56), inset 0 -6px 18px rgba(0,0,0,0.12);transform-origin:center center;z-index:4;margin-bottom:6px;display:block}
.earth::before{content:'';position:absolute;left:50%;bottom:52%;transform:translateX(-50%);width:36%;height:26%;background:radial-gradient(ellipse at center, rgba(0,0,0,0.48), rgba(0,0,0,0.12) 55%, rgba(0,0,0,0) 100%);border-radius:50%;filter:blur(6px);opacity:0.9;z-index:3}
.earth[aria-hidden="true"]{animation:none}

/* cross: continuous gentle float */
.cross{position:absolute;left:50%;bottom:calc(50% - 8px);transform:translateX(-50%) translateY(18px) rotateX(78deg) rotateZ(6deg);transform-origin:50% 100%;width:calc(var(--cross-width) * 3);height:var(--cross-height);display:flex;align-items:center;justify-content:center;pointer-events:none;animation:crossFloat 3.2s ease-in-out 0.6s infinite;z-index:6}
.cross .bar{position:absolute;background:linear-gradient(180deg, #f6f6f6, #ddd);box-shadow:0 6px 18px rgba(0,0,0,0.45);border-radius:4px}
.cross .vertical{width:var(--cross-width);height:var(--cross-height);left:50%;transform:translateX(-50%)}
.cross .horizontal{width:calc(var(--cross-height) * 0.56);height:var(--cross-width);top:calc(50% - var(--cross-width) / 2);left:50%;transform:translateX(-50%)}

.ground::after{content:'';position:absolute;left:50%;bottom:4%;transform:translateX(-50%);width:68%;height:24%;background:radial-gradient(ellipse at center, rgba(0,0,0,0.6), rgba(0,0,0,0.14) 45%, rgba(0,0,0,0.02) 80%);filter:blur(10px);z-index:1}

@keyframes earthRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes crossLift{0%{transform: translateX(-50%) translateY(30px) rotateX(78deg) rotateZ(8deg);opacity:0 }30%{transform: translateX(-50%) translateY(4px) rotateX(44deg) rotateZ(6deg);opacity:1 }60%{transform: translateX(-50%) translateY(-6px) rotateX(14deg) rotateZ(2deg);}100%{transform: translateX(-50%) translateY(-28px) rotateX(0deg) rotateZ(0deg);}}
@keyframes crossFloat{0%{transform:translateX(-50%) translateY(18px) rotateX(78deg) rotateZ(6deg)}50%{transform:translateX(-50%) translateY(-6px) rotateX(14deg) rotateZ(2deg)}100%{transform:translateX(-50%) translateY(18px) rotateX(78deg) rotateZ(6deg)}}

.note{margin-top:18px;color:rgba(255,255,255,0.8);font-size:14px}

@media (prefers-reduced-motion: reduce){.earth,.cross{animation:none;transform:none}}
.cross .horizontal{width:calc(var(--cross-height) * 0.48) !important;height:var(--cross-width);top:8% !important;left:50%;transform:translateX(-50%) !important}

/* Orbiting football animation */
.orbit{position:absolute;inset:0;pointer-events:none;z-index:8}

.orbit-wrap{position:absolute;left:50%;top:50%;width:360px;height:360px;transform:translate(-50%,-50%);animation:orbit 6s linear infinite}
/* football wrapper: apply the moving-circles color palette as a conic gradient background */
.football{position:absolute;left:50%;top:0%;width:96px;height:96px;transform:translate(-50%,-50%);border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;z-index:9;filter:drop-shadow(0 8px 18px rgba(0,0,0,0.45));background:conic-gradient(#ff6b6b 0deg,#f06595 45deg,#cc5de8 90deg,#845ef7 135deg,#5c7cfa 180deg,#339af0 225deg,#22b8cf 270deg,#20c997 315deg,#ff6b6b 360deg);background-size:200% 200%}
.football img{width:70%;height:auto;display:block;animation:spin 1.2s linear infinite}

@keyframes orbit{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes spin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.orbit-wrap,.football img{animation:none}}