An Interactive Starry Backdrop for Content

An Interactive Starry Backdrop for Content

css-tricks.com css-tricks.com3 months ago in #Dev Love44

I used to be lucky closing yr to get approached by means of Shawn Wang (swyx) about performing some paintings for Temporal. The thought used to be to forged my inventive eye over what used to be at the website online and get a hold of some concepts that may give the website online somewhat “one thing” additional. This used to be moderately a neat problem as I imagine myself extra of a developer than a designer. But I really like finding out and leveling up the design aspect of my sport. One of the information I got here up with used to be this interactive starry backdrop. You can see it running on this shared demo: — Jhey 🔨🐻✨ (@jh3yy) July 2, 2021 The neat factor about this design is that it’s constructed as a drop-in React part. And it’s tremendous configurable within the sense that whenever you’ve put in combination the principles for it, you’ll be able to make it totally your individual. Don’t need stars? Put one thing else in position. Don’t need randomly situated debris? Place them in a built means. You have general regulate of what to bend it for your will. So, let’s take a look at how we will create this drop-in part for your website online! Today’s guns of selection? React, InexperiencedSock and HTML . The React section is completely non-compulsory, in fact, however, having this interactive backdrop as a drop-in part makes it one thing you’ll be able to make use of on different tasks. Let’s get started by means of scaffolding a fundamental app import React from ‘https://cdn.skypack.dev/react’ import ReactDOM from ‘https://cdn.skypack.dev/react-dom’ import gsap from ‘https://cdn.skypack.dev/gsap’ const ROOT_NODE = record.querySelector(‘#app’) const Starscape = () =Cool Thingzzz! const App = () =ReactDOM.render(, ROOT_NODE) First factor we wish to do is render a component and seize a connection with it that we will use inside of React’s useEffect. For the ones now not the use of React, retailer a connection with the in a variable as an alternative. const Starscape = () ={ const canvasRef = React.useRef(null) go back } Our goes to want some kinds, too. For starters, we will make it so the canvas takes up the overall viewport dimension and sits at the back of the content material: canvas { place: fastened; inset: 0; background: #262626; z-index: -1; peak: 100vh; width: 100vw; } Cool! But now not a lot to look but. We want stars in our sky We’re going to “cheat” somewhat right here. We aren’t going to attract the “vintage” pointy megastar form. We’re going to make use of circles of differing opacities and sizes. Draw a circle on a is a case of grabbing a context from the and the use of the arc serve as. Let’s render a circle, err megastar, within the center. We can do that inside of a React useEffect: const Starscape = () ={ const canvasRef = React.useRef(null) const contextRef = React.useRef(null) React.useEffect(() ={ canvasRef.present.width = window.innerWidth canvasRef.present.peak = window.innerHeight contextRef.present = canvasRef.present.getContext(‘2nd’) contextRef.present.fillStyle = ‘yellow’ contextRef.present.beginPath() contextRef.present.arc( window.innerWidth / 2, // X window.innerHeight / 2, // Y 100, // Radius 0, // Start Angle (Radians) Math.PI * 2 // End Angle (Radians) ) contextRef.present.fill() }, []) go back } So what we now have is a large yellow circle: This is a great get started! The remainder of our code will happen inside of this useEffect serve as. That’s why the React section is kinda non-compulsory. You can extract this code out and use it in whichever shape you prefer. We wish to take into accounts how we’re going to…

Like to keep reading?

This article first appeared on css-tricks.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply