HTML · React
G
GSAP
Code LibraryAnimation Showcase
oru.codeSwipe for More
1
Fresh Visuals
Hand-picked designs with live previews and copy-ready code.
2
Browse by Category
Every section, page and animation, neatly organised.
Loading Screens24 designsLogo Animations1 designText Animations7 designsMicro-interactions12 designsButtons31 designsInputs14 designsToggle Switches16 designsCheckboxes12 designsRadio Buttons10 designsTooltips13 designsMarquees & Sliders3 designsPatterns18 designsNotifications6 designsNavigation3 designsHero Sections3 designsFeatures1 designPricing0 designsTestimonials0 designsStats & Counters0 designsCall to Action0 designsFAQ1 designContact & Forms10 designsCards21 designsFooters1 designFull Pages1 design
3
Motion, Your Way
Turn timelines, springs and line-draws into easy-to-reuse code.
GSAP
Timeline-driven motion, ScrollTrigger and buttery easing for loaders and page reveals.
npm install gsap8 designs
anime.js
Lightweight SVG line-drawing, staggering and morphing — ideal for logo animations.
npm install animejs@31 design
Framer Motion
Declarative React motion: layout animations, gestures, scroll-linked values and exit transitions.
npm install framer-motion21 designs
Pure CSS
Keyframes, transitions and custom properties. Zero dependencies, maximum portability.
No install needed179 designs
4
Latest Drops
New designs added to the library, freshest first.
Void Portal HeroHero Sections · Near-black canvas, one muted accent and whisper-thin ghost UI — a quiet, confident hero for studio sites.Arc Portrait HeroHero Sections · A fan of tiles arcs over a centered mark, then a serif headline — a hero for personal brands and studios.Colorful ButtonButtons · Button — button, colorful, btn, hover effect.Flashy ButtonButtons · Button — flashy, button, hover.
5
Start With a Prompt
Use a full website brief to make your next build easier.
Generate a complete website brief
Pick a site type, sections and motion library — get a detailed prompt in seconds.
Build a dark, premium landing page for "ORU CODE", an app for discovering local events.
Visual style: near-black background (#060708) with large blurred colour glows (deep red top-left, teal left-centre, warm amber bottom-right). Frosted glass tiles with 22px radius, subtle top highlight borders. Bold rounded display font (Nunito 900) for headlines, Manrope for body. Primary buttons are white pills with a soft white halo glow.
Sections:
1. Sticky glass navbar with logo "ORU CODE" ("ORU" in red #ff3131), links, and a white "Get the app" pill.
2. Onboarding-style hero: thin progress track, headline "See what's happening around you", muted right-aligned subtext, glowing "Next" pill.
3. "Choose Today's Event" — text tabs (All, Birthday, Music, Games, Anniversary) filtering a horizontal scroll of tall event cards: price pill top-left, heart button top-right, avatar cluster, "150+ Joined", title, date + location.
4. "Choose Category's" — 2-column grid of glass tiles with glowing white glyphs; selected tiles are lighter.
5. Testimonial marquee, app store CTA, and a footer with a giant faint wordmark.
Motion: GSAP intro loader with a counter, staggered headline reveal, ScrollTrigger fade-ups; Framer Motion layout animation when tabs filter cards. Fully responsive; bottom floating dock nav on mobile with a white centre "+" pill. Accessible: focus rings, reduced-motion support, semantic HTML.6
Free Designs for Your Business
Pick your business — get free section designs, code and a ready-made AI prompt for the whole site.
🍽️ Restaurant☕ Cafe & Bakery🏝️ Resort & Homestay🌿 Ayurveda & Wellness Centre🏥 Hospital & Clinic🦷 Dental Clinic🎓 School & College📚 Coaching & Tuition Centre🏠 Real Estate🏗️ Construction & Builders🛋️ Interior Design💇 Salon & Beauty Parlour🏋️ Gym & Fitness💍 Wedding & Event Planner📷 Photography Studio✈️ Tour & Travel Agency🛍️ Online Store💎 Jewellery & Textile Shop🚀 Startup & SaaS🧑💻 Personal Portfolio📈 Digital Marketing Agency⚖️ Law & CA Firm🤝 NGO & Charity🚕 Taxi & Car Rental
Telegram community
Join the ORU CODE community
Be the first to get new designs, animation drops and free website prompts — and share what you’re building with designers and developers from Kerala and beyond.
Join on TelegramFree to join
- New designs first
- Free website prompts
- Share your builds
7
Questions, Answered
The things people usually ask about ORU CODE.
What is ORU CODE?
ORU CODE is a free website design library. It collects website section designs — hero sections, navbars, pricing tables, testimonials, FAQs, footers and full pages — plus UI components like buttons, inputs, toggles and cards, and animations such as loading animations, text and logo animations. Every design has a live preview and copy-ready code.
Is ORU CODE free to use?
Yes. Browsing, previewing and copying code is free, with no sign-up. Designs imported from open-source libraries keep their original MIT licence and credit, which is shown on each design page.
What code do the designs come with?
Each design comes with HTML and CSS or React code, and many React components use Tailwind CSS. Animations are built with GSAP, anime.js, Framer Motion or pure CSS, so you can paste them straight into your own website.
Can I use ORU CODE with AI coding tools like Cursor, Claude Code, Lovable or v0?
Yes. Copy any design’s HTML, CSS or React code — or a full website brief from the Prompts page — and paste it into your AI coding tool as a starting point or reference. The code is readable and framework-light, so it’s easy for you or your AI tool to adapt it to your project.
Can I get a free website design for my business?
Yes. ORU CODE has free website design pages for restaurants, resorts and homestays, Ayurveda centres, clinics, schools, real estate, salons, gyms, online stores and many more businesses — each with recommended free section designs, copy-ready code and an AI prompt to build the whole site. If you’d rather have it built for you, Leaf Creationism builds websites for businesses in Kerala and across India.
Is there an ORU CODE community?
Yes. The ORU CODE Telegram community is free to join — it’s where new designs, animation drops and free website prompts are shared first, and where you can share what you’re building. Use the “Join on Telegram” button on the ORU CODE home page.
Who made ORU CODE?
ORU CODE was made by Jibin Chacko, a designer and developer from Kerala, India, and is part of Leaf Creationism, a studio that designs and builds websites and apps. “Oru” (ഒരു) is the Malayalam word for “one”.
Can I use these designs in client or commercial projects?
Designs made for ORU CODE are free to copy, remix and ship. Imported designs are MIT-licensed, which allows commercial use as long as the licence comment stays in the code — each design page shows its source and licence.
I need a website or app built in Kerala or India. Who can help?
Leaf Creationism, the studio behind ORU CODE, designs and builds websites and apps for businesses in Kerala and across India. Visit leafcreationism.in or email jibinchackoarpookara@gmail.com.
Leaf CreationismFinding it hard to design or build your website or app?
Leaf Creationism designs and builds fast, modern sites and apps — talk to our team about yours.
Talk to Leaf Creationism leafcreationism.in