Hello! I hope everything is going well. 
I’m interested in creating a page featuring a captivating rotating star effect similar to what’s showcased on the https://gatsbyconf.com/ website.
Could you please guide me on how to achieve a similar WordPress page using the Gutenberg builder? Specifically, I’m aiming to incorporate the rotating effect, and I intend to overlay additional text elements on it. While attempting to save the page, I encountered difficulties in copying the required CSS or JS for the effect. I’m uncertain about where to commence. Your assistance in this matter would be greatly appreciated. Thank you!
@Hari have you seen these
@Hari What do you have so far in terms of the page? Can you share any links, code, or CSS?
On that gatsbyconf link I cant see the rotating star?
Where is it?
@Panda said in Rotating Star Effect:
On that gatsbyconf link I cant see the rotating star?
Where is it?
I think it’s the rotating star background?
Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…
@phenomlab yes, the rotating background, i have no pages. how do i get it in a wordpress page
@phenomlab ah, it doesnt show on mobile
But see it now in desktop mode
@Hari that’s not as simple as it looks. Do you have a mock-up of how you’d like it to look?
just the rotating background without text would just work fine. i want to save this effect on page for now so i can refer to it later.
can we find something on their github?
@Hari said in Rotating Star Effect:
can we find something on their github?
Have you checked there already?
@Hari it looks very cool, I hope there is an easy way to achieve this background.
Im on mobile, is there anyone who can paste this into one of those jsfiddle / codepen sites, to make a clickable demo from this very basic version1
I will add some matrix sin/cos to make it rotate round rather than flat in v2
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var s=[],i
for(i=0;i<200;i++){
s[i]={x: Math.random()*600,
y: Math.random()*400,
r: Math.random()*3}
}
setInterval(draw,30)
function draw() {
for(i=0;i<200;i++){
ctx.beginPath()
ctx.fillStyle='white'
ctx.arc(s[i].x, s[i].y, 5, 0, 6.3)
ctx.fill()
ctx.beginPath()
ctx.fillStyle='black'
s[i].x+=1
if(s[i].x>610){s[i].x=-5}
ctx.arc(s[i].x, s[i].y, s[i].r, 0, 6.3)
ctx.fill()
}
}
</script>
</body>
</html>
@Hari have you seen these
Those look good. I put my basic one in a codepen
https://codepen.io/C-L-the-selector/pen/MWZbWBo
@Panda That also looks good. Just short of the 3D rendering part ! 
@Hari just came across this - looks like it could fit the bill
https://jsfiddle.net/eLxazfta/
and this
And this is so clever - very well written
@phenomlab thanks a lot for these, both of the below are awesome! 
undefined Hari has marked this topic as solved on
