feat: premium polish pass — typing effect, animated counters, ambient orbs, input glow, show/hide password, redesigned settings, Reveal animations

- Add TypewriterText component for hero heading animation
- Add AnimatedCounter with scroll-triggered count-up
- Add AmbientOrbs with floating gradient orbs in hero
- Add input-glow focus effect, btn-shine hover effect CSS
- Add show/hide password toggle on login, register, and home login forms
- Redesign settings page with premium gradient cards and icon headers
- Polish /me dashboard with Reveal animations, btn-shine, input-glow
- Add animate-count CSS keyframe

src/app/(site)/me/page.tsx

@@ -4,6 +4,7 @@ import { redirect } from "next/navigation";
 import type { CSSProperties, ReactNode } from "react";
 import { claimReferral } from "@/actions/referral";
 import { ContentCard, EmptyState, OnlineBadge } from "@/components/public/ui";
+import { Reveal } from "@/components/motion-reveal";
 import { auth } from "@/lib/auth";
 import { avatarImageUrl } from "@/lib/format";
 import { resolveHotelName } from "@/lib/hotel-name";
@@ -189,6 +190,7 @@ export default async function MePage({
 				) : null}
 
 				{/* ── Profile header ── */}
+				<Reveal>
 				<div
 					className="rounded-2xl border p-6 flex flex-col sm:flex-row items-center sm:items-start gap-6"
 					style={{
@@ -233,11 +235,13 @@ export default async function MePage({
 						</p>
 					</div>
 				</div>
+				</Reveal>
 
 				{/* ── Enter hotel ── */}
+				<Reveal delay={0.05}>
 				<Link
 					href="/client"
-					className="flex items-center justify-center gap-3 rounded-2xl border py-4 px-6 font-extrabold text-base transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg"
+					className="btn-shine flex items-center justify-center gap-3 rounded-2xl border py-4 px-6 font-extrabold text-base transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg"
 					style={{
 						background: "var(--color-primary)",
 						color: "var(--color-primary-foreground)",
@@ -254,9 +258,11 @@ export default async function MePage({
 					/>
 					Enter {hotelName}
 				</Link>
+				</Reveal>
 
 				{/* ── Stat tiles ── */}
-				<div className="grid grid-cols-3 gap-4">
+				<Reveal delay={0.1}>
+				<div className="grid grid-cols-3 gap-4 stagger-children">
 					{[
 						{ value: user.credits.toLocaleString(), label: "Credits" },
 						{ value: `Rank ${user.rank}`, label: "Hotel rank" },
@@ -285,8 +291,10 @@ export default async function MePage({
 						</div>
 					))}
 				</div>
+				</Reveal>
 
 				{/* ── Online friends ── */}
+				<Reveal delay={0.15}>
 				<div
 					className="rounded-2xl border p-5"
 					style={{
@@ -374,8 +382,10 @@ export default async function MePage({
 						</div>
 					)}
 				</div>
+				</Reveal>
 
 				{/* ── Referral card ── */}
+				<Reveal delay={0.2}>
 				<div
 					className="rounded-2xl border p-5"
 					style={{
@@ -419,7 +429,7 @@ export default async function MePage({
 									type="text"
 									readOnly
 									defaultValue={referralLink}
-									className="flex-1 min-w-0 rounded-xl border-2 px-4 py-2.5 text-sm font-medium"
+									className="input-glow flex-1 min-w-0 rounded-xl border-2 px-4 py-2.5 text-sm font-medium"
 									style={{
 										backgroundColor: "var(--color-background)",
 										color: "var(--color-text-readable, var(--color-text))",
@@ -434,7 +444,7 @@ export default async function MePage({
 							<form action={claimReferral}>
 								<button
 									type="submit"
-									className="w-full rounded-xl font-extrabold text-sm py-3.5 transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg"
+									className="btn-shine w-full rounded-xl font-extrabold text-sm py-3.5 transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg"
 									style={{
 										background: "var(--color-primary)",
 										color: "var(--color-primary-foreground)",
@@ -459,6 +469,7 @@ export default async function MePage({
 						)}
 					</div>
 				</div>
+				</Reveal>
 			</div>
 		);
 	} catch {

src/app/(site)/page.tsx

@@ -16,6 +16,9 @@ import { LanguageSwitcher } from "@/components/language-switcher";
 import { HomeLoginForm } from "@/components/auth/home-login-form";
 import { Reveal } from "@/components/motion-reveal";
 import { Clock } from "@/components/clock";
+import { TypewriterText } from "@/components/typewriter-text";
+import { AnimatedCounter } from "@/components/animated-counter";
+import { AmbientOrbs } from "@/components/ambient-orbs";
 
 export const revalidate = 120;
 
@@ -125,7 +128,8 @@ export default async function Home() {
 							background: "linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 90%, transparent) 0%, color-mix(in srgb, var(--color-surface) 35%, transparent) 50%, color-mix(in srgb, var(--color-surface) 10%, transparent) 100%)",
 						}}
 					/>
-					<div className="relative flex flex-col md:flex-row items-center gap-8 px-6 py-10 md:px-10 md:py-14">
+					<AmbientOrbs />
+					<div className="relative flex flex-col md:flex-row items-center gap-8 px-6 py-10 md:px-10 md:py-14" style={{ zIndex: 2 }}>
 						<div className="flex-1 text-center md:text-left">
 							<div
 								className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs font-bold uppercase tracking-widest mb-5 border backdrop-blur-sm"
@@ -145,7 +149,7 @@ export default async function Home() {
 								className="text-4xl md:text-5xl lg:text-6xl font-black leading-[1.05] tracking-tight mb-3"
 								style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-pixel)" }}
 							>
-								{tp("welcome", { hotelName })}
+								<TypewriterText text={tp("welcome", { hotelName })} />
 							</h1>
 							<p
 								className="text-base md:text-lg leading-relaxed max-w-xl mb-7"
@@ -202,9 +206,9 @@ export default async function Home() {
 			<Reveal>
 				<div className="grid grid-cols-3 gap-4 stagger-children">
 					{[
-						{ value: online.toLocaleString(), label: tp("statsOnline"), icon: "/assets/images/icons/online-friends.png" },
-						{ value: users.toLocaleString(), label: tp("statsCitizens"), icon: "/assets/images/icons/friends.png" },
-						{ value: rooms.toLocaleString(), label: tp("statsRooms"), icon: "/assets/images/icons/catalog.png" },
+						{ value: online, label: tp("statsOnline"), icon: "/assets/images/icons/online-friends.png" },
+						{ value: users, label: tp("statsCitizens"), icon: "/assets/images/icons/friends.png" },
+						{ value: rooms, label: tp("statsRooms"), icon: "/assets/images/icons/catalog.png" },
 					].map((s) => (
 						<div
 							key={s.label}
@@ -228,7 +232,7 @@ export default async function Home() {
 									<Image src={s.icon} alt="" width={24} height={24} unoptimized />
 								</div>
 								<div className="text-3xl md:text-4xl font-black tracking-tight mb-0.5" style={{ color: "var(--color-primary)" }}>
-									{s.value}
+									<AnimatedCounter value={s.value} />
 								</div>
 								<div className="text-xs font-bold uppercase tracking-widest" style={{ color: "var(--color-text-muted)" }}>
 									{s.label}

src/app/(site)/settings/page.tsx

@@ -1,8 +1,9 @@
+import Image from "next/image";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import { updateMotto } from "@/actions/user-settings";
-import { ContentCard } from "@/components/public/ui";
+import { Reveal } from "@/components/motion-reveal";
 import { auth } from "@/lib/auth";
 import { avatarImageUrl } from "@/lib/format";
 import { prisma } from "@/lib/prisma";
@@ -39,95 +40,233 @@ export default async function SettingsPage() {
 		imagerBase =
 			(await siteSettings.get("habbo_imaging_url", imagerBase)) ?? imagerBase;
 	} catch {
-		// fall back to the default imager base
+		/* fall back to default */
 	}
 
 	const avatar = avatarImageUrl(imagerBase, user.look, { size: "l" });
 
 	return (
-		<main style={{ display: "grid", gap: "1.5rem" }}>
-			<ContentCard
-				icon="⚙️"
-				title={t("accountSettings")}
-				subtitle={t("accountSettingsSubtitle")}
-			/>
-
-			<ContentCard
-				icon="🙂"
-				title={user.username}
-				subtitle={t("publicProfile")}
-			>
+		<div className="flex flex-col gap-6 pb-14">
+			{/* Header */}
+			<Reveal>
 				<div
+					className="relative overflow-hidden rounded-xl border px-5 py-4"
 					style={{
-						display: "flex",
-						gap: "1.5rem",
-						alignItems: "center",
-						flexWrap: "wrap",
+						background: "color-mix(in srgb, var(--color-surface) 60%, transparent)",
+						backdropFilter: "blur(14px)",
+						borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
 					}}
 				>
-					{/* eslint-disable-next-line @next/next/no-img-element */}
-					<img
-						className="avatar"
-						src={avatar}
-						alt={`${user.username} avatar`}
-						width={100}
-						height={150}
-					/>
-					<div style={{ minWidth: 0 }}>
-						<p style={{ margin: "0 0 0.5rem", fontSize: "1.05rem" }}>
-							{user.motto || <span className="muted">{t("noMotto")}</span>}
-						</p>
-						<p className="muted" style={{ margin: 0 }}>
-							{user.mail || t("noEmail")}
-						</p>
+					<div className="flex items-center gap-3">
+						<div
+							className="w-10 h-10 rounded-xl flex items-center justify-center"
+							style={{ background: "color-mix(in srgb, var(--color-primary) 14%, transparent)" }}
+						>
+							<Image src="/assets/images/icons/navigation/me.png" alt="" width={22} height={22} unoptimized />
+						</div>
+						<div>
+							<h1
+								className="text-lg font-black tracking-tight"
+								style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-pixel)" }}
+							>
+								{t("accountSettings")}
+							</h1>
+							<p className="text-xs" style={{ color: "var(--color-text-muted)" }}>
+								{t("accountSettingsSubtitle")}
+							</p>
+						</div>
 					</div>
 				</div>
-			</ContentCard>
+			</Reveal>
 
-			<ContentCard
-				icon="✏️"
-				title={t("changeMotto")}
-				subtitle={t("changeMottoSubtitle")}
-			>
-				<form
-					action={updateMotto}
+			{/* Profile card */}
+			<Reveal delay={0.05}>
+				<div
+					className="overflow-hidden rounded-xl border card-premium"
 					style={{
-						display: "flex",
-						flexDirection: "column",
-						gap: "0.75rem",
-						maxWidth: 520,
+						borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
 					}}
 				>
-					<input
-						name="motto"
-						defaultValue={user.motto}
-						maxLength={127}
-						placeholder={t("mottoPlaceholder")}
-						aria-label="Motto"
-					/>
-					<div>
-						<button type="submit" className="btn btn-primary">
-							{t("saveMotto")}
-						</button>
+					<div
+						className="flex items-center gap-2.5 px-4 py-3"
+						style={{
+							background: "linear-gradient(140deg, #1a3a5c 0%, #1e4a6e 20%, #2a5a80 40%, #3a6a90 60%, #4a7aa0 75%, #3a6a90 90%, #2a5a80 100%)",
+						}}
+					>
+						<Image src="/assets/images/icons/navigation/me.png" alt="" width={18} height={18} unoptimized />
+						<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
+							{t("publicProfile")}
+						</h2>
+					</div>
+					<div
+						className="p-5 flex items-center gap-5"
+						style={{ backgroundColor: "var(--color-surface)" }}
+					>
+						<div className="shrink-0">
+							<div className="rounded-xl overflow-hidden border" style={{ borderColor: "color-mix(in srgb, var(--color-primary) 15%, transparent)" }}>
+								<Image
+									src={avatar}
+									alt={`${user.username} avatar`}
+									width={80}
+									height={120}
+									className="block"
+									unoptimized
+								/>
+							</div>
+						</div>
+						<div className="min-w-0 flex-1">
+							<h3 className="text-base font-extrabold" style={{ color: "var(--color-text-readable)" }}>
+								{user.username}
+							</h3>
+							<p className="text-sm mt-0.5" style={{ color: "var(--color-text-muted)" }}>
+								{user.motto || <span style={{ fontStyle: "italic", opacity: 0.5 }}>{t("noMotto")}</span>}
+							</p>
+							<p className="text-xs mt-1.5 font-medium" style={{ color: "color-mix(in srgb, var(--color-text-muted) 70%, transparent)" }}>
+								{user.mail || t("noEmail")}
+							</p>
+						</div>
 					</div>
-				</form>
-			</ContentCard>
-
-			<div className="card-grid sm-2">
-				<ContentCard
-					icon="🔒"
-					title={t("securityTitle")}
-					subtitle={t("securitySubtitle")}
-				>
-					<p className="muted" style={{ marginTop: 0 }}>
-						{t("securityDescription")}
-					</p>
-					<Link href="/settings/2fa" className="btn btn-outline">
-						{t("twoFactorLink")}
-					</Link>
-				</ContentCard>
-
 				</div>
-		</main>
+			</Reveal>
+
+			{/* Motto form */}
+			<Reveal delay={0.1}>
+				<div
+					className="overflow-hidden rounded-xl border"
+					style={{
+						borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+					}}
+				>
+					<div
+						className="flex items-center gap-2.5 px-4 py-3"
+						style={{
+							background: "linear-gradient(140deg, #5a2d82 0%, #6b3a9e 20%, #7d47b8 40%, #8f54d0 60%, #7d47b8 75%, #6b3a9e 90%, #5a2d82 100%)",
+						}}
+					>
+						<Image src="/assets/images/icons/star.gif" alt="" width={18} height={18} unoptimized />
+						<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
+							{t("changeMotto")}
+						</h2>
+					</div>
+					<div
+						className="p-5"
+						style={{ backgroundColor: "var(--color-surface)" }}
+					>
+						<p className="text-xs mb-4" style={{ color: "var(--color-text-muted)" }}>
+							{t("changeMottoSubtitle")}
+						</p>
+						<form
+							action={updateMotto}
+							className="flex flex-col gap-3"
+							style={{ maxWidth: 520 }}
+						>
+							<input
+								name="motto"
+								defaultValue={user.motto}
+								maxLength={127}
+								placeholder={t("mottoPlaceholder")}
+								aria-label="Motto"
+								className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
+								style={{
+									backgroundColor: "var(--color-background)",
+									color: "var(--color-text-readable)",
+									borderColor: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
+								}}
+							/>
+							<div>
+								<button
+									type="submit"
+									className="btn-shine inline-flex items-center gap-2 font-extrabold text-sm px-5 py-2.5 rounded-xl transition-all duration-200 hover:scale-[1.03] active:scale-95 shadow-lg"
+									style={{
+										background: "var(--color-primary)",
+										color: "var(--color-primary-foreground)",
+										boxShadow: "0 4px 20px color-mix(in srgb, var(--color-primary) 30%, transparent)",
+									}}
+								>
+									{t("saveMotto")}
+								</button>
+							</div>
+						</form>
+					</div>
+				</div>
+			</Reveal>
+
+			{/* Security card */}
+			<Reveal delay={0.15}>
+				<div
+					className="overflow-hidden rounded-xl border"
+					style={{
+						borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+					}}
+				>
+					<div
+						className="flex items-center gap-2.5 px-4 py-3"
+						style={{
+							background: "linear-gradient(140deg, #0A1F0A 0%, #0F2D0F 20%, #153C15 40%, #1B4A1B 60%, #205820 75%, #1A4A1A 90%, #143814 100%)",
+						}}
+					>
+						<Image src="/assets/images/icons/navigation/goody.png" alt="" width={18} height={18} unoptimized />
+						<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
+							{t("securityTitle")}
+						</h2>
+					</div>
+					<div
+						className="p-5"
+						style={{ backgroundColor: "var(--color-surface)" }}
+					>
+						<p className="text-xs mb-4" style={{ color: "var(--color-text-muted)" }}>
+							{t("securityDescription")}
+						</p>
+						<Link
+							href="/settings/2fa"
+							className="inline-flex items-center gap-2 font-bold text-sm px-5 py-2.5 rounded-xl border-2 transition-all duration-200 hover:scale-[1.03] active:scale-95 backdrop-blur-sm"
+							style={{
+								borderColor: "color-mix(in srgb, var(--color-text-muted) 20%, transparent)",
+								color: "var(--color-text-readable)",
+								background: "color-mix(in srgb, var(--color-surface) 50%, transparent)",
+							}}
+						>
+							{t("twoFactorLink")}
+						</Link>
+					</div>
+				</div>
+			</Reveal>
+
+			{/* Sessions link */}
+			<Reveal delay={0.2}>
+				<Link
+					href="/settings/sessions"
+					className="block overflow-hidden rounded-xl border transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5"
+					style={{
+						borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+					}}
+				>
+					<div
+						className="flex items-center justify-between px-5 py-4"
+						style={{ backgroundColor: "var(--color-surface)" }}
+					>
+						<div className="flex items-center gap-3">
+							<div
+								className="w-10 h-10 rounded-xl flex items-center justify-center"
+								style={{ background: "color-mix(in srgb, var(--color-primary) 14%, transparent)" }}
+							>
+								<Image src="/assets/images/icons/navigation/community.png" alt="" width={20} height={20} unoptimized />
+							</div>
+							<div>
+								<span className="text-sm font-extrabold" style={{ color: "var(--color-text-readable)" }}>
+									Session Management
+								</span>
+								<p className="text-xs mt-0.5" style={{ color: "var(--color-text-muted)" }}>
+									View active sessions and sign out everywhere
+								</p>
+							</div>
+						</div>
+						<span className="text-lg font-bold" style={{ color: "var(--color-text-muted)" }}>
+							→
+						</span>
+					</div>
+				</Link>
+			</Reveal>
+		</div>
 	);
 }

src/app/globals.css

@@ -1742,6 +1742,69 @@ details[open] > summary .details-open\:rotate-180 {
 	border-radius: calc(var(--radius-lg) - 1px);
 }
 
+/* Input focus glow */
+.input-glow:focus {
+	outline: none;
+	border-color: var(--color-primary) !important;
+	box-shadow:
+		0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent),
+		0 0 20px color-mix(in srgb, var(--color-primary) 10%, transparent);
+}
+.input-glow {
+	transition:
+		border-color 0.25s ease,
+		box-shadow 0.25s ease;
+}
+
+/* Typing cursor blink */
+@keyframes blink {
+	0%, 100% { opacity: 1; }
+	50% { opacity: 0; }
+}
+.typing-cursor::after {
+	content: "|";
+	animation: blink 0.8s step-end infinite;
+	margin-left: 2px;
+	font-weight: 300;
+	color: var(--color-primary);
+}
+
+/* Number count-up */
+@keyframes count-up {
+	from { opacity: 0; transform: translateY(12px); }
+	to { opacity: 1; transform: translateY(0); }
+}
+.animate-count {
+	animation: count-up 0.6s ease-out both;
+}
+
+/* Premium button shine */
+.btn-shine {
+	position: relative;
+	overflow: hidden;
+}
+.btn-shine::after {
+	content: "";
+	position: absolute;
+	top: -50%;
+	left: -50%;
+	width: 200%;
+	height: 200%;
+	background: linear-gradient(
+		transparent 0%,
+		transparent 35%,
+		color-mix(in srgb, white 8%, transparent) 50%,
+		transparent 65%,
+		transparent 100%
+	);
+	transform: rotate(25deg);
+	transition: all 0.5s ease;
+	pointer-events: none;
+}
+.btn-shine:hover::after {
+	left: 100%;
+}
+
 /* Staggered children animation */
 .stagger-children > * {
 	animation: fade-in-up 0.5s ease-out both;