AltoCode
Allo scroll
HTML
<section style="height: 100vh;"></section>
<!-- spirale potente -->
<section class="hero">
<svg class="signature-shape animation-scroll" viewBox="0 0 360 360" aria-hidden="true"><path pathLength="1" d=" M 306 178 C 306 104, 252 54, 180 54 C 104 54, 52 108, 52 181 C 52 257, 108 307, 181 307 C 248 307, 294 263, 294 199 C 294 137, 250 94, 190 94 C 132 94, 92 134, 92 188 C 92 239, 129 274, 178 274 C 224 274, 256 244, 256 201 C 256 160, 228 132, 190 132 C 154 132, 130 156, 130 190 C 130 220, 151 241, 180 241 C 206 241, 224 224, 224 199 C 224 177, 209 162, 188 162 C 169 162, 157 175, 157 193 C 157 209, 168 220, 183 220 " /></svg>
</section>
<!-- spirale leggera -->
<section class="hero">
<svg class="signature-shape animation-scroll" viewBox="0 0 360 360" aria-hidden="true"><path pathLength="1" d=" M 300 180 C 300 100, 235 50, 160 60 C 85 70, 45 135, 65 205 C 85 275, 160 310, 225 280 C 285 252, 300 185, 270 140 C 240 95, 175 95, 145 135 C 115 175, 135 225, 180 235 C 220 245, 250 215, 240 180 C 232 150, 200 140, 178 155 " /></svg>
</section>
<!-- infinito -->
<section class="hero">
<svg class="signature-shape animation-scroll" viewBox="0 0 360 360" aria-hidden="true"><path pathLength="1" d=" M 180 180 C 132 104, 72 94, 50 142 C 27 193, 72 252, 127 235 C 165 223, 184 179, 206 143 C 235 96, 292 99, 311 145 C 331 194, 294 247, 244 239 C 205 233, 185 198, 160 158 C 133 115, 89 112, 70 148 C 52 182, 75 219, 109 218 C 143 217, 164 184, 180 180 " /></svg>
</section>
<!-- fulmine -->
<section class="hero">
<svg class="signature-shape animation-scroll" viewBox="0 0 360 360" aria-hidden="true"><path pathLength="1" d=" M 214 42 C 224 38, 234 46, 230 58 L 202 138 Q 198 150, 212 150 L 278 148 C 292 148, 298 162, 288 172 L 164 310 C 154 322, 136 312, 142 298 L 176 214 Q 182 198, 164 200 L 88 204 C 74 204, 68 188, 78 178 L 204 48 Q 208 44, 214 42 Z M 76 96 Q 98 72, 122 58 M 264 246 Q 286 226, 302 202 " /></svg>
</section>
<!-- quadrato -->
<section class="hero">
<svg class="signature-shape animation-scroll" viewBox="0 0 360 360" aria-hidden="true"><path pathLength="1" d=" M 100 100 C 120 80, 160 80, 180 100 L 220 140 C 240 160, 240 200, 220 220 L 180 260 C 160 280, 120 280, 100 260 L 60 220 C 40 200, 40 160, 60 140 Z " /></svg>
</section>
<!-- megafono multi linea con js diverso -->
<section class="hero">
<svg class="megaphone-svg" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" ><title>Megafono</title><path d="M126,192H56a8,8,0,0,0-8,8V312a8,8,0,0,0,8,8h69.65a15.93,15.93,0,0,1,10.14,3.54l91.47,74.89A8,8,0,0,0,240,392V120a8,8,0,0,0-12.74-6.43l-91.47,74.89A15,15,0,0,1,126,192Z" /><path d="M320,320c9.74-19.38,16-40.84,16-64,0-23.48-6-44.42-16-64" /><path d="M368,368c19.48-33.92,32-64.06,32-112s-12-77.74-32-112" /><path d="M416,416c30-46,48-91.43,48-160S446,143,416,96" /></svg>
</section>
<!-- fiore -->
<section class="hero">
<svg class="signature-shape animation-scroll" viewBox="0 0 360 360" aria-hidden="true"> <path pathLength="1" d=" M 180 72 C 201 45, 240 55, 244 91 C 276 72, 307 94, 295 127 C 330 133, 339 171, 310 191 C 337 216, 321 253, 286 252 C 294 289, 259 311, 229 290 C 214 324, 174 327, 158 294 C 129 320, 91 300, 99 263 C 63 267, 42 233, 67 206 C 36 188, 41 149, 76 140 C 59 107, 88 78, 121 94 C 126 58, 164 45, 180 72 Z " /> </svg>
</section>
<!-- nuovola -->
<section class="hero">
<svg class="signature-shape animation-scroll" viewBox="0 0 360 360" aria-hidden="true"> <path pathLength="1" d=" M 88 231 C 52 226, 38 190, 59 164 C 45 127, 77 97, 112 108 C 127 69, 181 57, 210 91 C 240 70, 283 88, 286 126 C 322 129, 337 168, 313 193 C 326 225, 300 256, 266 251 C 242 279, 201 286, 174 263 C 145 285, 102 271, 88 231 Z " /> </svg>
</section>
<!-- sole ondulato -->
<section class="hero">
<svg class="signature-shape animation-scroll" viewBox="0 0 360 360" aria-hidden="true"> <path pathLength="1" d=" M 180 45 C 196 69, 211 76, 235 57 C 237 86, 247 98, 277 90 C 267 117, 272 132, 303 136 C 282 157, 281 173, 309 190 C 282 201, 275 216, 293 240 C 263 238, 252 249, 257 279 C 231 265, 215 270, 209 301 C 190 278, 174 276, 155 301 C 150 270, 134 264, 108 279 C 113 249, 101 238, 71 240 C 89 216, 82 201, 54 190 C 82 173, 81 157, 58 136 C 89 132, 94 117, 83 90 C 113 98, 124 86, 126 57 C 150 76, 165 69, 180 45 Z " /> </svg>
</section>
<!-- stella -->
<section class="hero">
<svg class="signature-shape animation-scroll" viewBox="0 0 360 360" aria-hidden="true"> <path pathLength="1" d=" M 180 58 C 194 58, 207 94, 218 117 C 242 109, 279 96, 287 109 C 295 122, 267 149, 248 168 C 269 185, 299 211, 291 225 C 283 239, 244 228, 218 220 C 208 246, 195 284, 180 284 C 165 284, 152 246, 142 220 C 116 228, 77 239, 69 225 C 61 211, 91 185, 112 168 C 93 149, 65 122, 73 109 C 81 96, 118 109, 142 117 C 153 94, 166 58, 180 58 Z " /> </svg>
</section>
<!-- cuore -->
<section class="hero">
<svg class="signature-shape animation-scroll" viewBox="0 0 360 360" aria-hidden="true"> <path pathLength="1" d=" M 180 292 C 159 271, 78 219, 64 158 C 54 114, 84 77, 126 79 C 151 80, 170 95, 181 117 C 197 91, 218 78, 244 82 C 286 88, 309 129, 296 169 C 278 224, 204 275, 180 292 Z " /> </svg>
</section>
<!-- macchia organica -->
<section class="hero">
<svg class="signature-shape animation-scroll" viewBox="0 0 360 360" aria-hidden="true"> <path pathLength="1" d=" M 180 61 C 223 54, 248 81, 258 111 C 294 113, 316 142, 305 176 C 328 207, 307 243, 275 251 C 267 289, 226 306, 196 284 C 169 313, 125 301, 115 265 C 76 268, 48 237, 60 202 C 32 176, 49 135, 82 124 C 79 88, 115 65, 145 79 C 155 68, 166 63, 180 61 Z " /> </svg>
</section>
<!-- elle corsivo -->
<section class="hero">
<svg class="signature-shape elle animation-scroll" viewBox="0 0 360 360" aria-hidden="true"> <path pathLength="1" d=" M 83 278 C 116 255, 139 221, 150 177 C 162 128, 158 79, 137 67 C 119 57, 105 77, 111 101 C 119 132, 150 159, 185 172 C 217 184, 249 177, 276 157" /> </svg>
</section>
<!-- elle corsivo più corta -->
<section class="hero">
<svg class="signature-shape animation-scroll" viewBox="0 0 360 360" aria-hidden="true"> <path pathLength="1" d=" M 82 273 C 112 268, 139 247, 154 218 C 172 183, 184 124, 176 84 C 170 54, 143 55, 134 82 C 123 116, 144 157, 180 171 C 211 183, 248 171, 274 145" /> </svg>
</section>
<!-- onda orizzontale -->
<section class="hero">
<svg class="signature-shape animation-scroll" viewBox="0 0 360 360" aria-hidden="true"> <path pathLength="1" d=" M 48 185 C 86 151, 120 151, 154 181 C 188 211, 222 214, 255 187 C 281 166, 300 163, 316 171 " /> </svg>
</section>
<!-- onda verticale -->
<section class="hero">
<svg class="signature-shape animation-scroll" viewBox="0 0 360 360" aria-hidden="true"> <path pathLength="1" d=" M 181 315 C 149 279, 146 240, 176 207 C 202 178, 204 145, 183 116 C 167 94, 167 72, 182 48 " /> </svg>
</section>
<!-- esse -->
<section class="hero">
<svg class="signature-shape animation-scroll" viewBox="0 0 360 360" aria-hidden="true"> <path pathLength="1" d=" M 252 53 C 203 45, 153 68, 139 107 C 125 146, 157 169, 199 181 C 241 193, 267 217, 255 254 C 243 289, 197 313, 116 300 " /> </svg>
</section>
<!-- frase con animazione -->
<section style="height: 100vh;width:100vw;background-color:#f0f0f0;padding:0;margin:0;display:flex;align-items:center;justify-content:center">
<h2 class="brush-title">
Un sito che lascia
<span class="brush-word animation-scroll">
il segno
<svg class="brush-stroke" viewBox="0 0 300 60" preserveAspectRatio="none" aria-hidden="true">
<path d="M10 35 C70 10, 150 55, 290 25" pathLength="1"/>
</svg>
</span>
</h2>
</section>
<!-- frase con sottolineatura riccia -->
<section class="curly-brush-section">
<h2 class="curly-title">
Testi che fanno
<span class="curly-word animation-scroll">
girare la testa
<svg class="curly-stroke" viewBox="0 0 430 90" preserveAspectRatio="none" aria-hidden="true">
<path pathLength="1" d="M12 54 C52 22, 86 24, 93 48 C101 78, 56 82, 56 51 C56 19, 111 28, 153 49 C198 72, 238 72, 246 49 C257 18, 207 15, 212 49 C218 91, 315 71, 413 38"/>
</svg>
</span>
</h2>
</section>
<!-- frase con sottolineatura ondeggiante -->
<section class="wave-brush-section">
<h2 class="wave-title">
Parole che prendono
<span class="wave-word animation-scroll">
il ritmo
<svg class="wave-stroke" viewBox="0 0 340 80" preserveAspectRatio="none" aria-hidden="true">
<path pathLength="1" d="M10 44 C36 18, 66 18, 92 44 S148 70, 174 44 S230 18, 256 44 S310 70, 330 42"/>
</svg>
</span>
</h2>
</section>
<!-- frase con sottolineatura onda morbida -->
<section class="soft-wave-section">
<h2 class="soft-wave-title">
Idee che seguono
<span class="soft-wave-word animation-scroll">
la corrente
<svg class="soft-wave-stroke" viewBox="0 0 390 85" preserveAspectRatio="none" aria-hidden="true">
<path pathLength="1" d="M12 50 C54 18, 98 18, 139 50 C180 82, 224 82, 265 50 C306 18, 350 19, 378 48"/>
</svg>
</span>
</h2>
</section>
<!-- frase con sottolineatura onda grande -->
<section class="big-wave-section">
<h2 class="big-wave-title">
Messaggi che lasciano
<span class="big-wave-word animation-scroll">
movimento
<svg class="big-wave-stroke" viewBox="0 0 420 120" preserveAspectRatio="none" aria-hidden="true">
<path pathLength="1" d="M12 78 C48 20, 92 24, 112 72 C132 120, 188 110, 208 62 C231 8, 292 7, 313 61 C334 113, 378 112, 408 54"/>
</svg>
</span>
</h2>
</section>
<!-- frase con sottolineatura allegra -->
<section class="playful-brush-section">
<h2 class="playful-title">
Idee che mettono
<span class="playful-word animation-scroll">
buonumore
<svg class="playful-stroke" viewBox="0 0 420 100" preserveAspectRatio="none" aria-hidden="true">
<path class="playful-line playful-line-main" pathLength="1" d="M14 55 C70 20, 120 88, 178 52 S286 18, 406 52"/>
<path class="playful-line playful-line-second" pathLength="1" d="M24 72 C92 48, 158 92, 220 68 S330 47, 396 67"/>
<path class="playful-spark playful-spark-1" pathLength="1" d="M48 18 L48 34 M40 26 L56 26"/>
<path class="playful-spark playful-spark-2" pathLength="1" d="M355 18 L355 38 M345 28 L365 28"/>
<circle class="playful-dot playful-dot-1" cx="105" cy="19" r="7"/>
<circle class="playful-dot playful-dot-2" cx="310" cy="84" r="6"/>
</svg>
</span>
</h2>
</section>
CSS
/* forma astratta */
.hero{position:relative;height:100vh;overflow:hidden;background:#f4f0e8;width:100vw}
.signature-shape{position:absolute;right:clamp(-70px,2vw,40px);top:50%;width:clamp(180px,25vw,340px);height:auto;transform:translateY(-50%) rotate(8deg);z-index:1;pointer-events:none}
.signature-shape path{fill:none;stroke:#d5523c;stroke-width:18;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset 1.8s cubic-bezier(.65,0,.35,1),opacity .4s ease .1s}
.signature-shape.is-visible path{stroke-dashoffset:0;opacity:1}
/* megafono multi linea con js diverso **************************************/
.megaphone-svg{width:min(500px,90vw);height:auto;overflow:visible;opacity:0;transform:translateY(300px) scale(0.55);transform-origin:center}
.megaphone-svg.is-visible{animation:megaphone-bounce 900ms cubic-bezier(0.34,1.56,0.64,1) forwards}
@keyframes megaphone-bounce {
0%{opacity:0;transform:translateY(300px) scale(0.85)}
55%{opacity:1;transform:translateY(-108px) scale(1.09)}
75%{transform:translateY(80px) scale(0.98)}
90%{transform:translateY(-10px) scale(1.05)}
100%{opacity:1;transform:translateY(0) scale(1)}
}
.megaphone-svg path{fill:none;stroke:#0ad2ff;stroke-width:22px;stroke-linecap:round;stroke-linejoin:round;transition-property:stroke-dashoffset;transition-duration:.8s;transition-timing-function:ease-in-out}
.megaphone-svg path:nth-of-type(1){transition-delay:0s}
.megaphone-svg path:nth-of-type(2){transition-delay:.3s}
.megaphone-svg path:nth-of-type(3){transition-delay:.55s}
.megaphone-svg path:nth-of-type(4){transition-delay:.8s}
/* sottolineatura */
.brush-title{font-family:Arial,sans-serif;font-size:clamp(2rem,6vw,5rem);line-height:1.1}
.brush-word{position:relative;display:inline-block;isolation:isolate}
.brush-word .brush-stroke{position:absolute;z-index:-1;left:-5%;bottom:-10%;width:110%;height:55%;overflow:visible}
.brush-stroke path{fill:none;stroke:#fc0;stroke-width:28;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s cubic-bezier(.65,0,.35,1)}
.brush-word.is-visible .brush-stroke path{stroke-dashoffset:0}
@keyframes draw-brush {
to{stroke-dashoffset:0}
}
@media (prefers-reduced-motion: reduce) {
.brush-stroke path{animation:none;stroke-dashoffset:0}
}
/* sottolineatura riccia */
.curly-brush-section{height:100vh;width:100vw;background:#eaf7ff;padding:0;margin:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.curly-title{margin:0;padding:2rem;font-family:Arial,sans-serif;font-size:clamp(2rem,6vw,5rem);line-height:1.12;color:#18354a;text-align:center}
.curly-word{position:relative;display:inline-block;white-space:nowrap;isolation:isolate}
.curly-stroke{position:absolute;z-index:-1;left:-7%;bottom:-24%;width:114%;height:72%;overflow:visible;pointer-events:none}
.curly-stroke path{fill:none;stroke:#ff7a45;stroke-width:24;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset 1.45s cubic-bezier(.65,0,.35,1),opacity .25s ease}
.curly-word.is-visible .curly-stroke path{stroke-dashoffset:0;opacity:1}
@media (prefers-reduced-motion: reduce) {
.curly-stroke path{transition:none;stroke-dashoffset:0;opacity:1}
}
/* sottolineatura ondeggiante */
.wave-brush-section{height:100vh;width:100vw;background:#f6f2ff;padding:0;margin:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.wave-title{margin:0;padding:2rem;font-family:Arial,sans-serif;font-size:clamp(2rem,6vw,5rem);line-height:1.12;color:#26344d;text-align:center}
.wave-word{position:relative;display:inline-block;white-space:nowrap;isolation:isolate}
.wave-stroke{position:absolute;z-index:-1;left:-8%;bottom:-20%;width:116%;height:64%;overflow:visible;pointer-events:none}
.wave-stroke path{fill:none;stroke:#49c6e5;stroke-width:42;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset 1.35s cubic-bezier(.65,0,.35,1),opacity .25s ease}
.wave-word.is-visible .wave-stroke path{stroke-dashoffset:0;opacity:1}
@media (prefers-reduced-motion: reduce) {
.wave-stroke path{transition:none;stroke-dashoffset:0;opacity:1}
}
/* sottolineatura onda morbida */
.soft-wave-section{height:100vh;width:100vw;background:#eefaf1;padding:0;margin:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.soft-wave-title{margin:0;padding:2rem;font-family:Arial,sans-serif;font-size:clamp(2rem,6vw,5rem);line-height:1.12;color:#243d32;text-align:center}
.soft-wave-word{position:relative;display:inline-block;white-space:nowrap;isolation:isolate}
.soft-wave-stroke{position:absolute;z-index:-1;left:-7%;bottom:-22%;width:114%;height:68%;overflow:visible;pointer-events:none}
.soft-wave-stroke path{fill:none;stroke:#8fd14f;stroke-width:24;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset 1.55s cubic-bezier(.65,0,.35,1),opacity .25s ease}
.soft-wave-word.is-visible .soft-wave-stroke path{stroke-dashoffset:0;opacity:1}
@media (prefers-reduced-motion: reduce) {
.soft-wave-stroke path{transition:none;stroke-dashoffset:0;opacity:1}
}
/* sottolineatura onda grande */
.big-wave-section{height:100vh;width:100vw;background:#fff0ef;padding:0;margin:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.big-wave-title{margin:0;padding:2rem;font-family:Arial,sans-serif;font-size:clamp(2rem,6vw,5rem);line-height:1.12;color:#3f2730;text-align:center}
.big-wave-word{position:relative;display:inline-block;white-space:nowrap;isolation:isolate}
.big-wave-stroke{position:absolute;z-index:-1;left:-9%;bottom:-36%;width:118%;height:92%;overflow:visible;pointer-events:none}
.big-wave-stroke path{fill:none;stroke:#ff4f6d;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset 1.7s cubic-bezier(.65,0,.35,1),opacity .25s ease}
.big-wave-word.is-visible .big-wave-stroke path{stroke-dashoffset:0;opacity:1}
@media (prefers-reduced-motion: reduce) {
.big-wave-stroke path{transition:none;stroke-dashoffset:0;opacity:1}
}
/* sottolineatura allegra */
.playful-brush-section{min-height:100vh;width:100vw;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff7d6}
.playful-title{margin:0;padding:2rem;font-family:Arial,sans-serif;font-size:clamp(2.2rem,6vw,5.5rem);line-height:1.08;color:#332b52;text-align:center}
.playful-word{position:relative;display:inline-block;white-space:nowrap}
.playful-stroke{position:absolute;left:-8%;bottom:-44%;width:116%;height:78%;overflow:visible;pointer-events:none}
.playful-line,.playful-spark{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.playful-line-main{stroke:#ff5d8f;stroke-width:16;transition:stroke-dashoffset 1.15s cubic-bezier(.65,0,.35,1),opacity .25s ease}
.playful-line-second{stroke:#ffbd00;stroke-width:9;transition:stroke-dashoffset .95s cubic-bezier(.65,0,.35,1) .25s,opacity .25s ease .25s}
.playful-spark{stroke:#00b8a9;stroke-width:7;transition:stroke-dashoffset .45s ease .9s,opacity .2s ease .9s}
.playful-dot{fill:#7656e8;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(0);transition:opacity .2s ease 1s,transform .45s cubic-bezier(.34,1.56,.64,1) 1s}
.playful-word.is-visible .playful-line,.playful-word.is-visible .playful-spark{stroke-dashoffset:0;opacity:1}
.playful-word.is-visible .playful-dot{opacity:1;transform:scale(1)}
.playful-word.is-visible .playful-spark-1{transition-delay:.85s}
.playful-word.is-visible .playful-spark-2{transition-delay:1.05s}
.playful-word.is-visible .playful-dot-2{transition-delay:1.18s}
@media (prefers-reduced-motion: reduce) {
.playful-line,.playful-spark{transition:none;stroke-dashoffset:0;opacity:1}
.playful-dot{transition:none;opacity:1;transform:scale(1)}
}
JAVASCRIPT
// SVG ANIMAZIONE 1 LINEA
const animatedElements = document.querySelectorAll(".animation-scroll");
const observer = new IntersectionObserver(
(entries, currentObserver) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) return;
entry.target.classList.add("is-visible");
currentObserver.unobserve(entry.target);
});
},
{
threshold: 0.5
}
);
animatedElements.forEach((element) => {
observer.observe(element);
});
// SOTTOLINEATURA ALLEGRA PLAYFUL WORD
const playfulWords = document.querySelectorAll(".playful-word");
playfulWords.forEach((word) => {
const strokes = word.querySelectorAll(".playful-line, .playful-spark");
strokes.forEach((stroke) => {
const length = stroke.getTotalLength();
stroke.style.strokeDasharray = String(length);
stroke.style.strokeDashoffset = String(length);
});
});
if (playfulWords.length) {
const playfulObserver = new IntersectionObserver(
(entries, currentObserver) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) return;
const word = entry.target;
const strokes = word.querySelectorAll(".playful-line, .playful-spark");
word.classList.add("is-visible");
strokes.forEach((stroke) => {
stroke.style.strokeDashoffset = "0";
});
currentObserver.unobserve(word);
});
},
{
threshold: 0.5,
}
);
playfulWords.forEach((word) => {
playfulObserver.observe(word);
});
}
// SVG ANIMAZIONE MULTI LINEA
const megaphone = document.querySelector(".megaphone-svg");
if (megaphone) {
const paths = megaphone.querySelectorAll("path");
paths.forEach((path) => {
const length = path.getTotalLength();
path.style.strokeDasharray = String(length);
path.style.strokeDashoffset = String(length);
});
const observer = new IntersectionObserver(
(entries, currentObserver) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) return;
megaphone.classList.add("is-visible");
paths.forEach((path) => {
path.style.strokeDashoffset = "0";
});
currentObserver.unobserve(entry.target);
});
},
{
threshold: 0.3,
}
);
observer.observe(megaphone);
}