kennethnym/aris
1
0
Fork 0
mirror of https://github.com/kennethnym/aris.git synced 2026-03-20 00:51:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(waitlist): add footer with bottom progressive blur

Browse Source 
Co-authored-by: Ona <no-reply@ona.com>
This commit is contained in:
Kenneth
2026-03-08 02:31:26 +00:00
parent 2dd654106a
commit 85726fe886
2 changed files with 24 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
apps/waitlist-website/app/components/progressive-blur.tsx
View File

@@ -1,4 +1,25 @@
export function ProgressiveBlur({ className }: { className?: string }) {
export function ProgressiveBlur({
className,
direction = "down",
}: {
className?: string
direction?: "down" | "up"
}) {
if (direction === "up") {
return (
<div className={`pointer-events-none ${className ?? ""}`}>
<div className="absolute inset-0 backdrop-blur-[1px] [mask:linear-gradient(rgba(0,0,0,0)_0%,rgba(0,0,0,1)_10%,rgba(0,0,0,1)_20%,rgba(0,0,0,0)_30%)]" />
<div className="absolute inset-0 backdrop-blur-[2px] [mask:linear-gradient(rgba(0,0,0,0)_10%,rgba(0,0,0,1)_20%,rgba(0,0,0,1)_40%,rgba(0,0,0,0)_50%)]" />
<div className="absolute inset-0 backdrop-blur-[4px] [mask:linear-gradient(rgba(0,0,0,0)_20%,rgba(0,0,0,1)_30%,rgba(0,0,0,1)_50%,rgba(0,0,0,0)_60%)]" />
<div className="absolute inset-0 backdrop-blur-[8px] [mask:linear-gradient(rgba(0,0,0,0)_30%,rgba(0,0,0,1)_40%,rgba(0,0,0,1)_60%,rgba(0,0,0,0)_70%)]" />
<div className="absolute inset-0 backdrop-blur-[16px] [mask:linear-gradient(rgba(0,0,0,0)_40%,rgba(0,0,0,1)_50%,rgba(0,0,0,1)_70%,rgba(0,0,0,0)_80%)]" />
<div className="absolute inset-0 backdrop-blur-[32px] [mask:linear-gradient(rgba(0,0,0,0)_50%,rgba(0,0,0,1)_60%,rgba(0,0,0,1)_80%,rgba(0,0,0,0)_90%)]" />
<div className="absolute inset-0 backdrop-blur-[64px] [mask:linear-gradient(rgba(0,0,0,0)_70%,rgba(0,0,0,1)_80%,rgba(0,0,0,1)_100%)]" />
<div className="absolute inset-0 bg-linear-to-t from-stone-50 dark:from-stone-900 to-transparent" />
</div>
)
}
return (
<div className={`pointer-events-none ${className ?? ""}`}>
<div className="absolute inset-0 backdrop-blur-[64px] [mask:linear-gradient(rgba(0,0,0,1)_0%,rgba(0,0,0,1)_20%,rgba(0,0,0,0)_30%)]" />

4
apps/waitlist-website/app/routes/home.tsx
View File

@@ -1,6 +1,6 @@
import { AnimatePresence, motion } from "motion/react"
import React, { useEffect, useLayoutEffect, useRef, useState } from "react"
import { useFetcher } from "react-router"
import { Link, useFetcher } from "react-router"
import { Resend } from "resend"
import { Streamdown } from "streamdown"
@@ -159,7 +159,7 @@ export default function Home() {
<motion.div
ref={chatBoxRef}
key="test"
className="w-full max-w-2xl absolute bottom-8 px-6 md:px-0 flex justify-center"
className="w-full max-w-2xl absolute bottom-12 px-6 md:px-0 flex justify-center z-20"
initial={{ y: 100, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ type: "spring", stiffness: 300, damping: 30, mass: 1.5 }}