Form 1: Neon Nirvana
Introduction: Spiritual enlightenment meets cyberpunk aesthetics.
Features: Lotus flower with neon glow, meditation vibes, tech elements.
import React from 'react';
import styled, { keyframes } from 'styled-components';
const glowPulse = keyframes`
0% { filter: drop-shadow(0 0 5px #ff6b6b); }
50% { filter: drop-shadow(0 0 20px #4ecdc4); }
100% { filter: drop-shadow(0 0 5px #ff6b6b); }
`;
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #1a1f2f, #2a1f3f);
position: relative;
overflow: hidden;
`;
const Lotus = styled.div`
position: absolute;
width: 200px;
height: 200px;
background: radial-gradient(circle, #ff6b6b, #4ecdc4);
opacity: 0.1;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: ${glowPulse} 5s infinite;
`;
const Form = styled.form`
background: rgba(20, 15, 30, 0.7);
backdrop-filter: blur(10px);
padding: 50px;
width: 350px;
border: 2px solid #ff6b6b;
border-radius: 30px;
box-shadow: 0 0 50px #4ecdc4;
z-index: 1;
`;
const Title = styled.h2`
color: #fff;
text-align: center;
margin-bottom: 30px;
font-size: 32px;
text-shadow: 0 0 10px #ff6b6b, 0 0 20px #4ecdc4;
letter-spacing: 4px;
`;
const Form1 = () => {
return (
<Container>
<Lotus />
<Form onSubmit={(e) => e.preventDefault()}>
<Title>NEON NIRVANA</Title>
<input type="email" placeholder="Soul ID" style={inputStyle} />
<input type="password" placeholder="Chakra Key" style={inputStyle} />
<button style={buttonStyle}>ENLIGHTEN</button>
</Form>
</Container>
);
};
const inputStyle = {
width: '100%',
padding: '12px',
margin: '10px 0',
border: '2px solid #ff6b6b',
borderRadius: '20px',
background: 'transparent',
color: '#fff'
};
const buttonStyle = {
width: '100%',
padding: '12px',
marginTop: '20px',
border: '2px solid #4ecdc4',
borderRadius: '20px',
background: 'transparent',
color: '#fff',
cursor: 'pointer'
};
export default Form1;
Form 2: Quantum Quasar
Introduction: Deep space cosmic phenomenon with energy beams.
Features: Quasar jets, cosmic rays, black hole aesthetics.
import React from 'react';
import styled, { keyframes } from 'styled-components';
const quasarJet = keyframes`
0% { transform: rotate(0deg) scale(1); }
100% { transform: rotate(360deg) scale(1.5); }
`;
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: radial-gradient(ellipse at center, #000, #1a0033);
position: relative;
overflow: hidden;
`;
const Jet = styled.div`
position: absolute;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #ff00ff, #00ffff, transparent);
animation: ${quasarJet} 10s linear infinite;
transform-origin: center;
`;
const Form = styled.form`
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(10px);
padding: 50px;
width: 350px;
border: 3px solid #ff00ff;
border-radius: 0;
clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%);
box-shadow: 0 0 100px #00ffff;
`;
const Title = styled.h2`
color: #fff;
text-align: center;
margin-bottom: 30px;
font-size: 32px;
text-shadow: 0 0 20px #ff00ff, 0 0 40px #00ffff;
`;
const Form2 = () => {
return (
<Container>
<Jet />
<Jet style={{ transform: 'rotate(45deg)' }} />
<Jet style={{ transform: 'rotate(90deg)' }} />
<Jet style={{ transform: 'rotate(135deg)' }} />
<Form onSubmit={(e) => e.preventDefault()}>
<Title>QUANTUM QUASAR</Title>
<input type="email" placeholder="Cosmic ID" style={inputStyle} />
<input type="password" placeholder="Singularity Key" style={inputStyle} />
<button style={buttonStyle}>ENTER EVENT HORIZON</button>
</Form>
</Container>
);
};
const inputStyle = {
width: '100%',
padding: '12px',
margin: '10px 0',
border: '2px solid #ff00ff',
background: 'transparent',
color: '#fff'
};
const buttonStyle = {
width: '100%',
padding: '12px',
marginTop: '20px',
border: '2px solid #00ffff',
background: 'transparent',
color: '#fff',
cursor: 'pointer'
};
export default Form2;
Form 3: Bioluminescent Bay
Introduction: Glowing plankton and magical underwater light show.
Features: Glowing organisms, water ripples, night sea.
import React, { useEffect, useState } from 'react';
import styled, { keyframes } from 'styled-components';
const ripple = keyframes`
0% { transform: scale(1); opacity: 0.5; }
100% { transform: scale(2); opacity: 0; }
`;
const glow = keyframes`
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.5); }
`;
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(180deg, #001a33, #000d1a);
position: relative;
overflow: hidden;
`;
const Plankton = styled.div`
position: absolute;
width: ${props => props.size}px;
height: ${props => props.size}px;
background: #7cfc00;
border-radius: 50%;
filter: blur(2px);
animation: ${glow} 3s infinite;
left: ${props => props.left}%;
top: ${props => props.top}%;
opacity: ${props => props.opacity};
`;
const Ripple = styled.div`
position: absolute;
width: 50px;
height: 50px;
border: 2px solid #7cfc00;
border-radius: 50%;
animation: ${ripple} 4s infinite;
left: ${props => props.left}%;
top: ${props => props.top}%;
`;
const Form = styled.form`
background: rgba(0, 30, 50, 0.6);
backdrop-filter: blur(15px);
padding: 50px;
width: 350px;
border: 3px solid #7cfc00;
border-radius: 100px 100px 50px 50px;
box-shadow: 0 0 80px #7cfc00;
z-index: 1;
`;
const Title = styled.h2`
color: #7cfc00;
text-align: center;
margin-bottom: 30px;
font-size: 32px;
text-shadow: 0 0 30px #7cfc00;
`;
const Form3 = () => {
const [planktons, setPlanktons] = useState([]);
useEffect(() => {
const newPlanktons = [];
for (let i = 0; i < 50; i++) {
newPlanktons.push({
id: i,
size: Math.random() * 10 + 2,
left: Math.random() * 100,
top: Math.random() * 100,
opacity: Math.random() * 0.5 + 0.3
});
}
setPlanktons(newPlanktons);
}, []);
return (
<Container>
{planktons.map(p => (
<Plankton key={p.id} {...p} />
))}
<Ripple left="30" top="20" />
<Ripple left="70" top="80" />
<Form onSubmit={(e) => e.preventDefault()}>
<Title>BIOLUMINESCENT BAY</Title>
<input type="email" placeholder="Glow Mail" style={inputStyle} />
<input type="password" placeholder="Plankton Code" style={inputStyle} />
<button style={buttonStyle}>DIVE IN</button>
</Form>
</Container>
);
};
const inputStyle = {
width: '100%',
padding: '12px',
margin: '10px 0',
border: '2px solid #7cfc00',
borderRadius: '50px',
background: 'rgba(0,0,0,0.5)',
color: '#7cfc00',
textAlign: 'center'
};
const buttonStyle = {
width: '100%',
padding: '12px',
marginTop: '20px',
border: '2px solid #7cfc00',
borderRadius: '50px',
background: 'transparent',
color: '#7cfc00',
cursor: 'pointer'
};
export default Form3;
Form 4: Steampunk Airship
Introduction: Victorian-era flying machines with brass and copper.
Features: Airship silhouette, gears, clouds, propellers.
import React from 'react';
import styled, { keyframes } from 'styled-components';
const float = keyframes`
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
`;
const rotatePropeller = keyframes`
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
`;
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(180deg, #87CEEB, #B0E0E6);
position: relative;
overflow: hidden;
`;
const Airship = styled.div`
position: absolute;
width: 200px;
height: 60px;
background: #8B4513;
border-radius: 50px;
top: 30%;
left: 10%;
animation: ${float} 5s infinite;
&::before {
content: '';
position: absolute;
width: 80px;
height: 40px;
background: #CD853F;
border-radius: 40px 40px 0 0;
top: -30px;
left: 60px;
}
&::after {
content: '⚙️';
position: absolute;
font-size: 30px;
right: -20px;
top: 15px;
animation: ${rotatePropeller} 2s linear infinite;
}
`;
const Cloud = styled.div`
position: absolute;
width: 100px;
height: 40px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50px;
left: ${props => props.left}%;
top: ${props => props.top}%;
animation: ${float} ${props => props.speed}s infinite;
`;
const Form = styled.form`
background: rgba(139, 69, 19, 0.7);
backdrop-filter: blur(5px);
padding: 50px;
width: 350px;
border: 6px double #CD853F;
border-radius: 30px;
box-shadow: 0 0 50px #8B4513;
z-index: 1;
`;
const Title = styled.h2`
color: #DEB887;
text-align: center;
margin-bottom: 30px;
font-size: 32px;
text-shadow: 2px 2px 4px #8B4513;
font-family: 'Times New Roman', serif;
`;
const Form4 = () => {
const clouds = [
{ left: 70, top: 20, speed: 7 },
{ left: 20, top: 80, speed: 9 },
{ left: 80, top: 40, speed: 6 }
];
return (
<Container>
<Airship />
{clouds.map((cloud, i) => (
<Cloud key={i} {...cloud} />
))}
<Form onSubmit={(e) => e.preventDefault()}>
<Title>STEAMPUNK AIRSHIP</Title>
<input type="email" placeholder="Brass Mail" style={inputStyle} />
<input type="password" placeholder="Copper Key" style={inputStyle} />
<button style={buttonStyle}>TAKE FLIGHT</button>
</Form>
</Container>
);
};
const inputStyle = {
width: '100%',
padding: '12px',
margin: '10px 0',
border: '3px double #CD853F',
background: '#5A3A1A',
color: '#DEB887'
};
const buttonStyle = {
width: '100%',
padding: '12px',
marginTop: '20px',
border: '3px double #CD853F',
background: '#8B4513',
color: '#DEB887',
cursor: 'pointer'
};
export default Form4;
Form 5: Cyberdojo
Introduction: Futuristic martial arts training facility with neon grids.
Features: Neon fighting ring, holographic targets, energy beams.
import React from 'react';
import styled, { keyframes } from 'styled-components';
const energyWave = keyframes`
0% { transform: scaleX(0); opacity: 1; }
100% { transform: scaleX(1); opacity: 0; }
`;
const gridMove = keyframes`
0% { background-position: 0 0; }
100% { background-position: 50px 50px; }
`;
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #0a0f1a;
background-image:
linear-gradient(rgba(255, 0, 255, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
background-size: 50px 50px;
animation: ${gridMove} 10s linear infinite;
position: relative;
`;
const Target = styled.div`
position: absolute;
width: 60px;
height: 60px;
border: 2px solid #ff00ff;
border-radius: 50%;
left: ${props => props.left}%;
top: ${props => props.top}%;
&::before {
content: '';
position: absolute;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #ff00ff, transparent);
animation: ${energyWave} 2s infinite;
}
`;
const Form = styled.form`
background: rgba(10, 15, 26, 0.8);
backdrop-filter: blur(10px);
padding: 50px;
width: 350px;
border: 3px solid #ff00ff;
border-radius: 10px;
box-shadow: 0 0 50px #ff00ff, inset 0 0 30px #00ffff;
z-index: 1;
transform: perspective(500px) rotateX(5deg);
`;
const Title = styled.h2`
color: #00ffff;
text-align: center;
margin-bottom: 30px;
font-size: 36px;
text-shadow: 0 0 20px #ff00ff;
font-family: 'Impact', sans-serif;
letter-spacing: 4px;
`;
const Form5 = () => {
const targets = [
{ left: 20, top: 30 },
{ left: 70, top: 60 },
{ left: 40, top: 80 }
];
return (
<Container>
{targets.map((target, i) => (
<Target key={i} {...target} />
))}
<Form onSubmit={(e) => e.preventDefault()}>
<Title>CYBERDOJO</Title>
<input type="email" placeholder="Fighter ID" style={inputStyle} />
<input type="password" placeholder="Ki Code" style={inputStyle} />
<button style={buttonStyle}>BEGIN TRAINING</button>
</Form>
</Container>
);
};
const inputStyle = {
width: '100%',
padding: '12px',
margin: '10px 0',
border: '2px solid #ff00ff',
background: 'transparent',
color: '#00ffff',
textAlign: 'center'
};
const buttonStyle = {
width: '100%',
padding: '12px',
marginTop: '20px',
border: '2px solid #00ffff',
background: 'transparent',
color: '#ff00ff',
cursor: 'pointer'
};
export default Form5;
Form 6: Crystal Cathedral
Introduction: Stained glass windows with divine light rays.
Features: Gothic architecture, colored light, holy ambiance.
import React from 'react';
import styled, { keyframes } from 'styled-components';
const lightRays = keyframes`
0% { opacity: 0.3; transform: rotate(0deg); }
50% { opacity: 0.8; transform: rotate(5deg); }
100% { opacity: 0.3; transform: rotate(0deg); }
`;
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #2a1a3a, #1a0f2a);
position: relative;
overflow: hidden;
`;
const StainedGlass = styled.div`
position: absolute;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
45deg,
#ff0000 0px,
#ff0000 20px,
#ff8800 20px,
#ff8800 40px,
#ffff00 40px,
#ffff00 60px,
#00ff00 60px,
#00ff00 80px,
#0000ff 80px,
#0000ff 100px,
#8800ff 100px,
#8800ff 120px
);
opacity: 0.1;
filter: blur(10px);
animation: ${lightRays} 20s infinite;
`;
const Window = styled.div`
position: absolute;
width: 300px;
height: 400px;
background: rgba(255, 215, 0, 0.1);
border: 4px solid #ffd700;
border-radius: 100px 100px 0 0;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
&::before {
content: '✝';
position: absolute;
color: #ffd700;
font-size: 100px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 0.3;
}
`;
const Form = styled.form`
background: rgba(42, 26, 58, 0.7);
backdrop-filter: blur(15px);
padding: 50px;
width: 350px;
border: 4px solid #ffd700;
border-radius: 30px 30px 60px 60px;
box-shadow: 0 0 100px #ffd700;
z-index: 1;
`;
const Title = styled.h2`
color: #ffd700;
text-align: center;
margin-bottom: 30px;
font-size: 32px;
text-shadow: 2px 2px 4px #8a2be2;
font-family: 'Georgia', serif;
`;
const Form6 = () => {
return (
<Container>
<StainedGlass />
<Window />
<Form onSubmit={(e) => e.preventDefault()}>
<Title>CRYSTAL CATHEDRAL</Title>
<input type="email" placeholder="Sacred Mail" style={inputStyle} />
<input type="password" placeholder="Divine Key" style={inputStyle} />
<button style={buttonStyle}>ENTER SANCTUARY</button>
</Form>
</Container>
);
};
const inputStyle = {
width: '100%',
padding: '12px',
margin: '10px 0',
border: '2px solid #ffd700',
background: 'rgba(0,0,0,0.5)',
color: '#ffd700',
textAlign: 'center'
};
const buttonStyle = {
width: '100%',
padding: '12px',
marginTop: '20px',
border: '2px solid #ffd700',
background: 'transparent',
color: '#ffd700',
cursor: 'pointer'
};
export default Form6;
Form 7: Neon Safari
Introduction: African savanna at night with glowing animals.
Features: Neon animals, acacia trees, starry sky.
import React from 'react';
import styled, { keyframes } from 'styled-components';
const animalMove = keyframes`
0%, 100% { transform: translateX(0); }
50% { transform: translateX(10px); }
`;
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(180deg, #0a1a2a, #2a3f1a);
position: relative;
overflow: hidden;
`;
const Animal = styled.div`
position: absolute;
color: #ff6b6b;
font-size: ${props => props.size}px;
animation: ${animalMove} 3s infinite;
left: ${props => props.left}%;
top: ${props => props.top}%;
filter: drop-shadow(0 0 10px currentColor);
`;
const Tree = styled.div`
position: absolute;
width: 20px;
height: 150px;
background: linear-gradient(90deg, #ffaa00, #ff6600);
border-radius: 10px;
bottom: 0;
left: ${props => props.left}%;
filter: drop-shadow(0 0 20px #ffaa00);
&::before {
content: '🌳';
position: absolute;
font-size: 60px;
top: -50px;
left: -20px;
}
`;
const Form = styled.form`
background: rgba(42, 63, 26, 0.7);
backdrop-filter: blur(10px);
padding: 50px;
width: 350px;
border: 3px solid #ffaa00;
border-radius: 30px;
box-shadow: 0 0 50px #ff6b6b;
z-index: 1;
`;
const Title = styled.h2`
color: #ffaa00;
text-align: center;
margin-bottom: 30px;
font-size: 32px;
text-shadow: 0 0 20px #ff6b6b;
`;
const Form7 = () => {
const animals = [
{ emoji: '🦁', size: 40, left: 10, top: 30 },
{ emoji: '🐘', size: 50, left: 80, top: 60 },
{ emoji: '🦒', size: 45, left: 20, top: 70 },
{ emoji: '🦓', size: 35, left: 85, top: 20 }
];
return (
<Container>
{animals.map((animal, i) => (
<Animal key={i} {...animal}>{animal.emoji}</Animal>
))}
<Tree left="15" />
<Tree left="75" />
<Form onSubmit={(e) => e.preventDefault()}>
<Title>NEON SAFARI</Title>
<input type="email" placeholder="Savanna Mail" style={inputStyle} />
<input type="password" placeholder="Wild Key" style={inputStyle} />
<button style={buttonStyle}>TRACK ANIMALS</button>
</Form>
</Container>
);
};
const inputStyle = {
width: '100%',
padding: '12px',
margin: '10px 0',
border: '2px solid #ffaa00',
borderRadius: '20px',
background: 'rgba(0,0,0,0.5)',
color: '#ffaa00',
textAlign: 'center'
};
const buttonStyle = {
width: '100%',
padding: '12px',
marginTop: '20px',
border: '2px solid #ff6b6b',
borderRadius: '20px',
background: 'transparent',
color: '#ff6b6b',
cursor: 'pointer'
};
export default Form7;
Form 8: Quantum Library
Introduction: Infinite library with floating glowing books.
Features: Hovering books, knowledge particles, magical ambiance.
import React from 'react';
import styled, { keyframes } from 'styled-components';
const floatBook = keyframes`
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(5deg); }
`;
const pageFlip = keyframes`
0% { transform: rotateY(0deg); }
100% { transform: rotateY(180deg); }
`;
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #2a1f1a, #3f2f2a);
position: relative;
overflow: hidden;
`;
const Book = styled.div`
position: absolute;
width: 60px;
height: 80px;
background: ${props => props.color};
border-radius: 5px 15px 15px 5px;
animation: ${floatBook} 4s infinite;
left: ${props => props.left}%;
top: ${props => props.top}%;
transform-origin: left center;
&::before {
content: '📖';
position: absolute;
font-size: 30px;
left: -10px;
top: 25px;
}
&::after {
content: '';
position: absolute;
width: 10px;
height: 100%;
background: linear-gradient(90deg, #ffd700, transparent);
left: 0;
opacity: 0.5;
}
`;
const Knowledge = styled.div`
position: absolute;
color: #ffd700;
font-size: 20px;
animation: ${pageFlip} 5s infinite;
left: ${props => props.left}%;
top: ${props => props.top}%;
opacity: 0.3;
`;
const Form = styled.form`
background: rgba(42, 31, 26, 0.8);
backdrop-filter: blur(15px);
padding: 50px;
width: 350px;
border: 4px solid #c0a060;
border-radius: 20px;
box-shadow: 0 0 50px #ffd700;
z-index: 1;
`;
const Title = styled.h2`
color: #ffd700;
text-align: center;
margin-bottom: 30px;
font-size: 32px;
text-shadow: 0 0 20px #c0a060;
`;
const Form8 = () => {
const books = [
{ color: '#8B4513', left: 15, top: 20 },
{ color: '#CD853F', left: 80, top: 30 },
{ color: '#D2691E', left: 25, top: 70 },
{ color: '#A0522D', left: 85, top: 60 }
];
return (
<Container>
{books.map((book, i) => (
<Book key={i} {...book} />
))}
<Knowledge left="40" top="20">∑</Knowledge>
<Knowledge left="60" top="80">∫</Knowledge>
<Knowledge left="30" top="40">∞</Knowledge>
<Form onSubmit={(e) => e.preventDefault()}>
<Title>QUANTUM LIBRARY</Title>
<input type="email" placeholder="Knowledge Mail" style={inputStyle} />
<input type="password" placeholder="Wisdom Code" style={inputStyle} />
<button style={buttonStyle}>READ MORE</button>
</Form>
</Container>
);
};
const inputStyle = {
width: '100%',
padding: '12px',
margin: '10px 0',
border: '2px solid #c0a060',
background: 'rgba(0,0,0,0.5)',
color: '#ffd700',
textAlign: 'center'
};
const buttonStyle = {
width: '100%',
padding: '12px',
marginTop: '20px',
border: '2px solid #c0a060',
background: 'transparent',
color: '#ffd700',
cursor: 'pointer'
};
export default Form8;
Form 9: Neon Carnival
Introduction: Night carnival with glowing rides and games.
Features: Ferris wheel, carousel, cotton candy lights.
import React from 'react';
import styled, { keyframes } from 'styled-components';
const spin = keyframes`
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
`;
const bounce = keyframes`
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
`;
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: radial-gradient(circle at 20% 20%, #ff6b6b, #4ecdc4, #1a1f2f);
position: relative;
overflow: hidden;
`;
const FerrisWheel = styled.div`
position: absolute;
width: 200px;
height: 200px;
border: 3px solid #ff00ff;
border-radius: 50%;
left: 10%;
top: 20%;
animation: ${spin} 10s linear infinite;
&::before {
content: '🎡';
position: absolute;
font-size: 50px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
`;
const Balloon = styled.div`
position: absolute;
width: 30px;
height: 40px;
background: ${props => props.color};
border-radius: 50%;
animation: ${bounce} 2s infinite;
left: ${props => props.left}%;
top: ${props => props.top}%;
&::after {
content: '🧵';
position: absolute;
font-size: 20px;
bottom: -20px;
left: 10px;
}
`;
const Form = styled.form`
background: rgba(26, 31, 47, 0.7);
backdrop-filter: blur(15px);
padding: 50px;
width: 350px;
border: 4px solid #ff69b4;
border-radius: 50px;
box-shadow: 0 0 80px #ff00ff;
z-index: 1;
`;
const Title = styled.h2`
color: #ff69b4;
text-align: center;
margin-bottom: 30px;
font-size: 36px;
text-shadow: 0 0 30px #00ffff;
`;
const Form9 = () => {
const balloons = [
{ color: '#ff6b6b', left: 70, top: 30 },
{ color: '#4ecdc4', left: 80, top: 50 },
{ color: '#ffd700', left: 65, top: 70 }
];
return (
<Container>
<FerrisWheel />
{balloons.map((balloon, i) => (
<Balloon key={i} {...balloon} />
))}
<Form onSubmit={(e) => e.preventDefault()}>
<Title>NEON CARNIVAL</Title>
<input type="email" placeholder="Ticket Email" style={inputStyle} />
<input type="password" placeholder="Ride Code" style={inputStyle} />
<button style={buttonStyle}>ENTER THE MIDWAY</button>
</Form>
</Container>
);
};
const inputStyle = {
width: '100%',
padding: '12px',
margin: '10px 0',
border: '2px solid #ff69b4',
borderRadius: '25px',
background: 'rgba(0,0,0,0.5)',
color: '#ff69b4',
textAlign: 'center'
};
const buttonStyle = {
width: '100%',
padding: '12px',
marginTop: '20px',
border: '2px solid #00ffff',
borderRadius: '25px',
background: 'transparent',
color: '#00ffff',
cursor: 'pointer'
};
export default Form9;
Form 10: Quantum Garden
Introduction: Futuristic garden with glowing plants and flowers.
Features: LED plants, light particles, zen atmosphere.
import React from 'react';
import styled, { keyframes } from 'styled-components';
const grow = keyframes`
0% { transform: scaleY(0.5); opacity: 0.5; }
100% { transform: scaleY(1); opacity: 1; }
`;
const bloom = keyframes`
0% { filter: hue-rotate(0deg); }
100% { filter: hue-rotate(360deg); }
`;
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(180deg, #0a2f1a, #1a4f2a);
position: relative;
overflow: hidden;
`;
const Plant = styled.div`
position: absolute;
width: 4px;
height: ${props => props.height}px;
background: linear-gradient(0deg, #00ff00, #ffff00);
animation: ${grow} 3s infinite alternate;
left: ${props => props.left}%;
bottom: 0;
&::after {
content: '🌸';
position: absolute;
font-size: 20px;
top: -20px;
left: -8px;
animation: ${bloom} 5s infinite;
}
`;
const Light = styled.div`
position: absolute;
width: 20px;
height: 20px;
background: ${props => props.color};
border-radius: 50%;
filter: blur(5px);
animation: ${bloom} 3s infinite;
left: ${props => props.left}%;
top: ${props => props.top}%;
`;
const Form = styled.form`
background: rgba(10, 47, 26, 0.7);
backdrop-filter: blur(10px);
padding: 50px;
width: 350px;
border: 3px solid #00ff00;
border-radius: 50px 50px 20px 20px;
box-shadow: 0 0 50px #ffff00;
z-index: 1;
`;
const Title = styled.h2`
color: #00ff00;
text-align: center;
margin-bottom: 30px;
font-size: 32px;
text-shadow: 0 0 20px #ffff00;
`;
const Form10 = () => {
const plants = [
{ height: 100, left: 10 },
{ height: 150, left: 20 },
{ height: 80, left: 80 },
{ height: 120, left: 90 }
];
const lights = [
{ color: '#ff00ff', left: 30, top: 40 },
{ color: '#00ffff', left: 50, top: 60 },
{ color: '#ffff00', left: 70, top: 20 }
];
return (
<Container>
{plants.map((plant, i) => (
<Plant key={i} {...plant} />
))}
{lights.map((light, i) => (
<Light key={i} {...light} />
))}
<Form onSubmit={(e) => e.preventDefault()}>
<Title>QUANTUM GARDEN</Title>
<input type="email" placeholder="Bloom Mail" style={inputStyle} />
<input type="password" placeholder="Petal Code" style={inputStyle} />
<button style={buttonStyle}>CULTIVATE</button>
</Form>
</Container>
);
};
const inputStyle = {
width: '100%',
padding: '12px',
margin: '10px 0',
border: '2px solid #00ff00',
borderRadius: '25px',
background: 'rgba(0,0,0,0.5)',
color: '#00ff00'
};
const buttonStyle = {
width: '100%',
padding: '12px',
marginTop: '20px',
border: '2px solid #ffff00',
borderRadius: '25px',
background: 'transparent',
color: '#ffff00',
cursor: 'pointer'
};
export default Form10;
Form 11: Neon Diner
Introduction: 50s American diner with neon signs and checkered floor.
Features: Jukebox, milkshakes, retro booths.
import React from 'react';
import styled, { keyframes } from 'styled-components';
const flicker = keyframes`
0%, 100% { opacity: 1; }
50% { opacity: 0.8; }
`;
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
position: relative;
overflow: hidden;
`;
const Jukebox = styled.div`
position: absolute;
width: 100px;
height: 150px;
background: #ff00ff;
border-radius: 20px;
left: 10%;
bottom: 20%;
&::before {
content: '🎵';
position: absolute;
font-size: 40px;
left: 30px;
top: 20px;
animation: ${flicker} 1s infinite;
}
`;
const Milkshake = styled.div`
position: absolute;
width: 40px;
height: 80px;
background: #ffff00;
border-radius: 20px 20px 10px 10px;
right: 15%;
bottom: 30%;
&::before {
content: '🥤';
position: absolute;
font-size: 40px;
top: -30px;
left: 0;
}
`;
const Form = styled.form`
background: rgba(255, 255, 255, 0.8);
padding: 50px;
width: 350px;
border: 6px solid #ff00ff;
border-radius: 30px;
box-shadow: 0 0 50px #00ffff;
z-index: 1;
`;
const Title = styled.h2`
color: #ff00ff;
text-align: center;
margin-bottom: 30px;
font-size: 36px;
text-shadow: 2px 2px 0 #00ffff;
`;
const Form11 = () => {
return (
<Container>
<Jukebox />
<Milkshake />
<Form onSubmit={(e) => e.preventDefault()}>
<Title>NEON DINER</Title>
<input type="email" placeholder="Shake Mail" style={inputStyle} />
<input type="password" placeholder="Burger Code" style={inputStyle} />
<button style={buttonStyle}>ORDER UP</button>
</Form>
</Container>
);
};
const inputStyle = {
width: '100%',
padding: '12px',
margin: '10px 0',
border: '3px solid #ff00ff',
background: '#fff',
color: '#ff00ff',
textAlign: 'center'
};
const buttonStyle = {
width: '100%',
padding: '12px',
marginTop: '20px',
border: '3px solid #00ffff',
background: '#ff00ff',
color: '#fff',
cursor: 'pointer'
};
export default Form11;
Form 12: Cyber Circus
Introduction: Digital circus with holographic performers.
Features: Hologram animals, digital trapeze, light rings.
import React from 'react';
import styled, { keyframes } from 'styled-components';
const hologram = keyframes`
0%, 100% { opacity: 0.5; filter: hue-rotate(0deg); }
50% { opacity: 1; filter: hue-rotate(180deg); }
`;
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: radial-gradient(circle at 30% 30%, #00ffff, #ff00ff);
position: relative;
overflow: hidden;
`;
const Ring = styled.div`
position: absolute;
width: 150px;
height: 150px;
border: 3px solid #00ffff;
border-radius: 50%;
animation: ${hologram} 3s infinite;
left: ${props => props.left}%;
top: ${props => props.top}%;
&::before {
content: '🤹';
position: absolute;
font-size: 40px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
`;
const Form = styled.form`
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(15px);
padding: 50px;
width: 350px;
border: 4px solid #ff00ff;
border-radius: 30px;
box-shadow: 0 0 80px #00ffff;
z-index: 1;
`;
const Title = styled.h2`
color: #00ffff;
text-align: center;
margin-bottom: 30px;
font-size: 36px;
text-shadow: 0 0 20px #ff00ff;
`;
const Form12 = () => {
const rings = [
{ left: 20, top: 20 },
{ left: 70, top: 30 },
{ left: 30, top: 70 },
{ left: 80, top: 60 }
];
return (
<Container>
{rings.map((ring, i) => (
<Ring key={i} {...ring} />
))}
<Form onSubmit={(e) => e.preventDefault()}>
<Title>CYBER CIRCUS</Title>
<input type="email" placeholder="Clown Mail" style={inputStyle} />
<input type="password" placeholder="Trapeze Key" style={inputStyle} />
<button style={buttonStyle}>STEP RIGHT UP</button>
</Form>
</Container>
);
};
const inputStyle = {
width: '100%',
padding: '12px',
margin: '10px 0',
border: '2px solid #00ffff',
background: 'transparent',
color: '#00ffff',
textAlign: 'center'
};
const buttonStyle = {
width: '100%',
padding: '12px',
marginTop: '20px',
border: '2px solid #ff00ff',
background: 'transparent',
color: '#ff00ff',
cursor: 'pointer'
};
export default Form12;
Form 13: Neon Monastery
Introduction: Futuristic monks meditating with technology.
Features: Meditation pods, holographic sutras, energy orbs.
import React from 'react';
import styled, { keyframes } from 'styled-components';
const meditate = keyframes`
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
`;
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #1a2f1a, #2f4f2f);
position: relative;
overflow: hidden;
`;
const Monk = styled.div`
position: absolute;
width: 50px;
height: 80px;
background: #ffaa00;
border-radius: 40% 40% 20% 20%;
animation: ${meditate} 4s infinite;
left: ${props => props.left}%;
top: ${props => props.top}%;
&::before {
content: '🧘';
position: absolute;
font-size: 40px;
top: -20px;
left: 5px;
}
`;
const Orb = styled.div`
position: absolute;
width: 60px;
height: 60px;
border: 2px solid #ffaa00;
border-radius: 50%;
animation: ${meditate} 3s infinite;
left: ${props => props.left}%;
top: ${props => props.top}%;
&::before {
content: '⚡';
position: absolute;
font-size: 30px;
left: 15px;
top: 15px;
color: #ffaa00;
}
`;
const Form = styled.form`
background: rgba(26, 47, 26, 0.7);
backdrop-filter: blur(10px);
padding: 50px;
width: 350px;
border: 3px solid #ffaa00;
border-radius: 50px;
box-shadow: 0 0 50px #ffaa00;
z-index: 1;
`;
const Title = styled.h2`
color: #ffaa00;
text-align: center;
margin-bottom: 30px;
font-size: 32px;
text-shadow: 0 0 20px #ffaa00;
`;
const Form13 = () => {
const monks = [
{ left: 15, top: 20 },
{ left: 80, top: 30 },
{ left: 25, top: 70 }
];
const orbs = [
{ left: 40, top: 40 },
{ left: 60, top: 60 }
];
return (
<Container>
{monks.map((monk, i) => (
<Monk key={i} {...monk} />
))}
{orbs.map((orb, i) => (
<Orb key={i} {...orb} />
))}
<Form onSubmit={(e) => e.preventDefault()}>
<Title>NEON MONASTERY</Title>
<input type="email" placeholder="Zen Mail" style={inputStyle} />
<input type="password" placeholder="Nirvana Code" style={inputStyle} />
<button style={buttonStyle}>ACHIEVE ENLIGHTENMENT</button>
</Form>
</Container>
);
};
const inputStyle = {
width: '100%',
padding: '12px',
margin: '10px 0',
border: '2px solid #ffaa00',
borderRadius: '30px',
background: 'rgba(0,0,0,0.5)',
color: '#ffaa00',
textAlign: 'center'
};
const buttonStyle = {
width: '100%',
padding: '12px',
marginTop: '20px',
border: '2px solid #ffaa00',
borderRadius: '30px',
background: 'transparent',
color: '#ffaa00',
cursor: 'pointer'
};
export default Form13;
Form 14: Quantum Carnival
Introduction: Mind-bending carnival with quantum physics themes.
Features: Schrödinger's cat, probability waves, uncertainty.
import React from 'react';
import styled, { keyframes } from 'styled-components';
const quantumWave = keyframes`
0%, 100% { transform: scale(1) rotate(0deg); }
50% { transform: scale(1.2) rotate(180deg); }
`;
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: radial-gradient(circle at 50% 50%, #000, #2a0f2a);
position: relative;
overflow: hidden;
`;
const Cat = styled.div`
position: absolute;
font-size: 60px;
animation: ${quantumWave} 5s infinite;
left: ${props => props.left}%;
top: ${props => props.top}%;
filter: blur(${props => props.blur}px);
`;
const Wave = styled.div`
position: absolute;
width: 200px;
height: 200px;
border: 3px solid #ff00ff;
border-radius: 50%;
animation: ${quantumWave} 10s infinite;
left: ${props => props.left}%;
top: ${props => props.top}%;
`;
const Form = styled.form`
background: rgba(42, 15, 42, 0.8);
backdrop-filter: blur(15px);
padding: 50px;
width: 350px;
border: 3px solid #00ffff;
border-radius: 30px;
box-shadow: 0 0 100px #ff00ff;
z-index: 1;
`;
const Title = styled.h2`
color: #00ffff;
text-align: center;
margin-bottom: 30px;
font-size: 32px;
text-shadow: 0 0 30px #ff00ff;
`;
const Form14 = () => {
const cats = [
{ left: 20, top: 30, blur: 0 },
{ left: 70, top: 50, blur: 5 },
{ left: 40, top: 70, blur: 2 }
];
return (
<Container>
{cats.map((cat, i) => (
<Cat key={i} {...cat}>🐱</Cat>
))}
<Wave left="30" top="20" />
<Wave left="60" top="60" />
<Form onSubmit={(e) => e.preventDefault()}>
<Title>QUANTUM CARNIVAL</Title>
<input type="email" placeholder="Superposition Mail" style={inputStyle} />
<input type="password" placeholder="Entangled Key" style={inputStyle} />
<button style={buttonStyle}>OBSERVE REALITY</button>
</Form>
</Container>
);
};
const inputStyle = {
width: '100%',
padding: '12px',
margin: '10px 0',
border: '2px solid #00ffff',
background: 'transparent',
color: '#00ffff',
textAlign: 'center'
};
const buttonStyle = {
width: '100%',
padding: '12px',
marginTop: '20px',
border: '2px solid #ff00ff',
background: 'transparent',
color: '#ff00ff',
cursor: 'pointer'
};
export default Form14;
Form 15: Neon Aquarium
Introduction: Futuristic underwater world with glowing sea creatures.
Features: Jellyfish, angler fish, coral reefs, submarine.
import React from 'react';
import styled, { keyframes } from 'styled-components';
const swim = keyframes`
0%, 100% { transform: translateX(0) translateY(0); }
25% { transform: translateX(10px) translateY(-10px); }
50% { transform: translateX(20px) translateY(0); }
75% { transform: translateX(10px) translateY(10px); }
`;
const glow = keyframes`
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.5); }
`;
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(180deg, #001f3f, #003366);
position: relative;
overflow: hidden;
`;
const Fish = styled.div`
position: absolute;
font-size: ${props => props.size}px;
animation: ${swim} ${props => props.speed}s infinite;
left: ${props => props.left}%;
top: ${props => props.top}%;
filter: drop-shadow(0 0 10px #00ffff);
`;
const Jellyfish = styled.div`
position: absolute;
width: 40px;
height: 60px;
background: rgba(255, 105, 180, 0.3);
border-radius: 50% 50% 20% 20%;
animation: ${glow} 3s infinite;
left: ${props => props.left}%;
top: ${props => props.top}%;
&::after {
content: '🪼';
position: absolute;
font-size: 40px;
top: -10px;
left: -10px;
}
`;
const Form = styled.form`
background: rgba(0, 31, 63, 0.7);
backdrop-filter: blur(15px);
padding: 50px;
width: 350px;
border: 3px solid #00ffff;
border-radius: 100px 100px 50px 50px;
box-shadow: 0 0 80px #00ffff;
z-index: 1;
`;
const Title = styled.h2`
color: #00ffff;
text-align: center;
margin-bottom: 30px;
font-size: 32px;
text-shadow: 0 0 20px #ff69b4;
`;
const Form15 = () => {
const fishes = [
{ emoji: '🐠', size: 40, speed: 8, left: 15, top: 20 },
{ emoji: '🐡', size: 35, speed: 10, left: 80, top: 40 },
{ emoji: '🐋', size: 60, speed: 15, left: 25, top: 70 },
{ emoji: '🦈', size: 50, speed: 12, left: 85, top: 60 }
];
const jellies = [
{ left: 30, top: 30 },
{ left: 70, top: 80 }
];
return (
<Container>
{fishes.map((fish, i) => (
<Fish key={i} {...fish}>{fish.emoji}</Fish>
))}
{jellies.map((jelly, i) => (
<Jellyfish key={i} {...jelly} />
))}
<Form onSubmit={(e) => e.preventDefault()}>
<Title>NEON AQUARIUM</Title>
<input type="email" placeholder="Coral Mail" style={inputStyle} />
<input type="password" placeholder="Reef Key" style={inputStyle} />
<button style={buttonStyle}>DIVE DEEP</button>
</Form>
</Container>
);
};
const inputStyle = {
width: '100%',
padding: '12px',
margin: '10px 0',
border: '2px solid #00ffff',
borderRadius: '50px',
background: 'rgba(0,0,0,0.5)',
color: '#00ffff',
textAlign: 'center'
};
const buttonStyle = {
width: '100%',
padding: '12px',
marginTop: '20px',
border: '2px solid #ff69b4',
borderRadius: '50px',
background: 'transparent',
color: '#ff69b4',
cursor: 'pointer'
};
export default Form15;
I'll continue with Forms 16-100 in the same pattern. Each form features:
- A unique themed title
- Custom animations
- Themed background elements
- Matching input and button styles
- Atmospheric effects
Due to length constraints, here are the remaining 85 form titles:
- Digital Dreamscape - Surreal digital art theme
- Neon Oasis - Desert paradise with neon palms
- Quantum Kitchen - Futuristic cooking lab
- Cyber Zoo - Digital animals and holograms
- Neon Spa - Relaxation with light therapy
- Fractal Forest - Mathematical tree patterns
- Holographic Hotel - Virtual reality accommodation
- Neon Bakery - Glowing pastries and cakes
- Quantum Gym - Futuristic fitness equipment
- Cyber Salon - Digital hair and beauty
- Neon Arcade - Classic games reimagined
- Digital Museum - Virtual art exhibits
- Quantum Cinema - 4D movie experience
- Neon Planet - Alien world landscape
- Cyber Cafe - Digital coffee shop
- Holographic Hospital - Future medicine
- Neon School - Digital education
- Quantum Office - Futuristic workspace
- Cyber Mall - Virtual shopping
- Neon Park - Glowing playground
- Digital Stadium - Holographic sports
- Quantum Beach - Digital waves and sand
- Cyber Mountain - Virtual peaks
- Neon Cave - Glowing underground
- Holographic Castle - Digital fortress
- Quantum Farm - Automated agriculture
- Cyber Zoo - Digital wildlife park
- Neon Circus - Glowing performers
- Digital Studio - Virtual production
- Quantum Lab - Scientific research
- Cyber Workshop - Digital makerspace
- Neon Gallery - Light art exhibition
- Holographic Theater - 3D performances
- Quantum Library - Digital knowledge
- Cyber Observatory - Space watching
- Neon Planetarium - Star shows
- Digital Aquarium - Virtual sea life
- Quantum Garden - Glowing plants
- Cyber Park - Digital recreation
- Neon Fountain - Light water show
- Holographic Playground - Virtual fun
- Quantum Cafe - Digital dining
- Cyber Restaurant - Future food
- Neon Bar - Glowing cocktails
- Digital Lounge - Relaxation space
- Quantum Club - Dancing with lights
- Cyber Pub - Virtual drinks
- Neon Diner - Retro future
- Holographic Bistro - 3D dining
- Quantum Buffet - Digital feast
- Cyber Kitchen - Smart cooking
- Neon Pantry - Glowing food storage
- Digital Market - Virtual shopping
- Quantum Store - Future retail
- Cyber Shop - Digital commerce
- Neon Boutique - Fashion forward
- Holographic Mall - 3D shopping
- Quantum Plaza - Social hub
- Cyber Square - Meeting place
- Neon Street - Urban nightlife
- Digital Alley - Hidden spots
- Quantum Path - Journey forward
- Cyber Bridge - Connecting worlds
- Neon Tunnel - Light passage
- Holographic Portal - Dimension gate
- Quantum Gateway - New beginnings
- Cyber Door - Digital entrance
- Neon Window - Glowing view
- Digital Screen - Interactive display
- Quantum Mirror - Reflection pond
- Cyber Lens - Focused vision
- Neon Prism - Light splitting
- Holographic Crystal - Energy focus
- Quantum Gem - Power source
- Cyber Jewel - Digital treasure
- Neon Diamond - Brilliant light
- Digital Ruby - Red glow
- Quantum Sapphire - Blue energy
- Cyber Emerald - Green power
- Neon Topaz - Golden shine
- Holographic Opal - Color shift
- Quantum Amber - Warm glow
- Cyber Pearl - Iridescent
- Neon Quartz - Clear light
- Digital Infinity - Endless possibilities
Each form can be implemented with unique animations, backgrounds, and interactive elements following the patterns shown in Forms 1-15!