The Weirdos NFT Website Starter Code

The Weirdos NFT Website Starter Code is a free, open-source ReactJS template for building a responsive NFT collection landing page with GSAP scroll animations.

What is The Weirdos NFT Website Starter Code?

The Weirdos NFT Website Starter Code is a starter repository for an NFT collection website built in ReactJS. It provides the source code for a fully styled landing page with home, about, and gallery sections, animated with GSAP and ScrollTrigger. The project is bootstrapped with Create React App and uses styled-components for styling. The repository is published by codebucks27 and is designed to accompany a YouTube tutorial; the final code and a live demo are available at devdreaming.com.

Key Features

• React and Create React App — The project is built with React and bootstrapped with Create React App, providing standard npm scripts for start, test, and production build.
• GSAP with ScrollTrigger — The page uses GSAP and the ScrollTrigger plugin to create scroll-based animations and smooth scrolling effects.
• Styled-components — Styling is implemented entirely with styled-components, a CSS-in-JS solution that scopes styles to components.
• Typewriter effect — The typewriter-effect package adds a text typing animation to the landing page.
• React-confetti — Confetti animations are included via the react-confetti library, adding a festive touch to interactions.
• React-use hooks — The react-use collection of React hooks is imported for utility functionality.
• Mobile responsive layout — The design is responsive, with dedicated desktop and mobile screenshots showing the layout adapts to different screen sizes.
• External design assets — The demo uses character figures from bigheads.io, fonts from Fontsource, and SVG icons from Icons8 and Freesvg, all of which can be replaced.

Who is this template for?

• React developers learning animations — You can follow the YouTube tutorial (https://youtu.be/edr2o59Twrs) to see how GSAP ScrollTrigger is integrated into a React app.
• NFT project creators — The template gives you a polished, modern landing page for an NFT collection, ready to customize with your own characters and branding.
• Front-end students — The project is a complete, runnable example of a React app that uses hooks, multiple external libraries, and responsive CSS-in-JS styling.

What can you do with the template?

• NFT creators: Quickly launch a landing page that showcases a collection, complete with scroll-triggered animations and a gallery layout.
• React learners: Use the starter code as a practice base, modifying the styled-components and GSAP animations to understand how each part works.
• Developers: Replace the placeholder characters, fonts, and icons with production assets, then run npm run build to generate an optimized static site for deployment.

How does the template work?

The starter code is a standard Create React App project. The main sections are rendered as React components, styled with styled-components. GSAP is used to animate these sections on scroll. A note in the Button.js file explains that for links to work, the Btn component must be wrapped in an anchor tag with aria-label, target="_blank", and rel="noreferrer". To develop locally, run npm start and open http://localhost:3000.

FAQ

Is the code free to use?

Yes, this is an open-source starter repository hosted on GitHub. You can download the code, modify it, and use it for your own projects.

What is the difference between the starter code and the final code?

The repository contains the starter code only; the final code and a live demo are linked in the README from the devdreaming.com website. The tutorial video walks through building the site from the starter code to the final version.

Do I need to install anything extra?

The project uses the npm ecosystem. After cloning the repository, run npm install to install all dependencies listed in package.json, including styled-components, GSAP, typewriter-effect, react-confetti, and react-use.

Can I deploy this to a static host?

Yes, the npm run build command creates an optimized production build in the build folder, which you can deploy to any static hosting service such as Netlify, Vercel, or GitHub Pages.