jeffemmett
/
worldplay-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove glitch effect, fix floating cards overlap 

- Remove glitch effect CSS and HTML wrapper entirely
- Adjust floating card positions to prevent overlap:
  - Card 2 (Economic sci-fi): top 20%
  - Card 3 (Games): bottom 5%, left 10%
  - Card 4 (Parallel worlding): top 50%
  - Card 5 (Guerrilla futuring): bottom 5%, right 5%

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-01-30 15:12:26 +00:00
parent 2c0b2e9169
commit 33baf8d108
1 changed files with 8 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
index.html
View File

@ -217,10 +217,6 @@
pointer-events: none;
}
.glitch-wrapper {
position: relative;
}
.hero h1 {
font-family: 'Space Mono', monospace;
font-size: clamp(3rem, 12vw, 8rem);
@ -241,54 +237,6 @@
display: inline;
}
/* Glitch effect */
.glitch {
position: relative;
}
.glitch::before,
.glitch::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none;
}
.glitch:hover::before {
animation: glitch-1 0.3s linear infinite;
color: var(--accent-cyan);
opacity: 0.8;
z-index: -1;
}
.glitch:hover::after {
animation: glitch-2 0.3s linear infinite;
color: var(--accent-magenta);
opacity: 0.8;
z-index: -2;
}
@keyframes glitch-1 {
0% { clip-path: inset(40% 0 61% 0); transform: translate(-2px, -2px); }
20% { clip-path: inset(92% 0 1% 0); transform: translate(2px, 2px); }
40% { clip-path: inset(43% 0 1% 0); transform: translate(-2px, 2px); }
60% { clip-path: inset(25% 0 58% 0); transform: translate(2px, -2px); }
80% { clip-path: inset(54% 0 7% 0); transform: translate(-2px, 2px); }
100% { clip-path: inset(58% 0 43% 0); transform: translate(2px, -2px); }
}
@keyframes glitch-2 {
0% { clip-path: inset(65% 0 25% 0); transform: translate(2px, 2px); }
20% { clip-path: inset(10% 0 85% 0); transform: translate(-2px, -2px); }
40% { clip-path: inset(75% 0 15% 0); transform: translate(2px, -2px); }
60% { clip-path: inset(50% 0 30% 0); transform: translate(-2px, 2px); }
80% { clip-path: inset(20% 0 70% 0); transform: translate(2px, 2px); }
100% { clip-path: inset(80% 0 5% 0); transform: translate(-2px, -2px); }
}
.subtitle {
font-family: 'Space Mono', monospace;
@ -497,26 +445,26 @@
}
.floating-card:nth-child(2) {
top: 30%;
top: 20%;
right: 0;
animation: float 6s ease-in-out infinite 1s;
}
.floating-card:nth-child(3) {
bottom: 10%;
left: 15%;
bottom: 5%;
left: 10%;
animation: float 6s ease-in-out infinite 2s;
}
.floating-card:nth-child(4) {
top: 55%;
right: 5%;
top: 50%;
right: 0;
animation: float 6s ease-in-out infinite 3s;
}
.floating-card:nth-child(5) {
bottom: 35%;
right: 30%;
bottom: 5%;
right: 5%;
animation: float 6s ease-in-out infinite 4s;
}
@ -1291,9 +1239,7 @@
</nav>
<header class="hero">
<div class="glitch-wrapper">
<h1 class="glitch" data-text="WORLDPLAY"><span class="highlight">WORLD</span>PLAY</h1>
</div>
<h1><span class="highlight">WORLD</span>PLAY</h1>
<p class="subtitle">(TO BE DEFINED)</p>
<div class="cta-group">