remco/EpicNext-Cms
1
1 Fork 0
Code Issues Pull Requests 1 Actions 2 Packages Projects Releases Wiki Activity

feat: premium polish pass — typing effect, animated counters, ambient orbs, input glow, show/hide password, redesigned settings, Reveal animations
Deploy / release (push) Skipped
Details
Deploy / deploy (push) Successful in 1m53s
Details

Browse Source 
- 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
This commit is contained in:
openhands committed 2026-07-24 13:34:46 +02:00
1 parent 5fa342018d
commit b37b6bc2b9
10 files changed
+569 -150
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/ambient-orbs.tsx
+66
View File
@@ -0,0 +1,66 @@
"use client";
import { useEffect, useState } from "react";
interface Orb {
id: number;
x: number;
y: number;
size: number;
delay: number;
duration: number;
color: string;
}
export function AmbientOrbs() {
const [orbs, setOrbs] = useState<Orb[]>([]);
useEffect(() => {
const colors = [
"var(--color-primary)",
"var(--color-accent)",
"color-mix(in srgb, var(--color-primary) 60%, var(--color-accent))",
];
const items: Orb[] = Array.from({ length: 3 }, (_, i) => ({
id: i,
x: 15 + Math.random() * 70,
y: 10 + Math.random() * 70,
size: 120 + Math.random() * 180,
delay: Math.random() * 3,
duration: 8 + Math.random() * 6,
color: colors[i],
}));
setOrbs(items);
}, []);
if (orbs.length === 0) return null;
return (
<div className="absolute inset-0 overflow-hidden pointer-events-none" style={{ zIndex: 1 }}>
{orbs.map((orb) => (
<div
key={orb.id}
className="absolute rounded-full"
style={{
left: `${orb.x}%`,
top: `${orb.y}%`,
width: orb.size,
height: orb.size,
background: `radial-gradient(circle, ${orb.color} 0%, transparent 70%)`,
opacity: 0.12,
animation: `ambient-drift-${orb.id} ${orb.duration}s ease-in-out ${orb.delay}s infinite alternate`,
}}
/>
))}
<style>{`
${orbs.map((orb) => `
@keyframes ambient-drift-${orb.id} {
0% { transform: translate(0, 0) scale(1); }
33% { transform: translate(${(Math.random() > 0.5 ? "" : "-") + (20 + Math.random() * 30)}px, ${(Math.random() > 0.5 ? "" : "-") + (20 + Math.random() * 30)}px) scale(${0.8 + Math.random() * 0.4}); }
66% { transform: translate(${(Math.random() > 0.5 ? "" : "-") + (10 + Math.random() * 40)}px, ${(Math.random() > 0.5 ? "" : "-") + (15 + Math.random() * 35)}px) scale(${0.9 + Math.random() * 0.3}); }
100% { transform: translate(0, 0) scale(1); }
}`).join("\n")}
`}</style>
</div>
);
}
src/components/animated-counter.tsx
+46
View File
@@ -0,0 +1,46 @@
"use client";
import { motion, useInView } from "framer-motion";
import { useEffect, useRef, useState } from "react";
export function AnimatedCounter({
value,
suffix = "",
}: {
value: number;
suffix?: string;
}) {
const ref = useRef<HTMLSpanElement>(null);
const isInView = useInView(ref, { once: true, margin: "-50px" });
const [display, setDisplay] = useState(0);
useEffect(() => {
if (!isInView) return;
const duration = 1200;
const steps = 30;
const increment = value / steps;
let current = 0;
let step = 0;
const id = setInterval(() => {
step++;
current = Math.min(Math.round(increment * step), value);
setDisplay(current);
if (step >= steps) {
clearInterval(id);
setDisplay(value);
}
}, duration / steps);
return () => clearInterval(id);
}, [isInView, value]);
return (
<motion.span
ref={ref}
initial={{ opacity: 0, y: 12 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.5, ease: "easeOut" }}
>
{display.toLocaleString()}{suffix}
</motion.span>
);
}
src/components/auth/home-login-form.tsx
+41 -27
View File
@@ -18,6 +18,7 @@ export function HomeLoginForm({
} = {}) {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [showPassword, setShowPassword] = useState(false);
const [code, setCode] = useState("");
const [needs2fa, setNeeds2fa] = useState(false);
const [error, setError] = useState<string | null>(null);
@@ -87,7 +88,7 @@ export function HomeLoginForm({
placeholder="Your username"
autoComplete="username"
disabled={needs2fa}
className="w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none disabled:opacity-50"
className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none disabled:opacity-50"
style={{
backgroundColor: "var(--color-background)",
color: "var(--color-text-readable)",
@@ -100,31 +101,44 @@ export function HomeLoginForm({
</div>
<div className="space-y-1">
<label
htmlFor="login-password"
className="block text-xs font-bold uppercase tracking-wider"
style={{ color: "var(--color-text-muted)" }}
>
Password
</label>
<input
id="login-password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Your password"
autoComplete="current-password"
disabled={needs2fa}
className="w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none disabled:opacity-50"
style={{
backgroundColor: "var(--color-background)",
color: "var(--color-text-readable)",
borderColor: needs2fa
? "color-mix(in srgb, var(--color-text-muted) 15%, transparent)"
: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
}}
required
/>
<div className="flex items-center justify-between">
<label
htmlFor="login-password"
className="block text-xs font-bold uppercase tracking-wider"
style={{ color: "var(--color-text-muted)" }}
>
Password
</label>
</div>
<div className="relative">
<input
id="login-password"
type={showPassword ? "text" : "password"}
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Your password"
autoComplete="current-password"
disabled={needs2fa}
className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none disabled:opacity-50"
style={{
backgroundColor: "var(--color-background)",
color: "var(--color-text-readable)",
borderColor: needs2fa
? "color-mix(in srgb, var(--color-text-muted) 15%, transparent)"
: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
}}
required
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-sm font-bold opacity-60 hover:opacity-100 transition-opacity"
style={{ color: "var(--color-text-muted)" }}
tabIndex={-1}
>
{showPassword ? "Hide" : "Show"}
</button>
</div>
</div>
{needs2fa ? (
@@ -169,7 +183,7 @@ export function HomeLoginForm({
<button
type="submit"
disabled={pending}
className="w-full cursor-pointer rounded-xl font-extrabold text-sm py-3.5 transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg disabled:opacity-60"
className="btn-shine w-full cursor-pointer rounded-xl font-extrabold text-sm py-3.5 transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg disabled:opacity-60"
style={{
background: "var(--color-primary)",
color: "var(--color-primary-foreground)",
src/components/auth/login-form.tsx
+16 -6
View File
@@ -21,6 +21,7 @@ export function LoginForm({
const t = useTranslations("pages.login");
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [showPassword, setShowPassword] = useState(false);
const [code, setCode] = useState("");
const [needs2fa, setNeeds2fa] = useState(false);
const [error, setError] = useState<string | null>(null);
@@ -87,7 +88,7 @@ export function LoginForm({
placeholder={t("usernamePlaceholder")}
autoComplete="username"
disabled={needs2fa}
className="w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none disabled:opacity-50"
className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none disabled:opacity-50"
style={{
backgroundColor: "var(--color-background)",
color: "var(--color-text-readable)",
@@ -95,21 +96,30 @@ export function LoginForm({
}}
/>
</div>
<div className={needs2fa ? "opacity-50 pointer-events-none" : ""}>
<div className={`${needs2fa ? "opacity-50 pointer-events-none" : ""} relative`}>
<input
type="password"
type={showPassword ? "text" : "password"}
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder={t("passwordPlaceholder")}
autoComplete="current-password"
disabled={needs2fa}
className="w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none disabled:opacity-50"
className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none disabled:opacity-50"
style={{
backgroundColor: "var(--color-background)",
color: "var(--color-text-readable)",
borderColor: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
}}
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-sm font-bold opacity-60 hover:opacity-100 transition-opacity"
style={{ color: "var(--color-text-muted)" }}
tabIndex={-1}
>
{showPassword ? "Hide" : "Show"}
</button>
</div>
{needs2fa ? (
<div className="animate-scale-in">
@@ -120,7 +130,7 @@ export function LoginForm({
inputMode="numeric"
autoComplete="one-time-code"
autoFocus
className="w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
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)",
@@ -144,7 +154,7 @@ export function LoginForm({
<button
type="submit"
disabled={pending}
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 disabled:opacity-60"
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 disabled:opacity-60"
style={{
background: "var(--color-primary)",
color: "var(--color-primary-foreground)",
src/components/auth/register-form.tsx
+57 -33
View File
@@ -39,6 +39,8 @@ export function RegisterForm({
const [serverError, formAction, isPending] = useActionState(register, null);
const [termsAccepted, setTermsAccepted] = useState(false);
const [password, setPassword] = useState("");
const [showPassword, setShowPassword] = useState(false);
const [showConfirm, setShowConfirm] = useState(false);
const strength = passwordStrength(password);
return (
@@ -136,7 +138,7 @@ export function RegisterForm({
type="text"
placeholder={t("usernamePlaceholder")}
autoComplete="username"
className="w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
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)",
@@ -159,7 +161,7 @@ export function RegisterForm({
type="email"
placeholder={t("emailPlaceholder")}
autoComplete="email"
className="w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
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)",
@@ -180,22 +182,33 @@ export function RegisterForm({
>
{t("password")}
</label>
<input
id="password"
name="password"
type="password"
placeholder={t("passwordPlaceholder")}
autoComplete="new-password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="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)",
}}
required
/>
<div className="relative">
<input
id="password"
name="password"
type={showPassword ? "text" : "password"}
placeholder={t("passwordPlaceholder")}
autoComplete="new-password"
value={password}
onChange={(e) => setPassword(e.target.value)}
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)",
}}
required
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-sm font-bold opacity-60 hover:opacity-100 transition-opacity"
style={{ color: "var(--color-text-muted)" }}
tabIndex={-1}
>
{showPassword ? "Hide" : "Show"}
</button>
</div>
{password.length > 0 && (
<div className="animate-fade-in-up space-y-1">
<div className="flex gap-1">
@@ -225,20 +238,31 @@ export function RegisterForm({
>
{t("confirmPassword")}
</label>
<input
id="password_confirmation"
name="password_confirmation"
type="password"
placeholder={t("confirmPasswordPlaceholder")}
autoComplete="new-password"
className="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)",
}}
required
/>
<div className="relative">
<input
id="password_confirmation"
name="password_confirmation"
type={showConfirm ? "text" : "password"}
placeholder={t("confirmPasswordPlaceholder")}
autoComplete="new-password"
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)",
}}
required
/>
<button
type="button"
onClick={() => setShowConfirm(!showConfirm)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-sm font-bold opacity-60 hover:opacity-100 transition-opacity"
style={{ color: "var(--color-text-muted)" }}
tabIndex={-1}
>
{showConfirm ? "Hide" : "Show"}
</button>
</div>
</div>
</div>
@@ -323,7 +347,7 @@ export function RegisterForm({
<button
type="submit"
disabled={isPending}
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 disabled:opacity-60"
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 disabled:opacity-60"
style={{
background: "var(--color-primary)",
color: "var(--color-primary-foreground)",
src/components/typewriter-text.tsx
+42
View File
@@ -0,0 +1,42 @@
"use client";
import { motion } from "framer-motion";
import { useEffect, useState } from "react";
export function TypewriterText({
text,
className,
}: {
text: string;
className?: string;
}) {
const [displayed, setDisplayed] = useState("");
const [done, setDone] = useState(false);
useEffect(() => {
setDisplayed("");
setDone(false);
let i = 0;
const id = setInterval(() => {
if (i < text.length) {
setDisplayed(text.slice(0, i + 1));
i++;
} else {
clearInterval(id);
setDone(true);
}
}, 40);
return () => clearInterval(id);
}, [text]);
return (
<motion.span
className={`${className ?? ""} ${!done ? "typing-cursor" : ""}`}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.3 }}
>
{displayed}
</motion.span>
);
}