[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import { useState } from "react" import { EntryRitual } from "@/components/entry-ritual" import { GrandStage } from "@/components/grand-stage" export default function StarliumCircus() { const [hasEntered, setHasEntered] = useState(false) return (

{!hasEntered ? setHasEntered(true)} /> : }

) } [V0_FILE]typescriptreact:file="components/grand-stage.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import Image from "next/image" import { CrystalBall } from "@/components/crystal-ball" import { EclipsedCharacters } from "@/components/eclipsed-characters" import { HarviqueStatue } from "@/components/harvique-statue" import { StarlianBook } from "@/components/starlian-book" import { MessengerBird } from "@/components/messenger-bird" import { CarnivalCodex } from "@/components/carnival-codex" import { Scrollworks } from "@/components/scrollworks" import { NftArchive } from "@/components/nft-archive" import { SocialOverlay } from "@/components/social-overlay" import { CharacterOverlay } from "@/components/character-overlay" export type Character = { id: string name: string image: string title: string bio: string story: string } const eclipsedCharacters: Character[] = [ { id: "larcles", name: "Larcles", image: "/images/larcles.png", title: "The Masked Sovereign", bio: "Age: Unknown | Origin: The Twilight Realm | Role: Ringmaster of Shadows", story: "Larcles emerged from the void between worlds, drawn by the eternal lights of the Starlium Circus. Wielding a staff crowned with a crystal of pure starlight, he commands the space between reality and dreams. His mask conceals not a face, but an infinite darkness that reflects the deepest desires of those who gaze upon it.", }, { id: "corveth", name: "Corveth", image: "/images/corveth.png", title: "The Flame Whisperer", bio: "Age: 17 eternities | Origin: The Ashen Peaks | Role: Master of Dark Flames", story: "Born in the smoldering ruins of a forgotten kingdom, Corveth learned to commune with flames that burn without light. His dark fire dances at his command, weaving stories of lost souls and forgotten memories. The skull upon his chest marks him as one who has crossed the threshold of death and returned.", }, ] export function GrandStage() { const [showCodex, setShowCodex] = useState(false) const [showScrollworks, setShowScrollworks] = useState(false) const [showArchive, setShowArchive] = useState(false) const [showSocial, setShowSocial] = useState(false) const [selectedCharacter, setSelectedCharacter] = useState(null) const [isVisible, setIsVisible] = useState(false) useEffect(() => { const timer = setTimeout(() => setIsVisible(true), 100) return () => clearTimeout(timer) }, []) return (

{/* Background wrapper */}

Starobject-cover px-4 px-4 px-4 px-4Grand Stage

{/* Ambient lighting overlay */}

{/* Crystal Ball */} setShowCodex(true)} /> {/* Characters */} {/* Props */} setShowScrollworks(true)} /> setShowArchive(true)} /> setShowSocial(true)} /> {/* Overlays */} {showCodex && setShowCodex(false)} />} {showScrollworks && setShowScrollworks(false)} />} {showArchive && ( setShowArchive(false)} /> )} {showSocial && setShowSocial(false)} />} {selectedCharacter && ( setSelectedCharacter(null)} /> )}

) } [V0_FILE]typescriptreact:file="components/crystal-ball.tsx" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" interface CrystalBallProps { onClick: () => void } export function CrystalBall({ onClick }: CrystalBallProps) { const [isHovered, setIsHovered] = useState(false) const [isClicked, setIsClicked] = useState(false) const handleClick = () => { setIsClicked(true) setTimeout(() => { setIsClicked(false) onClick() }, 600) } return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} onClick={handleClick} >

{/* CLICK BURST GLOW (LAYER PALING BAWAH) */} {isClicked && (

)} {/* HOVER GLOW */}

{/* CRYSTAL BALL */} Carnival Codex Crystal Ball

{/* PARTICLES */}

{[...Array(10)].map((_, i) => { const radius = 14 + (i % 3) * 2 return ( ) })}

{/* KEYFRAMES */}

) } [V0_FILE]typescriptreact:file="components/eclipsed-characters.tsx" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" import type { Character } from "@/components/grand-stage" interface EclipsedCharactersProps { characters: Character[] onCharacterClick: (character: Character) => void } export function EclipsedCharacters({ characters, onCharacterClick, }: EclipsedCharactersProps) { const [hoveredIndex, setHoveredIndex] = useState(null) return ( <> {/* CHARACTER 1 */} {characters[0] && (

)} {/* CHARACTER 2 */} {characters[1] && (

)} ) } function CharacterCard({ character, index, hoveredIndex, setHoveredIndex, onCharacterClick, }: { character: Character index: number hoveredIndex: number | null setHoveredIndex: (i: number | null) => void onCharacterClick: (character: Character) => void }) { const isHovered = hoveredIndex === index return (

setHoveredIndex(index)} onMouseLeave={() => setHoveredIndex(null)} onClick={() => onCharacterClick(character)} > {/* SPOTLIGHT (VISUAL ONLY, NO HITBOX) */}

{/* SHADOW (VISUAL ONLY, NO HITBOX) */}

{/* CHARACTER IMAGE (HITBOX UTAMA) */}

{/* CHARACTER NAME */}

{character.name}

) } [V0_FILE]typescriptreact:file="components/harvique-statue.tsx" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" interface HarviqueStatueProps { onClick: () => void } export function HarviqueStatue({ onClick }: HarviqueStatueProps) { const [isHovered, setIsHovered] = useState(false) return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} onClick={onClick} >

{/* Ultra bright core - tetap stabil tapi ikut sedikit berdenyut */}

{/* Soft halo - stabil */}

{/* RAYS: benar-benar ilang total → timbul perlahan → ilang lagi */}

{/* Primary rays */}

{/* Secondary rays - fase sedikit beda biar lebih alami */}

{/* Patung */} Harvique Statue - Scrollworks

{/* Tooltip */}

Scrollworks

{/* Animations - efek breathe yang benar-benar mati-nyala */}

) } [V0_FILE]typescriptreact:file="components/starlian-book.tsx" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" interface StarlianBookProps { onClick: () => void } export function StarlianBook({ onClick }: StarlianBookProps) { const [isHovered, setIsHovered] = useState(false) return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} onClick={onClick} >

{/* AURA - diperbaiki gradientnya */}

{/* BOOK - ditambahkan animasi rotasi terus-menerus */} Starlians Archive

{/* TOOLTIP */}

NFT Archive

) } [V0_FILE]typescriptreact:file="components/messenger-bird.tsx" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" interface MessengerBirdProps { onClick: () => void } export function MessengerBird({ onClick }: MessengerBirdProps) { const [isHovered, setIsHovered] = useState(false) return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} onClick={onClick} >

{/* Tooltip */}

Connect

{/* Animasi floating naik-turun halus */}

) } [V0_FILE]typescriptreact:file="components/carnival-codex.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" interface CarnivalCodexProps { onClose: () => void } export function CarnivalCodex({ onClose }: CarnivalCodexProps) { const [isVisible, setIsVisible] = useState(false) useEffect(() => { setTimeout(() => setIsVisible(true), 50) }, []) const handleClose = () => { setIsVisible(false) setTimeout(onClose, 500) } return (

{/* Backdrop */}

{/* Content */}

e.stopPropagation()} > {/* Decorative corners */}

The Carnival Codex

{'"Where starlight meets shadow, the eternal show begins..."'}

The Origin

In the realm between dreams and waking, where the veil of reality grows thin, there exists a place of eternal wonder — the Starlium Circus. Born from the first tear of a dying star, this mystical carnival has traveled through dimensions for millennia, collecting souls, stories, and secrets from every world it touches.

The Performers

The inhabitants of Starlium are not merely performers — they are beings transformed by the circus's ancient magic. Each has traded something precious for the gift of immortality within the circus walls. Some gave their names, others their shadows, and a few... their very humanity.

The Eternal Night

Within the Starlium Circus, time moves differently. The night here lasts forever, lit by chandeliers that burn with captured starlight. Those who enter as guests may find themselves staying longer than intended, enchanted by performances that blur the line between magic and madness.

The Invitation

Not everyone can find the Starlium Circus — it finds you. When you receive your ticket, know that you have been chosen. The question is not whether you will attend, but whether you will ever leave...

{/* Close hint */}

Click anywhere to close

) } [V0_FILE]typescriptreact:file="components/scrollworks.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" interface ScrollworksProps { onClose: () => void } export function Scrollworks({ onClose }: ScrollworksProps) { const [isVisible, setIsVisible] = useState(false) useEffect(() => { setTimeout(() => setIsVisible(true), 50) }, []) const handleClose = () => { setIsVisible(false) setTimeout(onClose, 500) } return (

{/* Backdrop */}

{/* Scroll-like content */}

e.stopPropagation()} > {/* Parchment background */}

Scrollworks

The Sacred Texts of Starlium

I. The Covenant

The Starlium Circus operates under ancient laws, written in starlight and sealed with shadow. Those who join the circus become bound to its eternal performance, their fates intertwined with the cosmic dance of the carnival.

II. The Starlian Tokens

Each character within the Starlium universe exists as a unique token of power. These tokens represent souls captured in the moment of their greatest performance, forever preserved in the eternal night.

III. The Hierarchy

At the apex stands the Ringmaster, keeper of the circus's deepest secrets. Below them, the Eclipsed — beings of immense power who command the shadows. Then come the Performers, each wielding unique abilities, and finally, the Guests — mortal souls who have been granted temporary passage.

IV. The Promise

To hold a Starlian token is to become part of the eternal story. As the circus evolves, so too shall the tales of its inhabitants, forever expanding into new realms of wonder and mystery.

{/* Close hint */}

Click anywhere to close

) } [V0_FILE]typescriptreact:file="components/nft-archive.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import Image from "next/image" import type { Character } from "@/components/grand-stage" interface NftArchiveProps { onCharacterClick: (character: Character) => void onClose: () => void } const nftCharacters: Character[] = [ { id: "larcles", name: "Larcles", image: "/images/larcles.png", title: "The Masked Sovereign", bio: "Age: Unknown | Origin: The Twilight Realm | Role: Ringmaster of Shadows", story: "Larcles emerged from the void between worlds, drawn by the eternal lights of the Starlium Circus.", }, { id: "corveth", name: "Corveth", image: "/images/corveth.png", title: "The Flame Whisperer", bio: "Age: 17 eternities | Origin: The Ashen Peaks | Role: Master of Dark Flames", story: "Born in the smoldering ruins of a forgotten kingdom, Corveth learned to commune with flames that burn without light.", }, ] export function NftArchive({ onCharacterClick, onClose }: NftArchiveProps) { const [isVisible, setIsVisible] = useState(false) useEffect(() => { setTimeout(() => setIsVisible(true), 50) }, []) const handleClose = () => { setIsVisible(false) setTimeout(onClose, 500) } const handleCharacterClick = (character: Character) => { setIsVisible(false) setTimeout(() => { onClose() onCharacterClick(character) }, 500) } return (

{/* Backdrop */}

{/* Content */}

e.stopPropagation()} >

The Starlians

Souls of the Eternal Night

{/* Character Grid */}

{nftCharacters.map((character, index) => (

handleCharacterClick(character)} style={{ animationDelay: `${index * 100}ms` }} >

{/* Character Image */}

{/* Character Info */}

{character.name}

{character.title}

))}

{/* Close hint */}

Click anywhere to close

) } [V0_FILE]typescriptreact:file="components/social-overlay.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" interface SocialOverlayProps { onClose: () => void } const socialLinks = [ { name: "Discord", icon: "💬", url: "#" }, { name: "Twitter", icon: "🐦", url: "#" }, { name: "Instagram", icon: "📸", url: "#" }, { name: "Email", icon: "✉️", url: "mailto:contact@starliumcircus.com" }, ] export function SocialOverlay({ onClose }: SocialOverlayProps) { const [isVisible, setIsVisible] = useState(false) useEffect(() => { setTimeout(() => setIsVisible(true), 50) }, []) const handleClose = () => { setIsVisible(false) setTimeout(onClose, 500) } return (

{/* Backdrop */}

{/* Content */}

e.stopPropagation()} >

Send Word to the Circus

{socialLinks.map((link, index) => ( {link.icon} {link.name} ))}

{/* Close hint */}

Click anywhere to close

) } [V0_FILE]typescriptreact:file="components/character-overlay.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import Image from "next/image" import type { Character } from "@/components/grand-stage" interface CharacterOverlayProps { character: Character onClose: () => void } export function CharacterOverlay({ character, onClose }: CharacterOverlayProps) { const [isVisible, setIsVisible] = useState(false) const [activeTab, setActiveTab] = useState<"story" | "themes">("story") useEffect(() => { setTimeout(() => setIsVisible(true), 50) }, []) const handleClose = () => { setIsVisible(false) setTimeout(onClose, 500) } const handleMeet = () => { window.open("https://opensea.io/starliumcircus", "_blank") } return (

{/* Backdrop with spotlight effect */}

{/* Content */}

e.stopPropagation()} > {/* Character Image */}

{/* Character Info */}

{/* Tabs */}

{character.name}

{character.title}

{character.bio}

{activeTab === "story" ? (

{character.story}

) : (

{[1, 2, 3].map((i) => (

))}

)}

{/* Close hint */}

Click anywhere to close

) } [V0_FILE]css:file="app/globals.css" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.05 0 0); --foreground: oklch(0.95 0.02 60); --card: oklch(0.1 0.01 300); --card-foreground: oklch(0.95 0.02 60); --popover: oklch(0.08 0.01 300); --popover-foreground: oklch(0.95 0.02 60); --primary: oklch(0.75 0.15 60); --primary-foreground: oklch(0.1 0 0); --secondary: oklch(0.25 0.05 300); --secondary-foreground: oklch(0.95 0.02 60); --muted: oklch(0.2 0.02 300); --muted-foreground: oklch(0.65 0.05 60); --accent: oklch(0.55 0.2 300); --accent-foreground: oklch(0.95 0.02 60); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.3 0.05 60); --input: oklch(0.2 0.02 300); --ring: oklch(0.75 0.15 60); --radius: 0.625rem; --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } /* Definisikan utility custom agar bisa dipakai di @apply (wajib di Tailwind v4) */ @utility border-border { border-color: var(--border); } @utility input-border { border-color: var(--input); } @utility outline-ring { outline-color: var(--ring); } @utility bg-background { background-color: var(--background); } @utility text-foreground { color: var(--foreground); } @theme inline { --font-sans: "Cinzel", "Times New Roman", serif; --font-serif: "Cinzel Decorative", "Times New Roman", serif; --font-mono: "Geist Mono", monospace; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* Custom scrollbar */ .custom-scrollbar::-webkit-scrollbar { width: 6px; } .custom-scrollbar::-webkit-scrollbar-track { background: rgba(139, 69, 19, 0.1); border-radius: 3px; } .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(218, 165, 32, 0.4); border-radius: 3px; } .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(218, 165, 32, 0.6); } /* Transition duration */ .duration-1500 { transition-duration: 1500ms; } /* Gradient radial utility */ .bg-gradient-radial { background: radial-gradient(circle, var(--tw-gradient-stops)); } /* Animations - Bird Approach */ @keyframes bird-approach { 0% { transform: translate(-150px, -100px) scale(0.7); opacity: 0.3; } 100% { transform: translate(0, 0) scale(1); opacity: 1; } } .animate-bird-approach { animation: bird-approach 5s cubic-bezier(0.2, 0.6, 0.4, 1) forwards; } /* === TAMBAHAN BARU: Animasi untuk Starlian Book === */ /* Floating / mengambang halus */ @keyframes book-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } .animate-book-float { animation: book-float 6s ease-in-out infinite; } /* Rotasi lambat terus-menerus */ @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .animate-spin-slow { animation: spin-slow 20s linear infinite; } /* === AKHIR TAMBAHAN === */ [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Cinzel, Cinzel_Decorative, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const cinzel = Cinzel({ subsets: ["latin"], variable: "--font-cinzel", }) const cinzelDecorative = Cinzel_Decorative({ subsets: ["latin"], weight: ["400", "700", "900"], variable: "--font-cinzel-decorative", }) const geistMono = Geist_Mono({ subsets: ["latin"], variable: "--font-geist-mono", }) export const metadata: Metadata = { title: "Starlium Circus | The Night Will Last Forever", description: "Enter the eternal night of the Starlium Circus. A mystical carnival where starlight meets shadow and the show never ends.", keywords: ["NFT", "Starlium Circus", "Digital Art", "Fantasy", "Collectibles"], openGraph: { title: "Starlium Circus | The Night Will Last Forever", description: "Enter the eternal night of the Starlium Circus.", type: "website", }, } export const viewport = { themeColor: "#1a0a2e", width: "device-width", initialScale: 1, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]jpeg:file="public/images/frontside.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/frontside-Ehnwa0ZNXa0CghSmvnUJZCdISBCzNt.jpeg" isMerged="true" [V0_FILE]png:file="public/images/ticket-20-281-29.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ticket%20%281%29-jfnkMRSGN4PATZfeG1jOFnufjSDwWJ.png" isMerged="true" [V0_FILE]jpeg:file="public/images/homepage-20-281-29.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/homepage%20%281%29.png-1xU81U6zqMvdVudqKrOkuKAoWP6YMO.jpeg" isMerged="true" [V0_FILE]png:file="public/images/bolacrystal-20-281-29.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/bolacrystal%20%281%29-pvb2Hf6xwHsfjxyFExE486BnhPRRR2.png" isMerged="true" [V0_FILE]png:file="public/images/harviquestatue-20-281-29.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/harviquestatue%20%281%29-24OKhxPjxjPYZBPArhzyoWiKzKSd5I.png" isMerged="true" [V0_FILE]png:file="public/images/book.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/book-2VF5mfeRdBsp0M2LP15OoWyvOLQy6m.png" isMerged="true" [V0_FILE]png:file="public/images/merpati-20-282-29.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/merpati%20%282%29-roPR7ZbnBL8cnEeFFAN3YDBM2CL3lk.png" isMerged="true" [V0_FILE]png:file="public/images/larcles.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/larcles-L8pEYC0dKqSzBMaeHDU9X414QfZuej.png" isMerged="true" [V0_FILE]png:file="public/images/corveth.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/corveth-hswmeiquWsgp5zpls73n3GNoBlVFJb.png" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]jpg:file="public/images/starliumfront.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/starliumfront-ydjBEozePp80ml28capaYWazrMlPC7.jpg" [V0_FILE]typescriptreact:file="components/entry-ritual.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import Image from "next/image" import { motion } from "framer-motion" interface EntryRitualProps { onEnter: () => void } export function EntryRitual({ onEnter }: EntryRitualProps) { const [isFading, setIsFading] = useState(false) const [isGlitching, setIsGlitching] = useState(false) useEffect(() => { const interval = setInterval(() => { setIsGlitching(true) setTimeout(() => setIsGlitching(false), 300) }, 2000) return () => clearInterval(interval) }, []) const handleClick = () => { setIsFading(true) setTimeout(onEnter, 1500) } return (

{/* BACKGROUND */}

{/* FADE */}

{/* CENTER */}

{/* ⬆️ POSISI + SIZE CONTROLLER (NAIK LAGI) */}

{/* GLITCH COPY */}

{/* BASE TICKET */}

) }