google-site-verification: google61fe8ba583a51912.html
MACRO NEPAL
100 Unique Themed Login & Signup Forms
awiskar acharya
March 9, 2026
2:14 pm

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:

  1. Digital Dreamscape - Surreal digital art theme
  2. Neon Oasis - Desert paradise with neon palms
  3. Quantum Kitchen - Futuristic cooking lab
  4. Cyber Zoo - Digital animals and holograms
  5. Neon Spa - Relaxation with light therapy
  6. Fractal Forest - Mathematical tree patterns
  7. Holographic Hotel - Virtual reality accommodation
  8. Neon Bakery - Glowing pastries and cakes
  9. Quantum Gym - Futuristic fitness equipment
  10. Cyber Salon - Digital hair and beauty
  11. Neon Arcade - Classic games reimagined
  12. Digital Museum - Virtual art exhibits
  13. Quantum Cinema - 4D movie experience
  14. Neon Planet - Alien world landscape
  15. Cyber Cafe - Digital coffee shop
  16. Holographic Hospital - Future medicine
  17. Neon School - Digital education
  18. Quantum Office - Futuristic workspace
  19. Cyber Mall - Virtual shopping
  20. Neon Park - Glowing playground
  21. Digital Stadium - Holographic sports
  22. Quantum Beach - Digital waves and sand
  23. Cyber Mountain - Virtual peaks
  24. Neon Cave - Glowing underground
  25. Holographic Castle - Digital fortress
  26. Quantum Farm - Automated agriculture
  27. Cyber Zoo - Digital wildlife park
  28. Neon Circus - Glowing performers
  29. Digital Studio - Virtual production
  30. Quantum Lab - Scientific research
  31. Cyber Workshop - Digital makerspace
  32. Neon Gallery - Light art exhibition
  33. Holographic Theater - 3D performances
  34. Quantum Library - Digital knowledge
  35. Cyber Observatory - Space watching
  36. Neon Planetarium - Star shows
  37. Digital Aquarium - Virtual sea life
  38. Quantum Garden - Glowing plants
  39. Cyber Park - Digital recreation
  40. Neon Fountain - Light water show
  41. Holographic Playground - Virtual fun
  42. Quantum Cafe - Digital dining
  43. Cyber Restaurant - Future food
  44. Neon Bar - Glowing cocktails
  45. Digital Lounge - Relaxation space
  46. Quantum Club - Dancing with lights
  47. Cyber Pub - Virtual drinks
  48. Neon Diner - Retro future
  49. Holographic Bistro - 3D dining
  50. Quantum Buffet - Digital feast
  51. Cyber Kitchen - Smart cooking
  52. Neon Pantry - Glowing food storage
  53. Digital Market - Virtual shopping
  54. Quantum Store - Future retail
  55. Cyber Shop - Digital commerce
  56. Neon Boutique - Fashion forward
  57. Holographic Mall - 3D shopping
  58. Quantum Plaza - Social hub
  59. Cyber Square - Meeting place
  60. Neon Street - Urban nightlife
  61. Digital Alley - Hidden spots
  62. Quantum Path - Journey forward
  63. Cyber Bridge - Connecting worlds
  64. Neon Tunnel - Light passage
  65. Holographic Portal - Dimension gate
  66. Quantum Gateway - New beginnings
  67. Cyber Door - Digital entrance
  68. Neon Window - Glowing view
  69. Digital Screen - Interactive display
  70. Quantum Mirror - Reflection pond
  71. Cyber Lens - Focused vision
  72. Neon Prism - Light splitting
  73. Holographic Crystal - Energy focus
  74. Quantum Gem - Power source
  75. Cyber Jewel - Digital treasure
  76. Neon Diamond - Brilliant light
  77. Digital Ruby - Red glow
  78. Quantum Sapphire - Blue energy
  79. Cyber Emerald - Green power
  80. Neon Topaz - Golden shine
  81. Holographic Opal - Color shift
  82. Quantum Amber - Warm glow
  83. Cyber Pearl - Iridescent
  84. Neon Quartz - Clear light
  85. Digital Infinity - Endless possibilities

Each form can be implemented with unique animations, backgrounds, and interactive elements following the patterns shown in Forms 1-15!

Category : SOURCE CODE

Leave a Reply

Your email address will not be published. Required fields are marked *


Macro Nepal Helper