Add animated gradient background with floating particles
Implement dynamic background that fills entire viewport:
- Animated gradient that smoothly shifts colors every 15s
- Floating radial gradients (particles) that animate independently
- Multiple animation layers with different timings (20s, 25s)
- Content properly layered above background (z-index handling)
- Smooth, continuous animations that don't loop jarringly
Changes:
- App.vue: Full-screen animated background with pseudo-elements
- CollaborativeInput.vue: Same animated effect
- CollaborativeSession.vue: Full viewport background
- All components now use 100% available space
- Subtle visual interest without distracting from content
Result: Modern, premium feel with movement depth
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
610d4bb686
commit
d52c0aef92
@ -54,20 +54,132 @@ function startNewCollaboration() {
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
background-color: #f5f7fa;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
#app {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
@keyframes gradient-shift {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float1 {
|
||||
0%, 100% {
|
||||
transform: translate(0, 0) rotate(0deg);
|
||||
opacity: 0.03;
|
||||
}
|
||||
25% {
|
||||
transform: translate(100px, -100px) rotate(90deg);
|
||||
opacity: 0.05;
|
||||
}
|
||||
50% {
|
||||
transform: translate(-50px, 150px) rotate(180deg);
|
||||
opacity: 0.03;
|
||||
}
|
||||
75% {
|
||||
transform: translate(-100px, -50px) rotate(270deg);
|
||||
opacity: 0.04;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float2 {
|
||||
0%, 100% {
|
||||
transform: translate(0, 0) rotate(0deg);
|
||||
opacity: 0.04;
|
||||
}
|
||||
25% {
|
||||
transform: translate(-120px, 80px) rotate(-90deg);
|
||||
opacity: 0.06;
|
||||
}
|
||||
50% {
|
||||
transform: translate(80px, -120px) rotate(-180deg);
|
||||
opacity: 0.04;
|
||||
}
|
||||
75% {
|
||||
transform: translate(120px, 100px) rotate(-270deg);
|
||||
opacity: 0.05;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float3 {
|
||||
0%, 100% {
|
||||
transform: translate(0, 0) rotate(0deg);
|
||||
opacity: 0.03;
|
||||
}
|
||||
25% {
|
||||
transform: translate(-80px, -80px) rotate(45deg);
|
||||
opacity: 0.05;
|
||||
}
|
||||
50% {
|
||||
transform: translate(100px, 100px) rotate(135deg);
|
||||
opacity: 0.03;
|
||||
}
|
||||
75% {
|
||||
transform: translate(-100px, 80px) rotate(225deg);
|
||||
opacity: 0.04;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.app {
|
||||
min-height: 100vh;
|
||||
padding: 2rem;
|
||||
background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
|
||||
background: linear-gradient(
|
||||
-45deg,
|
||||
#0f0c29 0%,
|
||||
#302b63 25%,
|
||||
#24243e 50%,
|
||||
#302b63 75%,
|
||||
#0f0c29 100%
|
||||
);
|
||||
background-size: 400% 400%;
|
||||
animation: gradient-shift 15s ease infinite;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 80%, rgba(118, 75, 162, 0.08) 0%, transparent 50%);
|
||||
animation: float1 20s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.app::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: radial-gradient(circle, rgba(102, 126, 234, 0.12) 0%, transparent 70%);
|
||||
animation: float2 25s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.app > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.new-session-btn {
|
||||
|
||||
@ -192,7 +192,16 @@ const removeFile = () => {
|
||||
.collaborative-input {
|
||||
min-height: 100vh;
|
||||
padding: 2rem;
|
||||
background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
|
||||
background: linear-gradient(
|
||||
-45deg,
|
||||
#0f0c29 0%,
|
||||
#302b63 25%,
|
||||
#24243e 50%,
|
||||
#302b63 75%,
|
||||
#0f0c29 100%
|
||||
);
|
||||
background-size: 400% 400%;
|
||||
animation: gradient-shift 15s ease infinite;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -200,20 +209,53 @@ const removeFile = () => {
|
||||
.collaborative-input::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: -50%;
|
||||
right: -50%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
|
||||
background: radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 80%, rgba(118, 75, 162, 0.08) 0%, transparent 50%);
|
||||
animation: float1 20s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@keyframes gradient-shift {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float1 {
|
||||
0%, 100% {
|
||||
transform: translate(0, 0) rotate(0deg);
|
||||
opacity: 0.03;
|
||||
}
|
||||
25% {
|
||||
transform: translate(100px, -100px) rotate(90deg);
|
||||
opacity: 0.05;
|
||||
}
|
||||
50% {
|
||||
transform: translate(-50px, 150px) rotate(180deg);
|
||||
opacity: 0.03;
|
||||
}
|
||||
75% {
|
||||
transform: translate(-100px, -50px) rotate(270deg);
|
||||
opacity: 0.04;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.header {
|
||||
|
||||
@ -229,10 +229,73 @@ function formatAgentName(agent) {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@keyframes gradient-shift {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float1 {
|
||||
0%, 100% {
|
||||
transform: translate(0, 0) rotate(0deg);
|
||||
opacity: 0.03;
|
||||
}
|
||||
25% {
|
||||
transform: translate(100px, -100px) rotate(90deg);
|
||||
opacity: 0.05;
|
||||
}
|
||||
50% {
|
||||
transform: translate(-50px, 150px) rotate(180deg);
|
||||
opacity: 0.03;
|
||||
}
|
||||
75% {
|
||||
transform: translate(-100px, -50px) rotate(270deg);
|
||||
opacity: 0.04;
|
||||
}
|
||||
}
|
||||
|
||||
.collaborative-session {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
padding: 2rem;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(
|
||||
-45deg,
|
||||
#0f0c29 0%,
|
||||
#302b63 25%,
|
||||
#24243e 50%,
|
||||
#302b63 75%,
|
||||
#0f0c29 100%
|
||||
);
|
||||
background-size: 400% 400%;
|
||||
animation: gradient-shift 15s ease infinite;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.collaborative-session::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 80%, rgba(118, 75, 162, 0.08) 0%, transparent 50%);
|
||||
animation: float1 20s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.collaborative-session > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.session-header {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user