[{"data":1,"prerenderedAt":1167},["ShallowReactive",2],{"component-cyberpunk-city":3,"related-components-cyberpunk-city":381},{"id":4,"title":5,"body":6,"categories":352,"createdAt":354,"description":336,"download_url":355,"extension":356,"featured":357,"features":358,"hasGradient":357,"iframe":364,"image":365,"isFree":366,"lemonsqueezy_variant_id":336,"meta":367,"navigation":366,"path":369,"polar_product_id":336,"previewImage":370,"price":371,"published":366,"robots":355,"seo":372,"slug":373,"stem":374,"tagline":375,"tags":376,"__hash__":380},"components/components/cyberpunk-city.md","Cyberpunk City",{"type":7,"value":8,"toc":335},"minimark",[9,14,18,22,29,35,41,47,53,57,63,69,75,81,92,96,101,106,128,132,135,140,155,160,168,173,211,216,223,227,233,239,245,251,257,263,267,299,303,309,313,316,320,323,326,329],[10,11,13],"h2",{"id":12},"immersive-cyberpunk-experience","Immersive Cyberpunk Experience",[15,16,17],"p",{},"Transform your Framer projects with this stunning WebGL-powered cyberpunk cityscape. Watch as infinite neon-lit buildings fly through space, creating a mesmerizing sci-fi atmosphere perfect for landing pages, hero sections, or background animations.",[10,19,21],{"id":20},"features","Features",[15,23,24,28],{},[25,26,27],"strong",{},"Real-time WebGL Rendering","\nPowered by Three.js and custom shaders for smooth, high-performance 3D animation that runs seamlessly in the browser.",[15,30,31,34],{},[25,32,33],{},"Fully Customizable Colors","\nControl fog color, dual neon colors, and color mixing to match your brand or create unique cyberpunk aesthetics.",[15,36,37,40],{},[25,38,39],{},"Dynamic Building Generation","\nAdjust building scale and height variation to create different cityscape densities and architectural styles.",[15,42,43,46],{},[25,44,45],{},"Performance Optimized","\nEfficient shader-based rendering with automatic pixel ratio management ensures smooth animation across all devices.",[15,48,49,52],{},[25,50,51],{},"Seamless Animation Loop","\nContinuous, smooth animation with no jarring restarts or jumps—perfect for background elements.",[10,54,56],{"id":55},"use-cases","Use Cases",[15,58,59,62],{},[25,60,61],{},"Hero Sections"," — Create an eye-catching animated background for landing pages and hero sections that immediately capture attention.",[15,64,65,68],{},[25,66,67],{},"Tech & Gaming Sites"," — Perfect for technology, gaming, or sci-fi themed websites that need a futuristic aesthetic.",[15,70,71,74],{},[25,72,73],{},"Loading Screens"," — Use as an engaging loading animation or transition element in your web applications.",[15,76,77,80],{},[25,78,79],{},"Event Pages"," — Ideal for virtual events, hackathons, or tech conferences that want a cutting-edge visual presence.",[15,82,83],{},[84,85],"img",{"alt":86,"className":87,"src":91},"Cyberpunk City Preview",[88,89,90],"w-full","mb-6","rounded-[20px]","/framerhub/img/components/control/cyberpunk-city.jpg",[10,93,95],{"id":94},"how-to-use","How to Use",[97,98,100],"h3",{"id":99},"installation","Installation",[15,102,103],{},[25,104,105],{},"VIDEO PLACEHOLDER: Installation Tutorial",[107,108,109,113,116,119,122,125],"ol",{},[110,111,112],"li",{},"Log in to your account at framerhub.io",[110,114,115],{},"Navigate to framerhub.io/dashboard",[110,117,118],{},"Find Cyberpunk City in your Recent Purchases",[110,120,121],{},"Click the \"Copy\" button",[110,123,124],{},"Open your Framer project",[110,126,127],{},"Paste the component anywhere on your canvas (Cmd/Ctrl + V)",[97,129,131],{"id":130},"customization","Customization",[15,133,134],{},"The component provides three main control groups for easy customization:",[15,136,137],{},[25,138,139],{},"Animation",[141,142,143,149],"ul",{},[110,144,145,148],{},[25,146,147],{},"Speed"," — Control the animation speed (0-2x). Lower values create a slow, dreamy flythrough while higher values add energy and dynamism.",[110,150,151,154],{},[25,152,153],{},"Height Variation"," — Adjust how much building heights vary (0-1). Lower values create uniform buildings, higher values create dramatic skyscrapers.",[15,156,157],{},[25,158,159],{},"Buildings",[141,161,162],{},[110,163,164,167],{},[25,165,166],{},"Scale"," — Change the overall size of buildings (0.5-2x). Larger scale creates massive structures, smaller scale creates distant cityscape.",[15,169,170],{},[25,171,172],{},"Colors",[141,174,175,181,187,193,199,205],{},[110,176,177,180],{},[25,178,179],{},"Fog Color"," — Set the background fog/space color. Black creates deep space, while colors create atmospheric effects.",[110,182,183,186],{},[25,184,185],{},"Neon A"," — First neon color (default: hot pink). This is the primary building light color.",[110,188,189,192],{},[25,190,191],{},"Neon B"," — Second neon color (default: cyan). Creates color variety across buildings.",[110,194,195,198],{},[25,196,197],{},"Neon Mix"," — Blend between Neon A and Neon B (0-1). Animate this value for color-shifting effects.",[110,200,201,204],{},[25,202,203],{},"Background"," — Set the background color (supports transparency).",[110,206,207,210],{},[25,208,209],{},"Transparent"," — One-click toggle to make the background completely transparent.",[15,212,213],{},[25,214,215],{},"Quality",[141,217,218],{},[110,219,220,222],{},[25,221,215],{}," — Choose between Auto (recommended), Performance, Balanced, or Quality modes to optimize for your use case and target devices.",[97,224,226],{"id":225},"quick-tips","Quick Tips",[15,228,229,232],{},[25,230,231],{},"Performance"," — The component automatically adjusts pixel ratio for optimal performance. It renders at full quality but caps at 2x pixel ratio.",[15,234,235,238],{},[25,236,237],{},"Canvas vs Preview"," — The component shows a static frame in Framer's canvas mode and animates smoothly in preview/live mode.",[15,240,241,244],{},[25,242,243],{},"Responsive Design"," — Automatically adapts to any container size. Use it as a full-screen background or contained element.",[15,246,247,250],{},[25,248,249],{},"Color Combinations"," — Try classic cyberpunk (pink + cyan), matrix (two greens), or synthwave (purple + orange) color schemes.",[15,252,253,256],{},[25,254,255],{},"Background Transparency"," — Toggle \"Transparent\" to remove the background color, allowing you to layer the city over videos, images, or gradients.",[15,258,259,262],{},[25,260,261],{},"Auto Quality"," — \"Auto\" mode automatically detects device performance to ensure smooth playback on all devices. You can also force \"Performance\" or \"Quality\" modes.",[10,264,266],{"id":265},"technical-details","Technical Details",[141,268,269,275,281,287,293],{},[110,270,271,274],{},[25,272,273],{},"Built with Three.js"," — Industry-standard WebGL library",[110,276,277,280],{},[25,278,279],{},"Custom GLSL Shaders"," — Hand-crafted fragment and vertex shaders for optimal performance",[110,282,283,286],{},[25,284,285],{},"Ray Marching Technique"," — Advanced 3D rendering using signed distance fields",[110,288,289,292],{},[25,290,291],{},"SSR Safe"," — Properly handles server-side rendering for Framer sites",[110,294,295,298],{},[25,296,297],{},"Memory Efficient"," — Proper cleanup prevents memory leaks",[10,300,302],{"id":301},"license","License",[15,304,305,308],{},[25,306,307],{},"Single Use License"," — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.",[10,310,312],{"id":311},"refund-policy","Refund Policy",[15,314,315],{},"Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!",[10,317,319],{"id":318},"why-designers-love-this","Why Designers Love This",[15,321,322],{},"Stop settling for flat, static backgrounds. Cyberpunk City brings professional-grade 3D animation to your Framer projects without writing a single line of code. Whether you're building a tech startup landing page, a gaming portfolio, or a futuristic brand experience, this component delivers instant sci-fi atmosphere that keeps visitors engaged.",[15,324,325],{},"The intuitive controls mean you can customize every aspect—from the neon glow colors to the building density—while the optimized WebGL rendering ensures butter-smooth performance on all devices.",[327,328],"hr",{},[15,330,331,334],{},[25,332,333],{},"Need Help?"," Visit framerhub.io/support for documentation and video tutorials.",{"title":336,"searchDepth":337,"depth":337,"links":338},"",2,[339,340,341,342,348,349,350,351],{"id":12,"depth":337,"text":13},{"id":20,"depth":337,"text":21},{"id":55,"depth":337,"text":56},{"id":94,"depth":337,"text":95,"children":343},[344,346,347],{"id":99,"depth":345,"text":100},3,{"id":130,"depth":345,"text":131},{"id":225,"depth":345,"text":226},{"id":265,"depth":337,"text":266},{"id":301,"depth":337,"text":302},{"id":311,"depth":337,"text":312},{"id":318,"depth":337,"text":319},[139,353],"WebGL","2025-11-28T00:00:00.000Z",null,"md",false,[359,360,361,362,363],"Real-time WebGL shader animation","Customizable neon colors and fog","Adjustable building scale and height variation","Smooth continuous animation loop","Performance optimized","https://popular-site-866248.framer.app/","/framerhub/img/components/cyberpunk-city.jpg",true,{"variants":368},1,"/components/cyberpunk-city","/framerhub/img/components/large/cyberpunk-city.jpg",0,{"title":5,"description":336},"cyberpunk-city","components/cyberpunk-city","Immersive WebGL cyberpunk cityscape with neon-lit buildings flying through space.",[377,353,378,379,139],"3D","Shader","Cyberpunk","r--aPd6dgaHCqWuMe_duyk6IrSU_J4Z7GNj76EQDZJ8",[382,628,883],{"id":383,"title":384,"body":385,"categories":602,"component_copy_url":605,"createdAt":606,"description":336,"download_url":355,"extension":356,"featured":357,"features":607,"hasGradient":357,"iframe":611,"image":612,"isFree":357,"lemonsqueezy_variant_id":336,"meta":613,"navigation":366,"path":614,"polar_product_id":615,"previewImage":616,"price":617,"published":366,"robots":355,"seo":618,"slug":389,"stem":619,"tagline":620,"tags":621,"__hash__":627},"components/components/CMSGalleryPopup.md","CMS Gallery Popup",{"type":7,"value":386,"toc":590},[387,390,393,395,401,407,412,418,424,426,432,438,444,451,453,455,472,474,479,499,504,523,528,548,553,573,575,579,581,583,585,588],[10,388,384],{"id":389},"cms-gallery-popup",[15,391,392],{},"A powerful and flexible image gallery component designed for Framer's CMS. It seamlessly integrates with your CMS data to create stunning lightboxes with thumbnail navigation.",[10,394,21],{"id":20},[15,396,397,400],{},[25,398,399],{},"CMS Integration","\nConnect directly to your CMS collections. Automatically detects images from gallery fields and nested content.",[15,402,403,406],{},[25,404,405],{},"Thumbnail Navigation","\nIntuitive thumbnail strip for easy browsing. Position thumbnails at the bottom, top, left, or right.",[15,408,409,411],{},[25,410,243],{},"\nAdapts perfectly to all screen sizes. Thumbnails automatically reposition on smaller devices for optimal mobile experience.",[15,413,414,417],{},[25,415,416],{},"Customizable Styling","\nFull control over colors, borders, shadows, and spacing. Customize arrows, close buttons, and badges to match your brand.",[15,419,420,423],{},[25,421,422],{},"Keyboard & Touch Support","\nNavigate with arrow keys or swipe gestures on touch devices. Includes escape key support to close the popup.",[10,425,56],{"id":55},[15,427,428,431],{},[25,429,430],{},"Product Galleries"," — Showcase product images in a detailed lightbox with zoom capabilities.",[15,433,434,437],{},[25,435,436],{},"Portfolio Projects"," — Display high-resolution project images with a clean, professional gallery interface.",[15,439,440,443],{},[25,441,442],{},"Real Estate Listings"," — Create immersive photo tours for property listings directly from your CMS.",[15,445,446],{},[84,447],{"alt":448,"className":449,"src":450},"CMS Gallery Popup Preview",[88,89,90],"/framerhub/img/components/control/cms-gallery-popup.jpg",[10,452,95],{"id":94},[97,454,100],{"id":99},[107,456,457,463,466,469],{},[110,458,459,460,462],{},"Find ",[25,461,384],{}," in the Framer Marketplace.",[110,464,465],{},"Click \"Copy\" or \"Add to Project\".",[110,467,468],{},"Paste the component onto your canvas.",[110,470,471],{},"Connect the \"CMS Gallery\" property to your CMS collection's gallery field.",[97,473,131],{"id":130},[15,475,476],{},[25,477,478],{},"Source Options",[141,480,481,487,493],{},[110,482,483,486],{},[25,484,485],{},"CMS",": Pulls images directly from a CMS Gallery field.",[110,488,489,492],{},[25,490,491],{},"Normal",": Manually add images via the property panel.",[110,494,495,498],{},[25,496,497],{},"Override",": Use for advanced scenarios with overrides.",[15,500,501],{},[25,502,503],{},"Popup Settings",[141,505,506,512,517],{},[110,507,508,511],{},[25,509,510],{},"Transition",": Choose from Slide, Fade, Scale, SlideScale, or SlideFade animations.",[110,513,514,516],{},[25,515,147],{},": Adjust animation speed for transitions.",[110,518,519,522],{},[25,520,521],{},"Backdrop",": Customize the overlay color and opacity.",[15,524,525],{},[25,526,527],{},"Thumbnails",[141,529,530,536,542],{},[110,531,532,535],{},[25,533,534],{},"Position",": Place thumbnails relative to the main image.",[110,537,538,541],{},[25,539,540],{},"Styling",": Adjust size, gap, borders, and active/inactive opacity.",[110,543,544,547],{},[25,545,546],{},"Responsiveness",": Set a breakpoint to automatically stack thumbnails on mobile.",[15,549,550],{},[25,551,552],{},"Controls",[141,554,555,561,567],{},[110,556,557,560],{},[25,558,559],{},"Arrows",": Customize icon, size, color, and hover effects.",[110,562,563,566],{},[25,564,565],{},"Close Button",": Style the close button and position it as needed.",[110,568,569,572],{},[25,570,571],{},"Badge",": Show image count (e.g., \"1/5\") with custom styling.",[10,574,302],{"id":301},[15,576,577,308],{},[25,578,307],{},[10,580,312],{"id":311},[15,582,315],{},[10,584,319],{"id":318},[15,586,587],{},"\"The perfect solution for CMS galleries in Framer. It just works, and the customization options are endless!\"",[327,589],{},{"title":336,"searchDepth":337,"depth":337,"links":591},[592,593,594,595,599,600,601],{"id":389,"depth":337,"text":384},{"id":20,"depth":337,"text":21},{"id":55,"depth":337,"text":56},{"id":94,"depth":337,"text":95,"children":596},[597,598],{"id":99,"depth":345,"text":100},{"id":130,"depth":345,"text":131},{"id":301,"depth":337,"text":302},{"id":311,"depth":337,"text":312},{"id":318,"depth":337,"text":319},[603,485,604],"Gallery","Slider","https://framer.com/m/CMSGalleryPopup-vjHtoJ.js","2026-02-10T00:00:00.000Z",[399,405,608,609,610],"Keyboard Support","Touch Gestures","Custom Styling","https://multiple-guidance-948416.framer.app/","/framerhub/img/components/cms-gallery-popup.jpg",{"variants":345},"/components/cmsgallerypopup","2a553c8b-fc10-4bb6-9bfd-efd8d802ba4a","/framerhub/img/components/large/cms-gallery-popup.jpg",18,{"title":384,"description":336},"components/CMSGalleryPopup","A fully customizable CMS Gallery Popup with thumbnail navigation and seamless interactions.",[622,623,624,625,626],"light box","popup","slider","carousel","gallery","h3qjLR5EooJt_H7HdWzK_oBOtBz0P8G1hN2aNjzgeaU",{"id":629,"title":630,"body":631,"categories":855,"component_copy_url":857,"createdAt":858,"description":336,"download_url":355,"extension":356,"featured":357,"features":859,"hasGradient":366,"iframe":868,"image":869,"isFree":357,"lemonsqueezy_variant_id":336,"meta":870,"navigation":366,"path":871,"polar_product_id":872,"previewImage":873,"price":874,"published":366,"robots":355,"seo":875,"slug":635,"stem":876,"tagline":877,"tags":878,"__hash__":882},"components/components/neural-core.md","Neural Core",{"type":7,"value":632,"toc":842},[633,636,639,641,647,653,659,665,671,673,679,685,691,697,704,706,708,712,727,729,732,736,747,752,766,770,781,786,800,802,808,813,819,825,827,831,833,835,837,840],[10,634,630],{"id":635},"neural-core",[15,637,638],{},"Create stunning 3D ASCII particle spheres for your Framer projects. Perfect for hero sections, loading screens, or any area that needs a futuristic, tech-focused visual impact.",[10,640,21],{"id":20},[15,642,643,646],{},[25,644,645],{},"3D Particle Sphere","\nA beautiful animated sphere made of thousands of ASCII characters with realistic depth and movement.",[15,648,649,652],{},[25,650,651],{},"Three Character Sets","\nChoose from Binary (0s and 1s), Hex (0-9, A-F), or Glyphs (symbols and special characters) to match your aesthetic.",[15,654,655,658],{},[25,656,657],{},"Bloom Glow Effect","\nAdd an ethereal glow to your particles with adjustable bloom intensity for that perfect sci-fi look.",[15,660,661,664],{},[25,662,663],{},"Transparent Background","\nSeamlessly blend the component into your design with transparent background support (disables bloom).",[15,666,667,670],{},[25,668,669],{},"Interactive Mouse Tilt","\nThe sphere responds to mouse movement, creating an engaging interactive experience for visitors.",[10,672,56],{"id":55},[15,674,675,678],{},[25,676,677],{},"Hero Backgrounds"," — Create an immersive, futuristic first impression.",[15,680,681,684],{},[25,682,683],{},"Loading States"," — Keep users engaged with mesmerizing particle animation.",[15,686,687,690],{},[25,688,689],{},"Tech Portfolios"," — Showcase a modern, code-focused aesthetic.",[15,692,693,696],{},[25,694,695],{},"AI/ML Products"," — Perfect visual metaphor for neural networks and data processing.",[15,698,699],{},[84,700],{"alt":701,"className":702,"src":703},"Neural Core Preview",[88,89,90],"/framerhub/img/components/control/neural-core.jpg",[10,705,95],{"id":94},[97,707,100],{"id":99},[15,709,710],{},[25,711,105],{},[107,713,714,716,718,721,723,725],{},[110,715,112],{},[110,717,115],{},[110,719,720],{},"Find Neural Core in your Recent Purchases",[110,722,121],{},[110,724,124],{},[110,726,127],{},[97,728,131],{"id":130},[15,730,731],{},"Customize the appearance and behavior using Framer's property controls.",[15,733,734],{},[25,735,172],{},[141,737,738,741,744],{},[110,739,740],{},"Core Color: Primary inner particle color",[110,742,743],{},"Outer Color: Secondary gradient color",[110,745,746],{},"Background: Scene background color (hidden when Transparent BG is on)",[15,748,749],{},[25,750,751],{},"Particles",[141,753,754,757,760,763],{},[110,755,756],{},"Count: Number of particles (affects performance)",[110,758,759],{},"Size: ASCII character size",[110,761,762],{},"Radius: Sphere radius",[110,764,765],{},"Scale: Uniform scaling of the entire sphere",[15,767,768],{},[25,769,139],{},[141,771,772,775,778],{},[110,773,774],{},"Distortion: Noise displacement strength",[110,776,777],{},"Noise Speed: Animation speed",[110,779,780],{},"Rotation Speed: Sphere spin rate",[15,782,783],{},[25,784,785],{},"Effects",[141,787,788,791,794,797],{},[110,789,790],{},"Bloom: Glow intensity",[110,792,793],{},"Tilt Strength: Mouse interaction sensitivity",[110,795,796],{},"Character Set: Binary, Hex, or Glyphs",[110,798,799],{},"Transparent BG: Toggle transparency (disables bloom)",[97,801,226],{"id":225},[15,803,804,807],{},[25,805,806],{},"Best Performance"," — Use Auto quality mode which detects your device capabilities. On mobile, stick to 5,000-10,000 particles.",[15,809,810,812],{},[25,811,249],{}," — Bright neon colors on dark backgrounds create stunning bloom effects. Try cyan/magenta or green/purple gradients.",[15,814,815,818],{},[25,816,817],{},"Layering"," — Place content above or behind the component using transparent background. Use contrasting text colors for readability.",[15,820,821,824],{},[25,822,823],{},"Character Style"," — Binary feels classic tech, Hex feels hacker/crypto, Glyphs feels sci-fi/alien.",[10,826,302],{"id":301},[15,828,829,308],{},[25,830,307],{},[10,832,312],{"id":311},[15,834,315],{},[10,836,319],{"id":318},[15,838,839],{},"A professional-grade 3D effect that would typically require custom Three.js development, now available as a simple drag-and-drop component with full customization options.",[327,841],{},{"title":336,"searchDepth":337,"depth":337,"links":843},[844,845,846,847,852,853,854],{"id":635,"depth":337,"text":630},{"id":20,"depth":337,"text":21},{"id":55,"depth":337,"text":56},{"id":94,"depth":337,"text":95,"children":848},[849,850,851],{"id":99,"depth":345,"text":100},{"id":130,"depth":345,"text":131},{"id":225,"depth":345,"text":226},{"id":301,"depth":337,"text":302},{"id":311,"depth":337,"text":312},{"id":318,"depth":337,"text":319},[377,856],"Interactive","https://framer.com/m/NeuralCore-OuNH.js","2026-01-14T00:00:00.000Z",[860,861,862,863,864,865,866,867],"3D ASCII particle sphere","Three character sets (Binary, Hex, Glyphs)","Customizable bloom glow effect","Interactive mouse tilt","Auto quality detection","Transparent background support","Canvas-optimized performance","Dual-color gradient particles","https://internal-squircle-919925.framer.app/","/framerhub/img/components/neural-core.jpg",{"variants":345},"/components/neural-core","f9f76587-b717-40a1-abec-4a7465f819a2","/framerhub/img/components/large/neural-core.jpg",14,{"title":630,"description":336},"components/neural-core","A mesmerizing 3D ASCII particle sphere with bloom effects.",[377,751,879,880,139,881],"ASCII","Three.js","Sphere","69EjuIq07hwbeQxQHnazysuknAdvOrrmEYLvVy5w9IY",{"id":884,"title":885,"body":886,"categories":1142,"component_copy_url":1144,"createdAt":1145,"description":336,"download_url":355,"extension":356,"featured":357,"features":1146,"hasGradient":357,"iframe":1152,"image":1153,"isFree":357,"lemonsqueezy_variant_id":336,"meta":1154,"navigation":366,"path":1155,"polar_product_id":1156,"previewImage":1157,"price":1158,"published":366,"robots":355,"seo":1159,"slug":1160,"stem":1161,"tagline":1162,"tags":1163,"__hash__":1166},"components/components/premium-kinetic-ascii.md","Kinetic ASCII",{"type":7,"value":887,"toc":1129},[888,892,895,897,903,909,914,920,926,928,934,939,944,950,956,963,965,967,971,986,988,991,996,1010,1015,1045,1050,1057,1061,1075,1077,1082,1088,1094,1100,1106,1112,1114,1118,1120,1122,1124,1127],[10,889,891],{"id":890},"kinetic-ascii-dynamic-dot-matrix-visual-effects","Kinetic ASCII — Dynamic Dot-Matrix Visual Effects",[15,893,894],{},"Transform any 3D shape or image into stunning dot-matrix ASCII art with real-time animation. Built with Three.js for smooth, GPU-accelerated rendering, this component creates a unique retro-futuristic aesthetic that's perfect for creative portfolios, landing pages, and experimental web projects.",[10,896,21],{"id":20},[15,898,899,902],{},[25,900,901],{},"3D Torus Knot Animation","\nA beautifully animated 3D Torus Knot shape that rotates continuously, rendered entirely as ASCII dots. The shape is lit with multiple directional lights for depth and dimension.",[15,904,905,908],{},[25,906,907],{},"Image to ASCII Conversion","\nUpload any image and watch it transform into a dot-matrix representation. Perfect for hero backgrounds or artistic image treatments.",[15,910,911,913],{},[25,912,663],{},"\nFull transparency support allows the ASCII effect to layer seamlessly over any content, enabling creative compositions and overlays.",[15,915,916,919],{},[25,917,918],{},"True Color Mode","\nEnable True Color to preserve the original colors from your source image or 3D shape, creating a colorful ASCII interpretation rather than monochrome.",[15,921,922,925],{},[25,923,924],{},"CRT Scanline Effect","\nAdd authentic retro vibes with an optional scanline overlay that mimics vintage CRT monitors.",[10,927,56],{"id":55},[15,929,930,933],{},[25,931,932],{},"Creative Portfolios"," — Stand out with a unique visual effect that showcases technical creativity and artistic vision.",[15,935,936,938],{},[25,937,61],{}," — Create eye-catching landing page headers with animated ASCII art that draws attention.",[15,940,941,943],{},[25,942,67],{}," — Perfect for projects with a retro, cyberpunk, or hacker aesthetic.",[15,945,946,949],{},[25,947,948],{},"Art Installations"," — Use as a digital art piece or interactive installation element.",[15,951,952,955],{},[25,953,954],{},"Music & Entertainment"," — Add dynamic visual interest to artist pages, album promotions, or event sites.",[15,957,958],{},[84,959],{"alt":960,"className":961,"src":962},"Kinetic ASCII Preview",[88,89,90],"/framerhub/img/components/control/kinetic-ascii.jpg",[10,964,95],{"id":94},[97,966,100],{"id":99},[15,968,969],{},[25,970,105],{},[107,972,973,975,977,980,982,984],{},[110,974,112],{},[110,976,115],{},[110,978,979],{},"Find Kinetic ASCII in your Recent Purchases",[110,981,121],{},[110,983,124],{},[110,985,127],{},[97,987,131],{"id":130},[15,989,990],{},"Configure the component through the Properties panel:",[15,992,993],{},[25,994,995],{},"Source Selection",[141,997,998,1004],{},[110,999,1000,1003],{},[25,1001,1002],{},"3D Shape",": Animated Torus Knot (default)",[110,1005,1006,1009],{},[25,1007,1008],{},"Image",": Upload your own image",[15,1011,1012],{},[25,1013,1014],{},"Visual Controls",[141,1016,1017,1023,1028,1034,1039],{},[110,1018,1019,1022],{},[25,1020,1021],{},"Density",": Adjust dot size (4 = large dots, 32 = fine detail)",[110,1024,1025,1027],{},[25,1026,166],{},": Resize the content (0.1 - 3.0, default 1.0)",[110,1029,1030,1033],{},[25,1031,1032],{},"Color",": Set the ASCII dot color (hidden when True Color is on)",[110,1035,1036,1038],{},[25,1037,203],{},": Set background color or keep transparent",[110,1040,1041,1044],{},[25,1042,1043],{},"Invert",": Flip the brightness mapping",[15,1046,1047],{},[25,1048,1049],{},"Animation Controls",[141,1051,1052],{},[110,1053,1054,1056],{},[25,1055,147],{},": Control rotation speed (0 = static, 2 = fast)",[15,1058,1059],{},[25,1060,785],{},[141,1062,1063,1069],{},[110,1064,1065,1068],{},[25,1066,1067],{},"True Color",": Use source colors instead of single color",[110,1070,1071,1074],{},[25,1072,1073],{},"Scanlines",": Toggle retro CRT effect (Default: No)",[97,1076,226],{"id":225},[15,1078,1079,1081],{},[25,1080,806],{}," — Higher density values (smaller dots) render faster. Start with 10-12 for a good balance of detail and performance.",[15,1083,1084,1087],{},[25,1085,1086],{},"Scale it Up"," — Use the Scale property to perfectly fit the 3D shape or image within your frame without resizing the component itself.",[15,1089,1090,1093],{},[25,1091,1092],{},"Transparent Layering"," — Set Background to transparent and layer the component over images or gradients for creative compositions.",[15,1095,1096,1099],{},[25,1097,1098],{},"True Color Magic"," — Enable True Color when using colorful source images to create vibrant ASCII interpretations.",[15,1101,1102,1105],{},[25,1103,1104],{},"Scanline Subtlety"," — The scanline effect is intentionally subtle. It works best on larger component sizes.",[15,1107,1108,1111],{},[25,1109,1110],{},"Mobile Considerations"," — Reduce density to 16-24 on mobile for smoother performance.",[10,1113,302],{"id":301},[15,1115,1116,308],{},[25,1117,307],{},[10,1119,312],{"id":311},[15,1121,315],{},[10,1123,319],{"id":318},[15,1125,1126],{},"Kinetic ASCII bridges the gap between retro aesthetics and modern web technology. With just a few clicks, you can add a unique, animated visual element that's impossible to replicate with static images or CSS. The transparent background support and True Color mode give you complete creative freedom to integrate this effect into any design. Whether you're building a portfolio, landing page, or artistic project, Kinetic ASCII delivers that \"wow\" factor that makes visitors stop and look twice.",[327,1128],{},{"title":336,"searchDepth":337,"depth":337,"links":1130},[1131,1132,1133,1134,1139,1140,1141],{"id":890,"depth":337,"text":891},{"id":20,"depth":337,"text":21},{"id":55,"depth":337,"text":56},{"id":94,"depth":337,"text":95,"children":1135},[1136,1137,1138],{"id":99,"depth":345,"text":100},{"id":130,"depth":345,"text":131},{"id":225,"depth":345,"text":226},{"id":301,"depth":337,"text":302},{"id":311,"depth":337,"text":312},{"id":318,"depth":337,"text":319},[1143],"Visual Effects","https://framer.com/m/KineticASCII-EitT.js","2026-01-13T00:00:00.000Z",[1147,1148,865,1149,1150,1151],"Animated 3D Torus Knot shape","Custom image to ASCII conversion","True Color mode for original colors","Retro CRT scanline overlay","Real-time dot-matrix rendering","https://genuine-square-347091.framer.app/","/framerhub/img/components/kinetic-ascii.jpg",{"variants":337},"/components/premium-kinetic-ascii","a5385215-a76a-4376-b23a-4f1d3a3d99b4","/framerhub/img/components/large/kinetic-ascii.jpg",9,{"title":885,"description":336},"kinetic-ascii","components/premium-kinetic-ascii","Transform shapes and images into mesmerizing dot-matrix ASCII art with real-time 3D animation.",[879,377,139,1164,1165,880],"Retro","Dot Matrix","ZJHiuTc__eg00PCV-njy1VO_39U6gX_xTj08JirAnO8",1776235895498]