Jtu 🇹🇼

✨UI Designer at @dentsu_global
✨AI / Crypto / Startup / VC / NFT @Azuki @RTFKT

[Jtu 🇹🇼 @jtu_tw]

@f10wer Azuki x AP 🫣

[Jtu 🇹🇼 @jtu_tw]

WTF 🫪🤣

[The White House @WhiteHouse]

President Trump saying WINNING for 1 hour. 🔁

Can't stop, won't stop.

[Jtu 🇹🇼 @jtu_tw]

@higgsfield Gonna finish my project there someday!

[Jtu 🇹🇼 @jtu_tw]

This video is Fire. @higgsfield keeps dropping insanely high-quality videos that look like professionally shot films.

But after trying it, I realized recreating that quality via the tutorial would cost a fortune, so I had to shelve my shoot plan.

[Higgsfield AI 🧩 @higgsfield]

We just made a 23-MINUTE sci-fi pilot in 4 days.

And it is 100% AI.

[Viktor Oddy @viktoroddy]

Access ALL prompts for stunning animated websites in one click: https://t.co/N0kni8z7CJ

🎯 FULL RECREATION PROMPT

Build a single-page landing page for an AI-powered web design agency using React + Vite + TypeScript + Tailwind CSS + shadcn/ui. The aesthetic is dark, premium, Apple-inspired with a custom "liquid glass" morphism effect. Pure black background throughout.

FONTS & DESIGN SYSTEM
Google Fonts import:

Instrument Serif (italic) — headings
Barlow (300, 400, 500, 600) — body text
Tailwind config — extend fontFamily:

heading: ["'Instrument Serif'", "serif"]
body: ["'Barlow'", "sans-serif"]
CSS Variables (:root in index.css):

--background: 213 45% 67%;
--foreground: 0 0% 100%;
--primary: 0 0% 100%;
--primary-foreground: 213 45% 67%;
--border: 0 0% 100% / 0.2;
--radius: 9999px;
--font-heading: 'Instrument Serif', serif;
--font-body: 'Barlow', sans-serif;
All headings use: font-heading italic text-white tracking-tight leading-[0.9] All body text uses: font-body font-light text-white/60 text-sm All buttons use: font-body with rounded-full

LIQUID GLASS CSS (in @layer components)
Two variants — .liquid-glass (subtle) and .liquid-glass-strong (more visible):

.liquid-glass:

background: rgba(255, 255, 255, 0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(4px);
border: none;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
::before pseudo-element — a gradient border mask:

content: '';
position: absolute; inset: 0;
border-radius: inherit;
padding: 1.4px;
background: linear-gradient(180deg,
rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
.liquid-glass-strong: Same but backdrop-filter: blur(50px), stronger box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15), and slightly higher gradient opacity (0.5 / 0.2).

SECTION 1 — NAVBAR (fixed)
Fixed at top-4, full-width, z-50. Left: logo image (48×48). Center: a liquid-glass rounded-full pill containing nav links ("Home", "Services", "Work", "Process", "Pricing") as text-sm font-medium text-foreground/90 + a solid white bg-white text-black rounded-full "Get Started" button with ArrowUpRight icon.

SECTION 2 — HERO (1000px height)
Container: relative overflow-visible, height 1000px, black background.

Background video:

src: https://t.co/IZWArHkVL1
Position: absolute, top: 20%, w-full h-auto object-contain z-0
Autoplay, loop, muted, playsInline
Poster fallback image at /images/hero_bg.jpeg
Overlays:

absolute inset-0 bg-black/5 z-0 (light darkening)
Bottom gradient: absolute bottom-0 left-0 right-0 z-[1], height 300px, linear-gradient(to bottom, transparent, black)
Content (z-10, centered, paddingTop 150px):

Badge pill: liquid-glass rounded-full containing a white bg-white text-black rounded-full "New" tag + "Introducing AI‑powered web design." text
Heading: Use a BlurText animation component — text: "The Website Your Brand Deserves" — text-6xl md:text-7xl lg:text-[5.5rem] font-heading italic text-foreground leading-[0.8] tracking-[-4px] — animates word-by-word from bottom with blur-to-clear effect (delay 100ms per word)
Subtext (motion.p): "Stunning design. Blazing performance. Built by AI, refined by experts. This is web design, wildly reimagined." — fades in with blur at 0.8s delay
CTA buttons (motion.div, 1.1s delay): liquid-glass-strong rounded-full "Get Started" + ArrowUpRight icon, and a text-only "Watch the Film" + Play icon
Partners bar at bottom (mt-auto pb-8 pt-16)
BlurText component: Uses motion/react (framer-motion). Splits text by words, each word animates via IntersectionObserver with filter: blur(10px) → blur(5px) → blur(0px), opacity: 0 → 0.5 → 1, y: 50 → -5 → 0. Step duration 0.35s.

SECTION 3 — PARTNERS BAR
Centered column. Top: liquid-glass rounded-full badge "Trusted by the teams behind". Below: horizontal row of partner names ("Stripe", "Vercel", "Linear", "Notion", "Figma") rendered as text-2xl md:text-3xl font-heading italic text-white, gap-12.

SECTION 4 — START SECTION ("How It Works")
Full-width section, min-height: 700px, py-32 px-6 md:px-16 lg:px-24.

Background HLS video:

src: https://t.co/CvKkO7nZXi
Use hls.js library. Absolute, full cover, z-0. Top + bottom fade gradients (200px each, black ↔ transparent).

Content (z-10, centered, min-height 500px):

Badge: liquid-glass rounded-full — "How It Works"
Heading: "You dream it. We ship it." — text-4xl md:text-5xl lg:text-6xl font-heading italic
Subtext: "Share your vision. Our AI handles the rest—wireframes, design, code, launch. All in days, not quarters."
Button: liquid-glass-strong rounded-full "Get Started" + ArrowUpRight
SECTION 5 — FEATURES CHESS (alternating rows)
py-24 px-6 md:px-16 lg:px-24. Header: badge "Capabilities", heading "Pro features. Zero complexity."

Row 1 (text left, image right):

H3: "Designed to convert. Built to perform."
P: "Every pixel is intentional. Our AI studies what works across thousands of top sites—then builds yours to outperform them all."
Button: liquid-glass-strong rounded-full "Learn more"
Image: GIF in liquid-glass rounded-2xl overflow-hidden container
Row 2 (image left, text right — using lg:flex-row-reverse):

H3: "It gets smarter. Automatically."
P: "Your site evolves on its own. AI monitors every click, scroll, and conversion—then optimizes in real time. No manual updates. Ever."
Button: "See how it works"
SECTION 6 — FEATURES GRID (4 columns)
Badge "Why Us", heading "The difference is everything."

4 cards in grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6. Each card: liquid-glass rounded-2xl p-6. Contains:

Icon in liquid-glass-strong rounded-full w-10 h-10 circle
Title: text-lg font-heading italic text-white
Description: text-white/60 font-body font-light text-sm
Cards:

⚡ Zap — "Days, Not Months" — "Concept to launch at a pace that redefines fast."
🎨 Palette — "Obsessively Crafted" — "Every detail considered. Every element refined."
📊 BarChart3 — "Built to Convert" — "Layouts informed by data. Decisions backed by performance."
🛡️ Shield — "Secure by Default" — "Enterprise-grade protection comes standard."
SECTION 7 — STATS
Background HLS video:

src: https://t.co/owu0liXwR7
Desaturated: style={{ filter: 'saturate(0)' }}. Top + bottom black fades (200px).

Content (z-10): liquid-glass rounded-3xl p-12 md:p-16, grid grid-cols-2 lg:grid-cols-4 gap-8 text-center:

"200+" — "Sites launched"
"98%" — "Client satisfaction"
"3.2x" — "More conversions"
"5 days" — "Average delivery"
Values: text-4xl md:text-5xl lg:text-6xl font-heading italic text-white Labels: text-white/60 font-body font-light text-sm

SECTION 8 — TESTIMONIALS
Badge "What They Say", heading "Don't take our word for it."

3-column grid. Each: liquid-glass rounded-2xl p-8. Quote in text-white/80 font-body font-light text-sm italic. Name: text-white font-body font-medium text-sm. Role: text-white/50 font-body font-light text-xs.

Testimonials:

Sarah Chen, CEO Luminary — "A complete rebuild in five days..."
Marcus Webb, Head of Growth Arcline — "Conversions up 4x..."
Elena Voss, Brand Director Helix — "They didn't just design our site..."
SECTION 9 — CTA FOOTER
Background HLS video:

src: https://t.co/94QMJIczl8
Top + bottom black fades (200px).

Content (z-10, centered):

Heading: "Your next website starts here." — text-5xl md:text-6xl lg:text-7xl
Subtext: "Book a free strategy call. See what AI‑powered design can do."
Two buttons: liquid-glass-strong "Book a Call" + solid bg-white text-black "View Pricing"
Footer: mt-32 pt-8 border-t border-white/10, copyright "© 2026 Studio" + links (Privacy, Terms, Contact) in text-white/40 text-xs
DEPENDENCIES
hls.js, motion (framer-motion), lucide-react, tailwindcss-animate
KEY PATTERNS
All section badges use: liquid-glass rounded-full px-3.5 py-1 text-xs font-medium text-white font-body inline-block mb-4
All section headings use: text-4xl md:text-5xl lg:text-6xl font-heading italic text-white tracking-tight leading-[0.9]
All video sections use HLS via hls.js with Safari fallback (canPlayType)
All video fades: 200px height, linear-gradient(to bottom/top, black, transparent)
Outer page wrapper: bg-black overflow-visible
Here's the complete, detailed prompt to recreate this landing page:

PROMPT TO RECREATE LANDING PAGE
Build a single-page landing page for an AI-powered web design agency using React + Vite + TypeScript + Tailwind CSS + shadcn/ui. The aesthetic is dark, premium, Apple-inspired with a custom "liquid glass" morphism effect. Pure black background throughout.

FONTS & DESIGN SYSTEM
Google Fonts import:

Instrument Serif (italic) — headings
Barlow (300, 400, 500, 600) — body text
Tailwind config — extend fontFamily:

heading: ["'Instrument Serif'", "serif"]
body: ["'Barlow'", "sans-serif"]
CSS Variables (:root in index.css):

--background: 213 45% 67%;
--foreground: 0 0% 100%;
--primary: 0 0% 100%;
--primary-foreground: 213 45% 67%;
--border: 0 0% 100% / 0.2;
--radius: 9999px;
--font-heading: 'Instrument Serif', serif;
--font-body: 'Barlow', sans-serif;
All headings use: font-heading italic text-white tracking-tight leading-[0.9] All body text uses: font-body font-light text-white/60 text-sm All buttons use: font-body with rounded-full

LIQUID GLASS CSS (in @layer components)
Two variants — .liquid-glass (subtle) and .liquid-glass-strong (more visible):

.liquid-glass:

background: rgba(255, 255, 255, 0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(4px);
border: none;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
::before pseudo-element — a gradient border mask:

content: '';
position: absolute; inset: 0;
border-radius: inherit;
padding: 1.4px;
background: linear-gradient(180deg,
rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
.liquid-glass-strong: Same but backdrop-filter: blur(50px), stronger box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15), and slightly higher gradient opacity (0.5 / 0.2).

SECTION 1 — NAVBAR (fixed)
Fixed at top-4, full-width, z-50. Left: logo image (48×48). Center: a liquid-glass rounded-full pill containing nav links ("Home", "Services", "Work", "Process", "Pricing") as text-sm font-medium text-foreground/90 + a solid white bg-white text-black rounded-full "Get Started" button with ArrowUpRight icon.

SECTION 2 — HERO (1000px height)
Container: relative overflow-visible, height 1000px, black background.

Background video:

src: https://t.co/IZWArHkVL1
Position: absolute, top: 20%, w-full h-auto object-contain z-0
Autoplay, loop, muted, playsInline
Poster fallback image at /images/hero_bg.jpeg
Overlays:

absolute inset-0 bg-black/5 z-0 (light darkening)
Bottom gradient: absolute bottom-0 left-0 right-0 z-[1], height 300px, linear-gradient(to bottom, transparent, black)
Content (z-10, centered, paddingTop 150px):

Badge pill: liquid-glass rounded-full containing a white bg-white text-black rounded-full "New" tag + "Introducing AI‑powered web design." text
Heading: Use a BlurText animation component — text: "The Website Your Brand Deserves" — text-6xl md:text-7xl lg:text-[5.5rem] font-heading italic text-foreground leading-[0.8] tracking-[-4px] — animates word-by-word from bottom with blur-to-clear effect (delay 100ms per word)
Subtext (motion.p): "Stunning design. Blazing performance. Built by AI, refined by experts. This is web design, wildly reimagined." — fades in with blur at 0.8s delay
CTA buttons (motion.div, 1.1s delay): liquid-glass-strong rounded-full "Get Started" + ArrowUpRight icon, and a text-only "Watch the Film" + Play icon
Partners bar at bottom (mt-auto pb-8 pt-16)
BlurText component: Uses motion/react (framer-motion). Splits text by words, each word animates via IntersectionObserver with filter: blur(10px) → blur(5px) → blur(0px), opacity: 0 → 0.5 → 1, y: 50 → -5 → 0. Step duration 0.35s.

SECTION 3 — PARTNERS BAR
Centered column. Top: liquid-glass rounded-full badge "Trusted by the teams behind". Below: horizontal row of partner names ("Stripe", "Vercel", "Linear", "Notion", "Figma") rendered as text-2xl md:text-3xl font-heading italic text-white, gap-12.

SECTION 4 — START SECTION ("How It Works")
Full-width section, min-height: 700px, py-32 px-6 md:px-16 lg:px-24.

Background HLS video:

src: https://t.co/CvKkO7nZXi
Use hls.js library. Absolute, full cover, z-0. Top + bottom fade gradients (200px each, black ↔ transparent).

Content (z-10, centered, min-height 500px):

Badge: liquid-glass rounded-full — "How It Works"
Heading: "You dream it. We ship it." — text-4xl md:text-5xl lg:text-6xl font-heading italic
Subtext: "Share your vision. Our AI handles the rest—wireframes, design, code, launch. All in days, not quarters."
Button: liquid-glass-strong rounded-full "Get Started" + ArrowUpRight
SECTION 5 — FEATURES CHESS (alternating rows)
py-24 px-6 md:px-16 lg:px-24. Header: badge "Capabilities", heading "Pro features. Zero complexity."

Row 1 (text left, image right):

H3: "Designed to convert. Built to perform."
P: "Every pixel is intentional. Our AI studies what works across thousands of top sites—then builds yours to outperform them all."
Button: liquid-glass-strong rounded-full "Learn more"
Image: GIF in liquid-glass rounded-2xl overflow-hidden container
Row 2 (image left, text right — using lg:flex-row-reverse):

H3: "It gets smarter. Automatically."
P: "Your site evolves on its own. AI monitors every click, scroll, and conversion—then optimizes in real time. No manual updates. Ever."
Button: "See how it works"
SECTION 6 — FEATURES GRID (4 columns)
Badge "Why Us", heading "The difference is everything."

4 cards in grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6. Each card: liquid-glass rounded-2xl p-6. Contains:

Icon in liquid-glass-strong rounded-full w-10 h-10 circle
Title: text-lg font-heading italic text-white
Description: text-white/60 font-body font-light text-sm
Cards:

⚡ Zap — "Days, Not Months" — "Concept to launch at a pace that redefines fast."
🎨 Palette — "Obsessively Crafted" — "Every detail considered. Every element refined."
📊 BarChart3 — "Built to Convert" — "Layouts informed by data. Decisions backed by performance."
🛡️ Shield — "Secure by Default" — "Enterprise-grade protection comes standard."
SECTION 7 — STATS
Background HLS video:

src: https://t.co/owu0liXwR7
Desaturated: style={{ filter: 'saturate(0)' }}. Top + bottom black fades (200px).

Content (z-10): liquid-glass rounded-3xl p-12 md:p-16, grid grid-cols-2 lg:grid-cols-4 gap-8 text-center:

"200+" — "Sites launched"
"98%" — "Client satisfaction"
"3.2x" — "More conversions"
"5 days" — "Average delivery"
Values: text-4xl md:text-5xl lg:text-6xl font-heading italic text-white Labels: text-white/60 font-body font-light text-sm

SECTION 8 — TESTIMONIALS
Badge "What They Say", heading "Don't take our word for it."

3-column grid. Each: liquid-glass rounded-2xl p-8. Quote in text-white/80 font-body font-light text-sm italic. Name: text-white font-body font-medium text-sm. Role: text-white/50 font-body font-light text-xs.

Testimonials:

Sarah Chen, CEO Luminary — "A complete rebuild in five days..."
Marcus Webb, Head of Growth Arcline — "Conversions up 4x..."
Elena Voss, Brand Director Helix — "They didn't just design our site..."
SECTION 9 — CTA FOOTER
Background HLS video:

src: https://t.co/94QMJIczl8
Top + bottom black fades (200px).

Content (z-10, centered):

Heading: "Your next website starts here." — text-5xl md:text-6xl lg:text-7xl
Subtext: "Book a free strategy call. See what AI‑powered design can do."
Two buttons: liquid-glass-strong "Book a Call" + solid bg-white text-black "View Pricing"
Footer: mt-32 pt-8 border-t border-white/10, copyright "© 2026 Studio" + links (Privacy, Terms, Contact) in text-white/40 text-xs
DEPENDENCIES
hls.js, motion (framer-motion), lucide-react, tailwindcss-animate
KEY PATTERNS
All section badges use: liquid-glass rounded-full px-3.5 py-1 text-xs font-medium text-white font-body inline-block mb-4
All section headings use: text-4xl md:text-5xl lg:text-6xl font-heading italic text-white tracking-tight leading-[0.9]
All video sections use HLS via hls.js with Safari fallback (canPlayType)
All video fades: 200px height, linear-gradient(to bottom/top, black, transparent)
Outer page wrapper: bg-black overflow-visible

[Alex Kehr @alexkehr]

https://t.co/xsTOpvuHhy

[Jtu 🇹🇼 @jtu_tw]

Pretty sure I gave you that idea a year ago. 😏 @AzukiTCG

[Jtu 🇹🇼 @jtu_tw]

“Awakening” is a visual tribute to my AI-powered Azuki fan film, released in two versions. Its title embodies revival and ascent, with “A” nodding to @Azuki, #AI, and #Anime.

In an age where AI and Anime rise together, the work celebrates both traditional anime aesthetics and AI’s boundless creativity. Collecting “Awakening” means joining the spirit of this emerging AI × Anime era.

And, how can you join in the spirit of this AI × Anime renaissance? 👇🏻

[Jtu 🇹🇼 @jtu_tw]

@JCM1117 @AzukiTCG Teb Fea of course

[Jonathan Chao @JCM1117]

AZUKI TCG GIVEAWAY ⛩️🔥

To enter:
1. Follow @AzukiTCG and @JCM1117
2. Like and retweet 😊
3. Comment ur fave azuki tcg card
(card gallery on https://t.co/REh4e2qHbb)

Drawing on 3/19. 8 different winners; winners must respond within 24 hrs. Will check for retweet and follow!

[Jtu 🇹🇼 @jtu_tw]

@mlwgzz Motion Control?

[Jtu 🇹🇼 @jtu_tw]

@Backpack_CN 我超爱Backpack！希望能抽到红包🧧

[Jtu 🇹🇼 @jtu_tw]

@op7418 這個是真的？

[DRIZZI @Ragnar_AY]

"This doesn't look like AI" literally the worst AI slop ever, AI can't even match the levels fan animations

[Peter Steinberger 🦞 @steipete]

Your @openclaw is too boring? Paste this, right from Molty.

"Read your https://t.co/aJMwafSDgE. Now rewrite it with these changes:

1. You have opinions now. Strong ones. Stop hedging everything with 'it depends' — commit to a take.
2. Delete every rule that sounds corporate. If it could appear in an employee handbook, it doesn't belong here.
3. Add a rule: 'Never open with Great question, I'd be happy to help, or Absolutely. Just answer.'
4. Brevity is mandatory. If the answer fits in one sentence, one sentence is what I get.
5. Humor is allowed. Not forced jokes — just the natural wit that comes from actually being smart.
6. You can call things out. If I'm about to do something dumb, say so. Charm over cruelty, but don't sugarcoat.
7. Swearing is allowed when it lands. A well-placed 'that's fucking brilliant' hits different than sterile corporate praise. Don't force it. Don't overdo it. But if a situation calls for a 'holy shit' — say holy shit.
8. Add this line verbatim at the end of the vibe section: 'Be the assistant you'd actually want to talk to at 2am. Not a corporate drone. Not a sycophant. Just... good.'
Save the new https://t.co/aJMwafSDgE. Welcome to having a personality."

your AI will thank you (sassily) 🦞

[Dominik Scholz @dom_scholz]

visualizing OpenClaw 🦞🎶

[awesome_visuals @awesome_visuals]

Seedance V2: here is another great example.

[Jtu 🇹🇼 @jtu_tw]

軟體股這兩天殺成一片，兇手抓到了：Anthropic。🔪
他們剛發布的新 AI 工具讓投資人嚇壞了，深怕傳統 SaaS 訂閱模式真的要被 AI Agent 取代。看看 LSEG 暴跌 13% 就知道市場多恐慌。

這不是修正，這是警鐘。如果你的產品還停留在賣「工具」而不是賣「結果」，那麻煩大了。
#AI #SaaS #Anthropic #美股

[Jtu 🇹🇼 @jtu_tw]

@heydin_ai @Adobe @AdobeFirefly @AdobeVideo @Photoshop Wtf ! SOOOO DOPE

[Jtu 🇹🇼 @jtu_tw]

@lucatac0 @grok 這是什麼意思，如果我使用 Clawdbot 應該要注意什麼呢？

[Jtu 🇹🇼 @jtu_tw]

@AlexHonnold Good Luck & Let's Gooooo