96 lines
3.8 KiB
Plaintext
96 lines
3.8 KiB
Plaintext
@namespace MidrandBooks.Components
|
|
|
|
<style>
|
|
.mesh-bg {
|
|
background-image: radial-gradient(at 0% 0%, rgba(245, 158, 11, 0.08) 0, transparent 60%),
|
|
radial-gradient(at 50% 0%, rgba(20, 184, 166, 0.06) 0, transparent 60%),
|
|
radial-gradient(at 100% 0%, rgba(249, 115, 22, 0.08) 0, transparent 60%);
|
|
background-color: #030712;
|
|
}
|
|
|
|
@@keyframes float-up {
|
|
0% {
|
|
transform: translateY(100vh) rotate(0deg);
|
|
opacity: 0;
|
|
}
|
|
10% {
|
|
opacity: var(--float-opacity, 0.2);
|
|
}
|
|
90% {
|
|
opacity: var(--float-opacity, 0.2);
|
|
}
|
|
100% {
|
|
transform: translateY(-20vh) rotate(360deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div id="animated-bg" class="fixed inset-0 -z-50 overflow-hidden mesh-bg">
|
|
<!-- Abstract Elegant Soft Warm Gradients -->
|
|
<div class="absolute -top-[30%] -left-[10%] h-[80%] w-[60%] rounded-full bg-amber-500/5 blur-[120px] animate-pulse"
|
|
style="animation-duration: 14s;" />
|
|
<div class="absolute -bottom-[20%] -right-[5%] h-[80%] w-[50%] rounded-full bg-sky-500/4 blur-[150px] animate-pulse"
|
|
style="animation-duration: 20s;" />
|
|
<div class="absolute top-[40%] left-[30%] h-[300px] w-[300px] rounded-full bg-orange-400/4 blur-[100px] animate-pulse"
|
|
style="animation-duration: 16s;" />
|
|
|
|
<!-- Grid Pattern Overlay -->
|
|
<div class="absolute inset-0 opacity-[0.4]"
|
|
style="background-image: radial-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px); background-size: 24px 24px;" />
|
|
|
|
<!-- Floating Particles/Pages -->
|
|
<div class="absolute inset-0 pointer-events-none overflow-hidden">
|
|
@for (int i = 0; i < PageCount; i++)
|
|
{
|
|
var config = PageConfigs[i];
|
|
<div class="absolute rounded-lg border border-slate-900/10 bg-white/70 backdrop-blur-[1px] transition-transform duration-1000 ease-out shadow-sm"
|
|
style="width: @(config.Size)px;
|
|
height: @(config.Size * 1.3)px;
|
|
left: @(config.Left)%;
|
|
bottom: -100px;
|
|
opacity: @(config.Opacity);
|
|
transform: rotate(@(config.Rotation)deg);
|
|
animation: float-up @(config.Duration)s linear infinite;
|
|
animation-delay: @(config.Delay)s;">
|
|
<!-- Micro lines inside floating "pages" to represent book texture -->
|
|
<div class="w-4/5 h-[1.5px] bg-slate-900/10 my-2 mx-auto rounded" />
|
|
<div class="w-3/5 h-[1.5px] bg-slate-900/10 my-1 mx-auto rounded" />
|
|
<div class="w-1/2 h-[1.5px] bg-slate-900/10 my-1 mx-auto rounded" />
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
@code {
|
|
private const int PageCount = 10;
|
|
private List<PageConfig> PageConfigs { get; set; } = new();
|
|
|
|
protected override void OnInitialized()
|
|
{
|
|
var random = new Random(42); // Seeded random for consistent luxury aesthetic
|
|
for (int i = 0; i < PageCount; i++)
|
|
{
|
|
PageConfigs.Add(new PageConfig
|
|
{
|
|
Size = random.NextDouble() * 30 + 15,
|
|
Left = random.NextDouble() * 100,
|
|
Delay = random.NextDouble() * 15,
|
|
Duration = random.NextDouble() * 25 + 35,
|
|
Opacity = random.NextDouble() * 0.12 + 0.04,
|
|
Rotation = random.NextDouble() * 360
|
|
});
|
|
}
|
|
}
|
|
|
|
private class PageConfig
|
|
{
|
|
public double Size { get; set; }
|
|
public double Left { get; set; }
|
|
public double Delay { get; set; }
|
|
public double Duration { get; set; }
|
|
public double Opacity { get; set; }
|
|
public double Rotation { get; set; }
|
|
}
|
|
}
|