Imagine stepping into a gallery where each piece of art is not only visually stunning but also interactive. This is the essence of Aceternity UI, a component library that transforms the web development landscape with its rich, animated elements. In the last few weeks, this UI library that was all over Twitter and Youtube and Im here to tell you all about it.

What is Aceternity UI?

Aceternity is a UI library of ready-to-use web components that can significantly enhance the user interface of any project. I know, yet another UI library? But wait a second because this one is built with Framer Motion and TailwindCSS, having a clear focus on smooth animations and good visuals.

Aceternity UI is specifically designed to integrate seamlessly with modern JavaScript frameworks, particularly React and Next.js. React's component-based architecture makes it an ideal foundation for Aceternity UI, allowing developers to easily incorporate dynamic, interactive UI components into their applications. Next.js, built on top of React, further enhances this by providing capabilities for server-side rendering and static site generation, which can improve performance and SEO for web projects. This makes Aceternity UI a versatile choice for developers working within the React ecosystem, looking to create visually impressive and highly interactive web applications with ease.

Don't worry my fellow SvelteKit colleagues! I've got you covered. I found an unofficial SvelteKit port of Aceternity to seamlessly integrate it to your Svelte projects. The unofficial SvelteKit port is available at: aceternity.sveltekit.io.

Key Features

• Rich Animations: Utilizing Framer Motion, Aceternity UI offers a wide range of smooth and sophisticated animations that can be easily integrated into web projects, enhancing the user experience with engaging visual effects. 

• Responsive Design: Each component is built to be fully responsive, ensuring that web applications look great on any device, from mobile phones to large desktop screens.

• Modular Components: The library provides a collection of modular and reusable components that can be easily customized and combined to build complex UIs without starting from scratch.

• Tailwind CSS Integration: With Tailwind CSS, Aceternity UI allows for rapid styling customization directly in the markup, facilitating a faster and more efficient design process without the need for extensive CSS files. 

• Easy to Implement: The components are designed to be straightforward to implement, requiring minimal setup to integrate into existing projects, particularly those built with React and Next.js.

• Open Source: Aceternity UI is open source, giving developers the freedom to modify, extend, and improve the components as needed, as well as contribute back to the community. 

• Extensive Documentation: The library includes detailed documentation for each component, providing examples, usage guidelines, and configuration options to help developers get started quickly.

• Community Support: Being open source, Aceternity UI has a community of developers who contribute to the library, enhancing its capabilities and providing support through forums and social media. 

Let's do an example

Let's implement this cool spotlight component

Step 1

First things first, if you haven't already created a SvelteKit project, you can start one with the following commands:

npm create svelte@latest my-svelte-project cd my-svelte-project npm install

Step 2

Now let's add the dependencies

npm i svelte-motion clsx tailwind-merge

Step 3

Add the util file to 'src/lib/utils/cn.js'

import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
        
export function cn(...inputs) {
    return twMerge(clsx(inputs));
}

Step 4

Copy the highlighted spotlight animation into the [tailwind.config.js] file

const config = {
	// ... other properties
	theme: {
		extend: {
			animation: {
				// ...other animations
				spotlight: 'spotlight 2s ease .75s 1 forwards'
			},
			keyframes: {
				// ... other keyframes
				spotlight: {
					'0%': {
						opacity: 0,
						transform: 'translate(-72%, -62%) scale(0.5)'
					},
					'100%': {
						opacity: 1,
						transform: 'translate(-50%,-40%) scale(1)'
					}
				}
			}
		}
	}
};

Step 5

Copy the source code

<svg
	class={cn(
		'pointer-events-none absolute z-[1] h-[169%]  w-[138%] animate-spotlight opacity-0 lg:w-[84%]',
		className
	)}
	xmlns="http://www.w3.org/2000/svg"
	viewBox="0 0 3787 2842"
	fill="none"
>
	<g filter="url(#filter)">
		<ellipse
			cx="1924.71"
			cy="273.501"
			rx="1924.71"
			ry="273.501"
			transform="matrix(-0.822377 -0.568943 -0.568943 0.822377 3631.88 2291.09)"
			fill={fill || 'white'}
			fill-opacity="0.21"
		></ellipse>
	</g>
	<defs>
		<filter
			id="filter"
			x="0.860352"
			y="0.838989"
			width="3785.16"
			height="2840.26"
			filterUnits="userSpaceOnUse"
			color-interpolation-filters="sRGB"
		>
			<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
			<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
			<feGaussianBlur stdDeviation="151" result="effect1_foregroundBlur_1065_8"></feGaussianBlur>
		</filter>
	</defs>
</svg>

Step 6

Render your component in your +page.svelte page

<script>
	import Spotlight from '$lib/components/ui/Spotlight/Spotlight.svelte';
</script>

<div
	class="relative flex h-[40rem] overflow-hidden rounded-md bg-black/[0.96] px-16 antialiased bg-grid-white/[0.02] md:items-center md:justify-center lg:px-32"
>
	<Spotlight className="-top-40 left-0 md:left-60 md:-top-20" fill="white" />
	<div class=" relative z-10 mx-auto w-full max-w-7xl p-4 pt-20 md:pt-0">
		<h2
			class="bg-opacity-50 bg-gradient-to-b from-neutral-50 to-neutral-400 bg-clip-text text-center text-4xl font-bold text-transparent md:text-7xl"
		>
			Spotlight <br /> is the new trend.
		</h2>
		<p class="mx-auto mt-4 max-w-lg text-center text-base font-normal text-neutral-300">
			Spotlight effect is a great way to draw attention to a specific part of the page. Here, we are
			drawing the attention towards the text section of the page. I don&apos;t know why but I&apos;m
			running out of copy.
		</p>
	</div>
</div>

Access Aceternity UI at: ui.aceternity.comAccess The Unofficial SvelteKit Port at: aceternity.sveltekit.io