Skip to content

Draw the circle to enter, with sound on by default #37

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

Merged
itsskofficial merged 1 commit into from
Oct 24, 2026
Merged

Draw the circle to enter, with sound on by default #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
12 changes: 12 additions & 0 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
--animate-marquee: marquee 30s linear infinite;
--animate-marquee-rev: marquee-rev 36s linear infinite;
--animate-spin-slow: spin 24s linear infinite;
--animate-breathe: breathe 4.5s ease-in-out infinite;

@keyframes marquee {
from {
Expand All @@ -32,6 +33,17 @@
transform: translateX(-50%);
}
}
@keyframes breathe {
0%,
100% {
transform: scale(0.97);
opacity: 0.85;
}
50% {
transform: scale(1.03);
opacity: 1;
}
}
@keyframes wave-run {
to {
transform: translateX(-11px);
Expand Down
13 changes: 7 additions & 6 deletions components/home/Hero.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { motion, useScroll, useTransform } from "motion/react"

const LiquidWord = dynamic(() => import("@components/three/LiquidWord"), { ssr: false })

export default function Hero() {
export default function Hero({ entered = true }) {
const ref = useRef(null)
const { scrollYProgress } = useScroll({ target: ref, offset: ["start start", "end start"] })
const y = useTransform(scrollYProgress, [0, 1], ["0%", "35%"])
Expand All @@ -21,16 +21,17 @@ export default function Hero() {
className="relative flex h-[100svh] items-center justify-center overflow-hidden"
>
<motion.div style={{ y, opacity, scale }} className="absolute inset-0">
<LiquidWord word="EXISTENCE" />
{/* the word settles out of chaos only once the visitor is actually looking at it */}
<LiquidWord word="EXISTENCE" play={entered} />
</motion.div>

{/* corners */}
<div className="gutter pointer-events-none absolute inset-x-0 bottom-[max(1.5rem,env(safe-area-inset-bottom))] flex items-end justify-between sm:bottom-[max(2rem,env(safe-area-inset-bottom))]">
<motion.figure
className="max-w-[17rem]"
initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 2.2, duration: 1 }}
animate={entered ? { opacity: 1, y: 0 } : { opacity: 0, y: 12 }}
transition={{ delay: 1.8, duration: 1 }}
>
<blockquote className="serif-it text-[1.15rem] leading-snug opacity-90">
&ldquo;The best way to predict the future is to invent it.&rdquo;
Expand All @@ -40,8 +41,8 @@ export default function Hero() {
<motion.div
className="hidden flex-col items-center gap-3 sm:flex"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 2.4, duration: 1 }}
animate={{ opacity: entered ? 1 : 0 }}
transition={{ delay: 2, duration: 1 }}
>
<span className="label">Scroll</span>
<span className="relative block h-12 w-px overflow-hidden bg-[var(--line)]">
Expand Down
Loading
Loading