Guglielmo Giannattasio

Sunset Skyline Hero

Heroes 575

About

A full-screen anime-style scroll-locked hero: scrolling forward pushes the camera through a window onto a Tokyo skyline at sunset, scrolling back closes it again — ending on a giant Japanese brand mark behind a transparent skyline cutout, topped with a liquid-glass navbar.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Sunset Skyline Hero to your project and fits it to your theme.

Code

How Sunset Skyline Hero is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import TokyoSkylineHero from "@/components/ui/sunset-skyline-hero"

export default function Demo() {
  return <TokyoSkylineHero />
}

More by Guglielmo Giannattasio

View all
  • Scroll-Locked Video Hero

    Scroll-Locked Video Hero

    3.6K
  • Liquid Sculpture Hero

    Liquid Sculpture Hero

    1.7K
  • Liquid Glass Navbar

    Liquid Glass Navbar

    1.6K
  • Broken by Design — Shattered Glass Hero

    Broken by Design — Shattered Glass Hero

    518
  • Elsewhere — Day/Night Video Hero with Ambient Sound

    Elsewhere — Day/Night Video Hero with Ambient Sound

    292
  • Liquid Glass Toggle

    Liquid Glass Toggle

    242
  • Liquid Glass Accordion

    Liquid Glass Accordion

    93
  • Shave Reveal Hero

    Shave Reveal Hero

    79

More in Heroes

View all
  • Responsive Hero Banner

    Responsive Hero Banner

    2.1K
  • SaaS Template

    SaaS Template

    2.6K
  • Centered Hero with Image Fan

    Centered Hero with Image Fan

    1K
  • Hero

    Hero

    1.3K
  • Hero 03

    Hero 03

    358
  • Modern Landing Hero

    Modern Landing Hero

    133
  • HeroSectionWithGradient

    HeroSectionWithGradient

    374
  • Home Section

    Home Section

    75