jyapayne/kaboot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix shapes

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2026-01-13 08:06:47 -07:00
commit c38a3e1fdf
No known key found for this signature in database
GPG key ID: 6BFE655FA5ABD1E1
1 changed files with 17 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

30
App.tsx
View file

@ -8,26 +8,30 @@ import { Podium } from './components/Podium';
import { QuizCreator } from './components/QuizCreator';
import { RevealScreen } from './components/RevealScreen';
const FloatingShapes = () => {
// Deterministic "random" for SSR safety if needed, but client-side is fine here
const shapes = [...Array(15)].map((_, i) => ({
left: `${Math.random() * 100}%`,
width: `${Math.random() * 100 + 40}px`,
height: `${Math.random() * 100 + 40}px`,
animationDuration: `${Math.random() * 20 + 15}s`,
animationDelay: `-${Math.random() * 20}s`,
borderRadius: Math.random() > 0.5 ? '50%' : '20%', // Mix of circles and rounded squares
background: 'rgba(255, 255, 255, 0.05)',
}));
const seededRandom = (seed: number) => {
const x = Math.sin(seed * 9999) * 10000;
return x - Math.floor(x);
};
const FLOATING_SHAPES = [...Array(15)].map((_, i) => ({
left: `${seededRandom(i * 1) * 100}%`,
width: `${seededRandom(i * 2) * 100 + 40}px`,
height: `${seededRandom(i * 3) * 100 + 40}px`,
animationDuration: `${seededRandom(i * 4) * 20 + 15}s`,
animationDelay: `-${seededRandom(i * 5) * 20}s`,
borderRadius: seededRandom(i * 6) > 0.5 ? '50%' : '20%',
background: 'rgba(255, 255, 255, 0.05)',
}));
const FloatingShapes = React.memo(() => {
return (
<>
{shapes.map((style, i) => (
{FLOATING_SHAPES.map((style, i) => (
<div key={i} className="floating-shape" style={style} />
))}
</>
);
};
});
function App() {
const {