riwaayat-ui

A modern frontend built for the Riwaayat platform, designed to showcase cultural storytelling through an intuitive and responsive user interface.

Riwaayat Collective

A high-end, cinematic landing page and portfolio experience designed to showcase culture, art, and storytelling. It features a highly interactive and visually immersive design with dynamic background videos, smooth scroll-driven animations, cohesive typography, and a modern aesthetic.

🚀Features

• Immersive Cinematic Design: Full-screen hero and service sections featuring dynamic background video transformations on scroll.
• Scroll-Driven Animations: Developed using GSAP and ScrollTrigger for a seamless, floating element effect across multiple sections.
• Smooth Scrolling Engine: Uses @studio-freight/lenis for a buttery-smooth page scroll that enhances narrative flow.
• Modern UI Components: Interactive hover states, beautiful typography, abstract and minimalistic layouts based on Framer Motion.
• Responsive Layout: Tailwind CSS is used extensively to adapt the layout effortlessly across devices.

🛠 Tech Stack

• Framework: React 18 + Vite 4
• Styling: Tailwind CSS
• Animation: GSAP (GreenSock Animation Platform) & Framer Motion
• Smooth Scroll: Lenis
• Icons: Lucide React

📂Project Structure

src/
├── assets/         # Static media (images, videos)
├── components/     # Reusable UI components (Hero, Services, Portfolio, etc.)
├── pages/          # Full page views (Home.jsx)
├── styles/         # Global styles (index.css)
├── app.jsx         # Main application component
└── main.jsx        # Application entry point

💻Getting Started

Follow these steps to run the application locally on your machine.

Prerequisites

You need Node.js installed on your machine.

Installation

1. Clone the repository (if applicable) or navigate to the project directory:

   cd project

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser and navigate to the local server URL (usually http://localhost:5173).

🎨 Architecture & Design Choices

• Themeology: Deep black backgrounds coupled with bright, legible typography to allow cinematic imagery/videos to pop.
• Component Modularity: Organized sequentially in Home.jsx (<Hero />, <About />, <Services />, etc.), connected by interspersed poetic lines (<PoeticLine />).
• Interactive Focus: Ensuring components like <Portfolio />, <Services />, and <Collaborations /> provide engaging hover and scroll functionalities, driving a premium user experience.

📜 License

This project is private and structured for proprietary showcasing purposes.