The best Product Managers are Swiss Army knives - well-versed in business strategy, user experience and technical execution. Plus a host of other topics that evolve as quickly as the technology itself.

After nearly a decade building digital products that transform companies, we’ve cultivated a healthy list of  books, podcasts, and other learning materials to help you along your way. The content found here has helped our team navigate a variety of challenges - from prioritizing features and conducting sound user research, to communicating effectively with stakeholders. It's mandatory reading for our team.

Explore the resources below. Read, watch, listen. Our hope is that this curated selection of content will help you level up your skills, so that you can build better, smarter, more relevant products.

Books

• Design of Everyday Things - Classic on user-centered design principles
• Essential Scrum - Practical framework for agile product development
• Four Steps to the Epiphany - Customer development methodology for product-market fit
• Hard Thing About Hard Things - Real-world lessons in building tech companies
• High Output Management - Andy Grove's principles for managing product teams
• Hooked - Framework for building habit-forming products
• How to Win Friends & Influence People - Essential skills for product leadership
• Innovator's Dilemma - Why great companies fail to innovate effectively
• Innovator's Solution - Strategies for creating disruptive innovations successfully
• Inspired - Practical guide to modern product management practices
• Lean Start Up - Essential methodology for building products under uncertainty
• Positioning - Classic marketing strategy for product differentiation
• Predictably Irrational - Understanding customer psychology and decision-making
• Sprint - Google Ventures' 5-day process for solving product problems
• Super Thinking - Mental models for better product decisions
• Win Without Pitching - Blair Enn’s standard-setting framework for selling your product vision

Websites

• Andreessen Horowitz - VC perspectives on tech trends and product strategy
• Apple Insider - Latest Apple product news and analysis Department of Product - Practical guides for product management careers
• First Round - In-depth articles on product and startup leadership
• Gabriel Weinburg Mental Models - Decision-making frameworks for product leaders
• Hacker News - Tech community discussions on products and engineering
• Ken Norton - Google PM veteran's essays on product leadership. A must read.
• Lenny's Newsletter - Actionable advice from experienced product leaders.
• NYT Tech - Tech industry coverage and product analysis
• Paul Graham Essays - Y Combinator founder's insights on building products. Classic and value-packed.
• Product Hunt - Daily showcase of new products and tools (check out the chrome plugin, too)
• Product Talk - Product discovery and customer-centric development resources
• Steve Blank Toolkit - Customer development and startup methodology resources
• Tiny / Metalab - Product and company leadership insights from Andrew Wilkinson and others
• Techcrunch - Breaking news on products and startups
• The Product Guy - Jeremy Horn’s podcast, community and resources to master product management.
• YC Resources - Y Combinator's startup and product development guides

Video & Podcasts

• A16Z - Andreessen Horowitz's insights on tech and product
• Appleinsider - Deep analysis of Apple's product strategies
• Ctrl-Alt-Delete - Award-winning podcast on work, wellbeing and creativity from host Emma Gannon.
• Emmett Shear - Definitive guide to conducting effective user interviews
• Farmerama - Innovation and product development in agriculture tech
• Freakonomics - Economics principles applied to product decisions
• Giant Ideas - Big-picture thinking for product strategy
• Inc Uncensored - Behind-the-scenes of company building
• Masters of Scale - Reid Hoffman on growing products into companies
• NPR Politics - Policy impacts on product development
• Planet Money - Economics stories relevant to product decisions
• Radiolab - Storytelling and innovation insights
• Talk show with John Gruber - Apple and tech product analysis
• TED Radio Hour - Big ideas in technology and innovation
• Tim Ferris - Interviews with product leaders and entrepreneurs
• This is Product Management - Weekly interviews with product leaders

There’s a myth out there about social sharing from apps.

The common sentiment seems to be: “just slap on a share button” and like magic, your content will start making its way around the wilds of the internet. This is especially true if the target is a younger audience. Unfortunately, there is no “go viral” button.

If you want users to share content around your product, you’re going to need to consider:

1. What motivates people to share? And;
2. How to align your feature or content so it speaks directly to #1?

Let’s get into it.

Why People Share

We have developed enough apps to have seen the share-cycle in action, and we’ve distilled the primary motivations for sharing into four categories:

1. The Cocktail Party Effect

Motivation: to be seen as “in the know.” People who share for this reason are often positioning themselves as knowledgeable or cutting edge. They want to be the very first one in their network to share the cool new thing.

Reward: praise & validation from their peers.

Notable Cocktail Shares: the latest and greatest article on a cultural topic, newly released features on an existing product or a brand new cutting-edge one (think Google Glass when it first arrived on the scene. RIP.)

2. The Bandwagon Effect

Motivation: to participate in a viral moment. Users who share for this reason are often motivated by FOMO: they don’t want to be the only ones in their circle (either physical or virtual) who haven’t yet joined the movement.

Reward: feeling a part of a larger, like-minded, community

Notable Bandwagon Shares: the ALS ice-bucket challenge was a great example of the bandwagon effect. Being tagged to participate (and share) was a badge of honor. Political movements also capitalize on the bandwagon mentality, getting supporters to forward and share content as a means of participation in a campaign. Often there is some branded element that ties this together - a hashtag, a sticker, etc.

3. The OMG Effect

Motivation: the content has elicited such a strong, organic emotion – joy, sadness, fear, surprise – the user feels compelled to share it. Their motivation is simply that: to spread the feeling, good or bad, to others.

Reward: validation and expansion of their experience

Notable OMG Shares: the early adopters of the “Faceapp” AI aging filter were compelled to spread the word far and wide. This wasn’t just because of the novelty of the tech, but because for young people, seeing themselves in the latter half of their golden years was too delightful, terrifying, and compelling not to share.

4. The Need-to-Know Effect

Motivation: possibly the most difficult to inspire, this kind of sharing is motivated by a genuine desire to inform their network. Either to clue them in to an important cause, tap into collective wisdom, or uplift and elevate their community’s knowledge.

Reward: having an impact on friends, family, and like-minded others.

Notable Need-to-Know Shares: those looking to raise awareness on important issues, seek or offer travel recommendations, or share new results/innovations on a topic close to their heart are all examples of this kind of spontaneous (and hard to capture) sharing.

How to light the sharing fire

Instead of making assumptions about shareability, consider the primary motivations for your target audience and focus there. Do they want to be moved? Shocked? Beckoned onto a fast-moving bandwagon? Design your features and content accordingly.

Think about sparking the impulse to share, rather than just declaring something shareable and hoping for the best. After all, sharing isn’t about the button - it’s about giving users something worth pressing for.

Moving between screens and views is a crucial aspect of creating robust and user-friendly Android applications. The approach to navigation has been totally transformed with the advent of Jetpack Compose, Google's modern declarative UI toolkit.

Managing navigation effectively can be a daunting task, especially when it involves passing data between screens. So in this guide, we will dive into Compose navigation to help establish efficient navigation flows for your Android apps.

To illustrate this, we’ll construct a basic app with 3 distinct screens. The app will feature a Home Screen with a button to navigate to the Profile Screen. Additionally, the Home Screen will include a list of clickable items that lead to a detail screen. We’ll develop the app using Compose and Koin - straightforward library for injecting dependencies and viewModels.

Getting Started

Let's kick off by incorporating the necessary dependencies in build.gradle.kts.

implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.8.1")

val composeNavVersion = "2.7.7"

implementation("androidx.navigation:navigation-compose:$composeNavVersion")

val koinVersion = "3.5.6"

implementation("io.insert-koin:koin-core:$koinVersion")

implementation("io.insert-koin:koin-android:$koinVersion")

implementation("io.insert-koin:koin-androidx-compose:$koinVersion")

Building the UI

Home Screen

The home screen is a very simple one that inputs a list of items and functions as the user taps on the button to navigate to the profile and item screens.

@Composable
fun HomeScreen(items: List<ItemData>, onTapProfile: () -> Unit, onTapItem: (ItemData) -> Unit) {

    Box(
        Modifier.fillMaxSize().background(Color(0xFF3F51B5)).safeDrawingPadding(),
        Alignment.Center
    ) {
        LazyColumn {
            item {
                Box(Modifier.fillMaxWidth(), Alignment.Center) {
                    Button(
                        modifier = Modifier.fillMaxWidth().padding(20.dp),
                        onClick = { onTapProfile() }
                    ) {
                        Text("Go to Profile")
                    }
                }
            }

            item {
                Text(
                    "Items : ",
                    fontSize = 30.sp,
                    color = Color.White,
                    modifier = Modifier.padding(10.dp)
                )
            }

            items(items) { item ->
                Column(
                    Modifier.fillMaxWidth()
                        .height(50.dp)
                        .background(Color(item.color))
                        .clickable { onTapItem(item) }
                        .padding(horizontal = 20.dp)
                ) {
                    Spacer(Modifier.size(8.dp))

                    Text("Item  #${item.id}", fontSize = 20.sp, color = Color.White)

                    Spacer(Modifier.size(8.dp))

                    Box(Modifier.fillMaxWidth().height(1.dp).background(Color.White))
                }
            }
        }
    }
}

Profile Screen

The profile screen is the simplest screen of all. It just has a title and text positioned at the center. We will come back to the ProfileViewModel later.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ProfileScreen() {

    val viewModel: ProfileViewModel = koinViewModel()

    Scaffold(
        topBar = {
            CenterAlignedTopAppBar(
                title = { Text("Profile", color = Color.Black, fontSize = 30.sp) },
                navigationIcon = {
                    IconButton({ viewModel.navigateBack() }) {
                        Icon(
                            painterResource(R.drawable.back_arrow),
                            "back",
                            tint = Color.Black,
                            modifier = Modifier.size(30.dp)
                        )
                    }
                },
                modifier = Modifier,
                colors = TopAppBarDefaults.topAppBarColors(containerColor = Color.Transparent)
            )
        }
    ) { paddingValues ->
        Box(Modifier.fillMaxSize().background(Color.White), Alignment.Center) {
            Text("Profile Screen", fontSize = 30.sp, color = Color.Black)
        }
    }
}

Item Details Screen

The ItemDetailsScreen will take the data from the ItemDetailsViewModel to display the number of the item and use the color for the background.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ItemDetailsScreen() {

    val viewModel: ItemDetailsViewModel = koinViewModel()

    Scaffold(
        topBar = {
            CenterAlignedTopAppBar(
                title = { Text("Item Details", color = Color.White, fontSize = 30.sp) },
                navigationIcon = {
                    IconButton({
                        // TODO: Add back navigation
                    }) {
                        Icon(
                            painterResource(R.drawable.back_arrow),
                            "back",
                            tint = Color.White,
                            modifier = Modifier.size(30.dp)
                        )
                    }
                },
                modifier = Modifier,
                colors = TopAppBarDefaults.topAppBarColors(containerColor = Color.Transparent)
            )
        }
    ) { paddingValues ->
        val item by remember { mutableStateOf(viewModel.item) }

        Box(Modifier.fillMaxSize().background(Color(item.color)), Alignment.Center) {
            Text("Item #${item.id}", fontSize = 30.sp, color = Color.White)
        }
    }
}

The Domain layer

To replicate a real-life scenario, let’s utilize a service that will supply us with the necessary data to showcase on our various screens. The ItemService will be injected into both the AppViewModel and ItemDetailsViewModel. These viewModels will then retrieve the required data and send it to the view.

interface ItemService {
    val items: List<ItemData>
}

class RealItemService : ItemService {

    override val items: List<ItemData> = generateItems()

    // Generate a list of 100 items with the index as ID and a random color from the list below
    private fun generateItems(): List<ItemData> =
        (0 until 100).map { ItemData(id = it, color = getRandomColor()) }

    private fun getRandomColor(): Long {

        val colorList =
            listOf(
                0xFFF44336,
                0xFF009688,
                0xFF9C27B0,
                0xFF673AB7,
                0xFF3F51B5,
                0xFF4CAF50,
                0xFFFF5722,
                0xFF5F1700,
                0xFF690024,
                0xFF000D53,
                0xFF003602
            )

        return colorList[(0..colorList.lastIndex).random()]
    }
}

data class ItemData(val id: Int, val color: Long)

Dependency Injection

In order to be able to inject the service into the ViewModels and inject the ViewModels into the views, we are going to use Koin. The setup is very simple.

First, we need to create a custom App class:

class MainApp : Application() {

    override fun onCreate() {

        super.onCreate()

        startKoin {
            androidContext(this@MainApp)

            modules(appModule)
        }
    }
}

Set the MainApp as the class to run at launch in the manifest:

<manifest xmlns:android="<http://schemas.android.com/apk/res/android>" xmlns:tools="<http://schemas.android.com/tools>">

<application android:name=".MainApp">

Almost there! Just create a kotlin file called appModule.kt. This file will contain all the different components to inject:

val appModule = module {

    // create a viewModel with all the required dependencies
    viewModelOf(::ItemDetailsViewModel)

    viewModelOf(::ProfileViewModel)

    viewModelOf(::AppViewModel)

    // Inject a Singleton
    single<ItemService> { RealItemService() }
}

And now we can create our viewModels to inject in the views:

val viewModel: ViewModel = koinViewModel()

class AppViewModel(itemService: ItemService) : ViewModel() {
    val itemList = itemService.items
}

class ItemDetailsViewModel(itemService: ItemService) : ViewModel()

class ProfileViewModel(private val navigator: Navigator) : ViewModel()

Navigation Handling

Now that we’ve set up the foundation, it's time to explore how to manage navigation using Jetpack Compose. To achieve this, we'll utilize the NavHost Component to encapsulate the various destinations within our app:

// Call this view from the MainActivity
// setContent {
//     TutorialNavigationTheme {
//         AppScreen()
//     }
// }

@Composable
fun AppScreen() {

    val viewModel: AppViewModel = koinViewModel()

    val navController = rememberNavController()

    NavHost(navController = navController, startDestination = HomeDestination.route) {
        composable(HomeDestination.route) {
            HomeContent(
                viewModel.itemList,
                {
                    // TODO: Add Profile Navigation
                }
            ) {
                // TODO: Add Item Navigation
            }
        }

        composableSlideInOut(ProfileDestination.route) { ProfileScreen() }

        composableSlideInOut(
            ItemDetailsDestination.route,
            arguments = ItemDetailsDestination.navArgs
        ) {
            ItemDetailsScreen()
        }
    }
}

composableSlideInOut is just an extension to customize the transition between two screens:

private const val transitionDuration = 700

fun NavGraphBuilder.composableSlideInOut(
    route: String,
    arguments: List<NamedNavArgument> = emptyList(),
    deepLinks: List<NavDeepLink> = emptyList(),
    enterTransition:
        (@JvmSuppressWildcards
        AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition?)? =
        {
            slideIntoContainer(
                AnimatedContentTransitionScope.SlideDirection.Left,
                tween(transitionDuration)
            )
        },
    exitTransition:
        (@JvmSuppressWildcards
        AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition?)? =
        {
            slideOutOfContainer(
                AnimatedContentTransitionScope.SlideDirection.Left,
                tween(transitionDuration)
            )
        },
    popEnterTransition:
        (@JvmSuppressWildcards
        AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition?)? =
        {
            slideIntoContainer(
                AnimatedContentTransitionScope.SlideDirection.Right,
                tween(transitionDuration)
            )
        },
    popExitTransition:
        (@JvmSuppressWildcards
        AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition?)? =
        {
            slideOutOfContainer(
                AnimatedContentTransitionScope.SlideDirection.Right,
                tween(transitionDuration)
            )
        },
    content: @Composable AnimatedContentScope.(NavBackStackEntry) -> Unit
) {

    composable(
        route,
        arguments,
        deepLinks,
        enterTransition,
        exitTransition,
        popEnterTransition,
        popExitTransition,
        content
    )
}

Within the NavHost, you'll find composables that specify the various views and how to navigate between them. Remember to include a NavController using rememberNavController to handle the navigation.

The NavHost must designate a start destination to determine the initial screen to show. This start destination is simply a String that corresponds to one provided to a composable.

Here, we want the app to start on the HomeScreen.

Destinations

There are numerous effective approaches to handle destinations - scattered Strings however, is not one of the recommended approaches. It's quite easy to misspell them and encounter a crash. Instead, a popular approach is to utilize either an enum class or a sealed class.

For now, we'll handle destinations differently. Every destination will be a class that contains a static string for the route.

object HomeDestination {

    private const val root = "home"

    const val route = root
}

Or:

object ProfileDestination {

    private const val root = "profile"

    const val route = root
}

This will work nicely for a simple navigation without passing any arguments between screens. It might even be overkill.

Issues may arise when trying to send data - like the item id - to ItemDetailsScreen in this case.

To send parameters to a different screen, you must include the parameter name after the destination name in the route definition, for example: "$root/$index". As you construct the route, the argument name will be substituted with its actual value.

To make it easy, each destination will extend NavDestination.

interface NavDestination {

    fun buildRoute(): String
}

object HomeDestination : NavDestination {

    override fun buildRoute(): String = route

    private const val root = "home"

    const val route = root
}

object ProfileDestination : NavDestination {

    override fun buildRoute(): String = route

    private const val root = "profile"

    const val route = root
}

class ItemDetailsDestination(val index: Int) : NavDestination {

    constructor(
        savedStateHandle: SavedStateHandle
    ) : this(index = requireNotNull(savedStateHandle.get<Int>(inputArg)))

    override fun buildRoute(): String = "$root/$index"

    companion object {

        private const val root = "item_details"

        private const val inputArg = "index"

        const val route = "$root/{$inputArg}"

        val navArgs = listOf(navArgument(inputArg) { type = NavType.IntType })
    }
}

As you can see, ItemDetailsDestination will pass the index of the selected item to the detailed screen. For this, we pass the static route and navigation arguments navArgs which consist of a list of name (inputArg which is index) and a type (Here NavType.IntType).

The custom constructor will be used to recreate ItemDetailsDestination with the params that were passed from HomeScreen thanks to SavedStateHandle. More to come on that.

Navigator

Let's look at the main component of this architecture - the Navigator :

interface Navigator {

    fun setController(navController: NavController)

    fun navigate(route: NavDestination, builder: NavOptionsBuilder.() -> Unit = {})

    fun popBackStack()

    fun popBackStack(route: NavDestination, inclusive: Boolean, saveState: Boolean = false)
}

class RealNavigator : Navigator {

    private var navController: NavController? = null

    override fun setController(navController: NavController) {

        this.navController = navController
    }

    override fun navigate(route: NavDestination, builder: NavOptionsBuilder.() -> Unit) {

        navController?.navigate(route.buildRoute(), builder)
            ?: Log.w("Navigator", "No NavController set in the Navigator")
    }

    override fun popBackStack() {

        navController?.popBackStack() ?: Log.w("Navigator", "No NavController set in the Navigator")
    }

    override fun popBackStack(route: NavDestination, inclusive: Boolean, saveState: Boolean) {

        navController?.popBackStack(route.buildRoute(), inclusive, saveState)
    }
}

The Navigator will handle the navigation for us. From now on, every time we want to navigate, we are not going to call the usual navController.navigate("route") but navigator.navigate(NavDestination) instead. The Navigator will also take care of the back navigation calling popBackStack() to navigate back to the previous screen or to a desired screen present in the navigation back stack.

The Navigator will be injected into the viewModel of every screen and the view will call a viewModel function that will handle the desired navigation.

Now, let's see how to set that up.

In the appModule that we created previously, define how to instantiate the Navigator

val appModule = module {
    viewModelOf(::ItemDetailsViewModel)

    viewModelOf(::ProfileViewModel)

    viewModelOf(::AppViewModel)

    single<ItemService> { RealItemService() }

    // Add this line
    single<Navigator> { RealNavigator() }
}

In order for the Navigator to work, it needs to have the Compose NavController used by the NavHost. As the Navigator is a singleton, only one instance will be created, ensuring that we have a common Navigator across the app.

So we can inject it in the AppScreen where we will pass the NavController:

@Composable
fun AppScreen(
    // Inject the navigator
    navigator: Navigator = koinInject()
) {

    val viewModel: AppViewModel = koinViewModel()

    val navController = rememberNavController()

    // Pass the navController to the navigator
    LaunchedEffect(navController) { 	
    	navigator.setController(navController) 
    }
    
    ...
}

Now we can modify each viewModel by adding the navigator to their constructor. As the navigator is defined in the appModule, Koin knows how to instantiate and pass it to the ViewModel

class AppViewModel(itemService: ItemService, private val navigator: Navigator) : ViewModel() {

    val itemList = itemService.items

    fun navigateToProfile() {
        navigator.navigate(ProfileDestination)
    }

    fun navigateToItem(index: Int) {
        navigator.navigate(ItemDetailsDestination(index))
    }
}

The ViewModel will now handle the navigation. We can fill the HomeScreen lambda with the navigation logic:

fun AppScreen(navigator: Navigator = koinInject()) {
    ...
    NavHost(navController = navController, startDestination = HomeDestination.route) {
        composable(HomeDestination.route) {
            HomeScreen(viewModel.itemList, { viewModel.navigateToProfile() }) { item ->
                viewModel.navigateToItem(item.id)
            }
        }

        ...
    }
}

Receiving arguments

In order to receive the arguments, we will inject the Navigator and the SavedStateHandle which holds the arguments in a key-value format.

Koin takes care of SavedStateHandle as stated here.

class ItemDetailsViewModel(
    itemService: ItemService,
    private val navigator: Navigator,
    savedStateHandle: SavedStateHandle
) : ViewModel() {

    private val route = ItemDetailsDestination(savedStateHandle)

    val item = itemService.items[route.index]

    fun navigateBack() {
        navigator.popBackStack()
    }
}

First, ItemDetailsViewModel retrieves the index of the item from the SavedStateHandle and then gets the item object from the itemService.

We can now call navigateBack() from the view to navigate back to our HomeScreen

Scaffold(
    topBar = {
        CenterAlignedTopAppBar(
            title = { Text("Item Details", color = Color.White, fontSize = 30.sp) },
            navigationIcon = {
                IconButton({
                    // Call back navigation here
                    viewModel.navigateBack()
                }) {
                    Icon(
                        painterResource(R.drawable.back_arrow),
                        "back",
                        tint = Color.White,
                        modifier = Modifier.size(30.dp)
                    )
                }
            }
        )
    }
)

So there you have it! We've just explored the best way to handle navigation in your Jetpack Compose Android apps.

By using this architecture you can create a navigation structure that's not only robust but also super easy to maintain and scale, without using too many callbacks to call the NavController from the parent view with the NavHost.

This approach makes for cleaner code and reduces the chance of errors. If you're looking for help building your Android product, contact Studio today.

AI is shaking things up in frontend development, changing the way developers build and improve web applications. AI can of course add interesting benefits to product design and development - automating mundane tasks or offering alternative design patterns. But it can also divide the community. Some believe it’s ushering in a new era of smart, responsive, and user-friendly web applications, while others are concerned about the dependence on AI, potential biases, ethical implications, overall quality and accuracy, and security vulnerabilities to boot.

As Studio’s lead frontend developer, I am cautiously optimistic about AI. I already utilize OpenAI regularly: first with VSCode and GitHub’s Copilot code completion extension, and second by leveraging ChatGPT to convert UX components from one technology to another. My experience so far has been using ChatGPT for internal UX prototypes that I build on Codepen or CodeSandbox, while I've been using Copilot for around 2 years both when it was free and now behind a subscription for both commercial and personal projects.

This won’t be another how-to get started with AI, but rather a reflection on my frontend experience leveraging AI.

VSCode & Github Copilot - Code Completion Tools

In the past, traditional code completion tools relied on developers to provide direct code-related input, such as variable names and functions, without the use of natural language descriptions. These tools were integrated into IDEs over the last 2 decades or so, but they often relied on small datasets and heuristics to offer suggestions, which were limited in scope and context.

However, tools like Emmet, which include code completion as just one feature of their toolkit, still hold value. Whether they are more useful than AI depends on your approach to extracting designs that might be in Figma, in browser, or built from static images (I feel your pain). Like mentioned above, this is code completion and not exported code generation from uploading or inputting files.

CSS, HTML & JS

My overall experience is that HTML & CSS code completion isn’t strong enough yet, but has glimpses of greatness. After a recent update to Copilot, it can now access project workspaces. This has given me a false sense of security in its understanding of a project’s overall context. I find myself more often deleting suggested code after accidentally hitting tab when a suggestion is provided. That finger that presses that tab key is awfully itchy.

CSS

I’m under the impression that it has access to variables / mixins / functions that are recurring patterns throughout the code, so it will get you 50% of the way for recurring, mostly typographical, elements. If you’re setting up your typographical elements for a design system, it won’t get this right immediately. For those small modifiers it can provide all the necessary properties but still requires backtracking to adjust the values you actually need.

Productivity may have been marginally improved given the above, but experienced developers can write those properties out just as quickly without the backtrack or need to wait for an API to catch up. It rightly assumes that you want to reuse properties from other components in your library, but this can lead to extra scruff if those properties have already been componentized specifically. This can be time-consuming when working on a new isolated component. Just be cautious on hitting that tab/enter key.

Some additional thoughts:

• Useful for recurring properties like flex/grid and their related properties like align-items/grid-template-columns. However, productivity isn't significantly better than writing it yourself as it’s highly unlikely it’ll get it spot on without - again - the context of seeing the design.
• Copilot won’t catch cross browser compatibility issues. While Figma-generated CSS is exactly what you want the design to look like, it's worth noting that Figma CSS may not fully work with all browsers or will work but have performance bottlenecks. Looking at you, Safari on MacOS and iOS.

HTML & JS

It seems that code completion for HTML is generally better than it is for CSS, though the effectiveness varies depending on your tech stack. When it comes to plain HTML, stick with Emmet (or your IDE’s version of it), it’s so much faster and it gets all class name methodologies, css utilities/modifiers and attributes right the first time.

It truly shines with JS/TS and JSX/TSX, largely due to the extra steps these types require. Initially, I wouldn’t use it when setting up a JSX/TSX component, using abbreviated shorthand commands that come from great extensions to generate boilerplate can be faster for the initial setup than the time it takes to input a query, receive a response from Copilot, and accept that response.

However the part that it really excels at is when you’ve happily finished writing your components HTML-like syntax, adding the accompanying functions or states/hooks is a blast. When writing the JSDoc or a comment first, it will grab the context and more often than not can be spot on with the functionality, give or take a few odd values or misspelled variables it didn’t know you had already created. Writing JSDoc or comments always tend to be an afterthought that a developer tacks on when preparing a PR for review - here it’s pushing me to write this first so I do less later. Takes me back to writing JSDoc for Google’s closure compiler without the constant failing.

It’s worth noting that if you’re not providing context in comments/JSDoc first then setting up functions, it is more often wrong as it misses the execution you want and wastes time generating responses. If you’re not 100% sure about a library for example, it can take you down a rabbit hole which may be distracting for a junior developer.

Here are some other observations I've made:

• The suggestions for unordered lists can be wild in HTML and CSS. “Did you want extra list items or pseudo elements in your sandwich? No?”.

Recreating components from one tech library to another using ChatGPT

Using ChatGPT to recreate JavaScript components from one technology library to another can be a highly effective approach, particularly when dealing with animations. I like to scope around for new emerging libraries that I’ve not used before or not currently using in a tech stack and recreate those components in a sandbox or on Codepen to something I’m more familiar with. For instance, converting animations from AnimeJS to GSAP can be streamlined with the help of ChatGPT.

Below is an example of using ChatGPT to recreate a component from the Aceternity UI library (if you haven’t checked them out, highly recommend).The example converts AnimeJS and Tailwind to GSAP with plain HTML & CSS.

Background Beams

Multiple background beams that follow a path of SVG, makes a good hero section background.

(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/duup7948';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};if(document.readyState==='complete'){l();}else if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})(); !function(){try{var d=document.documentElement,c=d.classList;c.remove('light','dark');var e=localStorage.getItem('theme');if('system'===e||(!e&&true)){var t='(prefers-color-scheme: dark)',m=window.matchMedia(t);if(m.media!==t||m.matches){d.style.colorScheme = 'dark';c.add('dark')}else{d.style.colorScheme = 'light';c.add('light')}}else if(e){c.add(e|| '')}if(e==='light'||e==='dark')d.style.colorScheme=e}catch(e){}}() Aceternity UIComponentsTemplatesnewPricingDiscordTwitterToggle themeSearch Components⌘K[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}Follow for updatesTwitter @mannupaajiInstallationInstall Next.jsInstall Tailwind CSSAdd utilitiesCLIAll Components3D Card Effect3D PinAnimated ModalNewAnimated TooltipAurora BackgroundBackground BeamsBackground BoxesBackground GradientBento GridCanvas Reveal EffectCard Hover EffectCard StackContainer Scroll AnimationDirection Aware HoverEvervault CardExpandable CardNewFlip WordsFloating NavbarFollowing PointerGitHub GlobeGlare CardNewGlowing StarsGoogle Gemini EffectGradient AnimationGrid and Dot BackgroundsHero HighlightHero ParallaxHover Border GradientImages SliderInfinite Moving CardsLamp effectLayout GridLink PreviewMacbook ScrollMeteorsMoving BorderMulti Step LoaderNavbar MenuParallax ScrollPlaceholders And Vanish InputSidebarNewSignup FormSparklesSpotlightSticky Scroll RevealSVG Mask EffectTabsTailwind CSS buttonsText Generate EffectText Reveal CardTracing BeamTypewriter EffectVortexWavy BackgroundWobble CardMarketingCards3Feature sections3Background BeamsMultiple background beams that follow a path of SVG, makes a good hero section background.self.__wrap_n=self.__wrap_n||(self.CSS&&CSS.supports("text-wrap","balance")?1:2);self.__wrap_b=(e,t,r)=>{let n=(r=r||document.querySelector(`[data-br="${e}"]`)).parentElement,i=e=>r.style.maxWidth=e+"px";r.style.maxWidth="";let s=n.clientWidth,l=n.clientHeight,u=s/2-.25,o=s+.5,a;if(s){for(i(u),u=Math.max(r.scrollWidth,u);u+1<o;)i(a=Math.round((u+o)/2)),n.clientHeight===l?o=a:u=a;i(o*t+s*(1-t))}r.__wrap_o||"undefined"!=typeof ResizeObserver&&(r.__wrap_o=new ResizeObserver(()=>{self.__wrap_b(0,+r.dataset.brr,r)})).observe(n)};self.__wrap_n!=1&&self.__wrap_b(":Rjffaul5a:",1)cardbackgroundgradientspecialPreviewCodeJoin the waitlistWelcome to MailJet, the best transactional email service on the web. We provide reliable, scalable, and customizable email solutions for your business. Whether you're sending order confirmations, password reset emails, or promotional campaigns, MailJet has got you covered.InstallationCLIManualInstall dependenciesnpm i framer-motion clsx tailwind-mergeCopyAdd util filelib/utils.tsimport { ClassValue, clsx } from "clsx";import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs));}CopyAdd Tailwind CSS plugin for variable classestailwind.config.tsconst defaultTheme = require("tailwindcss/defaultTheme"); const colors = require("tailwindcss/colors");const { default: flattenColorPalette,} = require("tailwindcss/lib/util/flattenColorPalette"); /** @type {import('tailwindcss').Config} */module.exports = { content: ["./src/**/*.{ts,tsx}"], darkMode: "class", theme: { // rest of the code }, plugins: [addVariablesForColors],}; function addVariablesForColors({ addBase, theme }: any) { let allColors = flattenColorPalette(theme("colors")); let newVars = Object.fromEntries( Object.entries(allColors).map(([key, val]) => [`--${key}`, val]) ); addBase({ ":root": newVars, });}CopyCopy the source codecomponents/ui/background-beams.tsx"use client";import React from "react";import { motion } from "framer-motion";import { cn } from "@/lib/utils"; export const BackgroundBeams = React.memo( ({ className }: { className?: string }) => { const paths = [ "M-380 -189C-380 -189 -312 216 152 343C616 470 684 875 684 875", "M-373 -197C-373 -197 -305 208 159 335C623 462 691 867 691 867", "M-366 -205C-366 -205 -298 200 166 327C630 454 698 859 698 859", "M-359 -213C-359 -213 -291 192 173 319C637 446 705 851 705 851", "M-352 -221C-352 -221 -284 184 180 311C644 438 712 843 712 843", "M-345 -229C-345 -229 -277 176 187 303C651 430 719 835 719 835", "M-338 -237C-338 -237 -270 168 194 295C658 422 726 827 726 827", "M-331 -245C-331 -245 -263 160 201 287C665 414 733 819 733 819", "M-324 -253C-324 -253 -256 152 208 279C672 406 740 811 740 811", "M-317 -261C-317 -261 -249 144 215 271C679 398 747 803 747 803", "M-310 -269C-310 -269 -242 136 222 263C686 390 754 795 754 795", "M-303 -277C-303 -277 -235 128 229 255C693 382 761 787 761 787", "M-296 -285C-296 -285 -228 120 236 247C700 374 768 779 768 779", "M-289 -293C-289 -293 -221 112 243 239C707 366 775 771 775 771", "M-282 -301C-282 -301 -214 104 250 231C714 358 782 763 782 763", "M-275 -309C-275 -309 -207 96 257 223C721 350 789 755 789 755", "M-268 -317C-268 -317 -200 88 264 215C728 342 796 747 796 747", "M-261 -325C-261 -325 -193 80 271 207C735 334 803 739 803 739", "M-254 -333C-254 -333 -186 72 278 199C742 326 810 731 810 731", "M-247 -341C-247 -341 -179 64 285 191C749 318 817 723 817 723", "M-240 -349C-240 -349 -172 56 292 183C756 310 824 715 824 715", "M-233 -357C-233 -357 -165 48 299 175C763 302 831 707 831 707", "M-226 -365C-226 -365 -158 40 306 167C770 294 838 699 838 699", "M-219 -373C-219 -373 -151 32 313 159C777 286 845 691 845 691", "M-212 -381C-212 -381 -144 24 320 151C784 278 852 683 852 683", "M-205 -389C-205 -389 -137 16 327 143C791 270 859 675 859 675", "M-198 -397C-198 -397 -130 8 334 135C798 262 866 667 866 667", "M-191 -405C-191 -405 -123 0 341 127C805 254 873 659 873 659", "M-184 -413C-184 -413 -116 -8 348 119C812 246 880 651 880 651", "M-177 -421C-177 -421 -109 -16 355 111C819 238 887 643 887 643", "M-170 -429C-170 -429 -102 -24 362 103C826 230 894 635 894 635", "M-163 -437C-163 -437 -95 -32 369 95C833 222 901 627 901 627", "M-156 -445C-156 -445 -88 -40 376 87C840 214 908 619 908 619", "M-149 -453C-149 -453 -81 -48 383 79C847 206 915 611 915 611", "M-142 -461C-142 -461 -74 -56 390 71C854 198 922 603 922 603", "M-135 -469C-135 -469 -67 -64 397 63C861 190 929 595 929 595", "M-128 -477C-128 -477 -60 -72 404 55C868 182 936 587 936 587", "M-121 -485C-121 -485 -53 -80 411 47C875 174 943 579 943 579", "M-114 -493C-114 -493 -46 -88 418 39C882 166 950 571 950 571", "M-107 -501C-107 -501 -39 -96 425 31C889 158 957 563 957 563", "M-100 -509C-100 -509 -32 -104 432 23C896 150 964 555 964 555", "M-93 -517C-93 -517 -25 -112 439 15C903 142 971 547 971 547", "M-86 -525C-86 -525 -18 -120 446 7C910 134 978 539 978 539", "M-79 -533C-79 -533 -11 -128 453 -1C917 126 985 531 985 531", "M-72 -541C-72 -541 -4 -136 460 -9C924 118 992 523 992 523", "M-65 -549C-65 -549 3 -144 467 -17C931 110 999 515 999 515", "M-58 -557C-58 -557 10 -152 474 -25C938 102 1006 507 1006 507", "M-51 -565C-51 -565 17 -160 481 -33C945 94 1013 499 1013 499", "M-44 -573C-44 -573 24 -168 488 -41C952 86 1020 491 1020 491", "M-37 -581C-37 -581 31 -176 495 -49C959 78 1027 483 1027 483", ]; return ( <div className={cn( "absolute h-full w-full inset-0 [mask-size:40px] [mask-repeat:no-repeat] flex items-center justify-center", className )} > <svg className=" z-0 h-full w-full pointer-events-none absolute " width="100%" height="100%" viewBox="0 0 696 316" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M-380 -189C-380 -189 -312 216 152 343C616 470 684 875 684 875M-373 -197C-373 -197 -305 208 159 335C623 462 691 867 691 867M-366 -205C-366 -205 -298 200 166 327C630 454 698 859 698 859M-359 -213C-359 -213 -291 192 173 319C637 446 705 851 705 851M-352 -221C-352 -221 -284 184 180 311C644 438 712 843 712 843M-345 -229C-345 -229 -277 176 187 303C651 430 719 835 719 835M-338 -237C-338 -237 -270 168 194 295C658 422 726 827 726 827M-331 -245C-331 -245 -263 160 201 287C665 414 733 819 733 819M-324 -253C-324 -253 -256 152 208 279C672 406 740 811 740 811M-317 -261C-317 -261 -249 144 215 271C679 398 747 803 747 803M-310 -269C-310 -269 -242 136 222 263C686 390 754 795 754 795M-303 -277C-303 -277 -235 128 229 255C693 382 761 787 761 787M-296 -285C-296 -285 -228 120 236 247C700 374 768 779 768 779M-289 -293C-289 -293 -221 112 243 239C707 366 775 771 775 771M-282 -301C-282 -301 -214 104 250 231C714 358 782 763 782 763M-275 -309C-275 -309 -207 96 257 223C721 350 789 755 789 755M-268 -317C-268 -317 -200 88 264 215C728 342 796 747 796 747M-261 -325C-261 -325 -193 80 271 207C735 334 803 739 803 739M-254 -333C-254 -333 -186 72 278 199C742 326 810 731 810 731M-247 -341C-247 -341 -179 64 285 191C749 318 817 723 817 723M-240 -349C-240 -349 -172 56 292 183C756 310 824 715 824 715M-233 -357C-233 -357 -165 48 299 175C763 302 831 707 831 707M-226 -365C-226 -365 -158 40 306 167C770 294 838 699 838 699M-219 -373C-219 -373 -151 32 313 159C777 286 845 691 845 691M-212 -381C-212 -381 -144 24 320 151C784 278 852 683 852 683M-205 -389C-205 -389 -137 16 327 143C791 270 859 675 859 675M-198 -397C-198 -397 -130 8 334 135C798 262 866 667 866 667M-191 -405C-191 -405 -123 0 341 127C805 254 873 659 873 659M-184 -413C-184 -413 -116 -8 348 119C812 246 880 651 880 651M-177 -421C-177 -421 -109 -16 355 111C819 238 887 643 887 643M-170 -429C-170 -429 -102 -24 362 103C826 230 894 635 894 635M-163 -437C-163 -437 -95 -32 369 95C833 222 901 627 901 627M-156 -445C-156 -445 -88 -40 376 87C840 214 908 619 908 619M-149 -453C-149 -453 -81 -48 383 79C847 206 915 611 915 611M-142 -461C-142 -461 -74 -56 390 71C854 198 922 603 922 603M-135 -469C-135 -469 -67 -64 397 63C861 190 929 595 929 595M-128 -477C-128 -477 -60 -72 404 55C868 182 936 587 936 587M-121 -485C-121 -485 -53 -80 411 47C875 174 943 579 943 579M-114 -493C-114 -493 -46 -88 418 39C882 166 950 571 950 571M-107 -501C-107 -501 -39 -96 425 31C889 158 957 563 957 563M-100 -509C-100 -509 -32 -104 432 23C896 150 964 555 964 555M-93 -517C-93 -517 -25 -112 439 15C903 142 971 547 971 547M-86 -525C-86 -525 -18 -120 446 7C910 134 978 539 978 539M-79 -533C-79 -533 -11 -128 453 -1C917 126 985 531 985 531M-72 -541C-72 -541 -4 -136 460 -9C924 118 992 523 992 523M-65 -549C-65 -549 3 -144 467 -17C931 110 999 515 999 515M-58 -557C-58 -557 10 -152 474 -25C938 102 1006 507 1006 507M-51 -565C-51 -565 17 -160 481 -33C945 94 1013 499 1013 499M-44 -573C-44 -573 24 -168 488 -41C952 86 1020 491 1020 491M-37 -581C-37 -581 31 -176 495 -49C959 78 1027 483 1027 483M-30 -589C-30 -589 38 -184 502 -57C966 70 1034 475 1034 475M-23 -597C-23 -597 45 -192 509 -65C973 62 1041 467 1041 467M-16 -605C-16 -605 52 -200 516 -73C980 54 1048 459 1048 459M-9 -613C-9 -613 59 -208 523 -81C987 46 1055 451 1055 451M-2 -621C-2 -621 66 -216 530 -89C994 38 1062 443 1062 443M5 -629C5 -629 73 -224 537 -97C1001 30 1069 435 1069 435M12 -637C12 -637 80 -232 544 -105C1008 22 1076 427 1076 427M19 -645C19 -645 87 -240 551 -113C1015 14 1083 419 1083 419" stroke="url(#paint0_radial_242_278)" strokeOpacity="0.05" strokeWidth="0.5" ></path> {paths.map((path, index) => ( <motion.path key={`path-` + index} d={path} stroke={`url(#linearGradient-${index})`} strokeOpacity="0.4" strokeWidth="0.5" ></motion.path> ))} <defs> {paths.map((path, index) => ( <motion.linearGradient id={`linearGradient-${index}`} key={`gradient-${index}`} initial={{ x1: "0%", x2: "0%", y1: "0%", y2: "0%", }} animate={{ x1: ["0%", "100%"], x2: ["0%", "95%"], y1: ["0%", "100%"], y2: ["0%", `${93 + Math.random() * 8}%`], }} transition={{ duration: Math.random() * 10 + 10, ease: "easeInOut", repeat: Infinity, delay: Math.random() * 10, }} > <stop stopColor="#18CCFC" stopOpacity="0"></stop> <stop stopColor="#18CCFC"></stop> <stop offset="32.5%" stopColor="#6344F5"></stop> <stop offset="100%" stopColor="#AE48FF" stopOpacity="0"></stop> </motion.linearGradient> ))} <radialGradient id="paint0_radial_242_278" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(352 34) rotate(90) scale(555 1560.62)" > <stop offset="0.0666667" stopColor="var(--neutral-300)"></stop> <stop offset="0.243243" stopColor="var(--neutral-300)"></stop> <stop offset="0.43594" stopColor="white" stopOpacity="0"></stop> </radialGradient> </defs> </svg> </div> ); }); BackgroundBeams.displayName = "BackgroundBeams";CopyExpandPropsProp nameTypeDescriptionclassNamestringThe class name of the Background Beams component. Aceternity UIA product by AceternityBuilding in public at @mannupaajiPricingComponentsTemplatesCategoriesBlogBox ShadowsTwitterDiscord(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])self.__next_f.push([1,"1:HL[\"/_next/static/media/c9a5bc6a7c948fb0-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n2:HL[\"/_next/static/media/e11418ac562b8ac1-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n3:HL[\"/_next/static/css/67e111cfe08aedf0.css\",\"style\",{\"crossOrigin\":\"\"}]\n0:\"$L4\"\n"])self.__next_f.push([1,"5:HL[\"/_next/static/media/122c360d7fe6d395-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n6:HL[\"/_next/static/css/6b6b43a691930088.css\",\"style\",{\"crossOrigin\":\"\"}]\n"])self.__next_f.push([1,"7:I[47690,[],\"\"]\na:I[5613,[],\"\"]\nc:I[31778,[],\"\"]\nd:I[32302,[\"7895\",\"static/chunks/7895-fcd52de26680f886.js\",\"5250\",\"static/chunks/5250-b576df20f9ecedca.js\",\"2690\",\"static/chunks/2690-0ab0d0783f55dc75.js\",\"6447\",\"static/chunks/6447-ae975e329e21b198.js\",\"2686\",\"static/chunks/app/components/layout-38c738ac732dbd30.js\"],\"ScrollArea\"]\ne:I[45467,[\"7895\",\"static/chunks/7895-fcd52de26680f886.js\",\"5250\",\"static/chunks/5250-b576df20f9ecedca.js\",\"2690\",\"static/chunks/2690-0ab0d0783f55dc75.js\",\"6447\",\"static/chunks/64"])self.__next_f.push([1,"47-ae975e329e21b198.js\",\"2686\",\"static/chunks/app/components/layout-38c738ac732dbd30.js\"],\"DocsSidebarNav\"]\n11:I[48955,[],\"\"]\nb:[\"slug\",\"background-beams\",\"d\"]\n"])self.__next_f.push([1,"4:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/67e111cfe08aedf0.css\",\"precedence\":\"next\",\"crossOrigin\":\"\"}]],[\"$\",\"$L7\",null,{\"buildId\":\"iuH6UfiLDNWMGyM69cLJP\",\"assetPrefix\":\"\",\"initialCanonicalUrl\":\"/components/background-beams\",\"initialTree\":[\"\",{\"children\":[\"components\",{\"children\":[[\"slug\",\"background-beams\",\"d\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":\\\"background-beams\\\"}\",{}]}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"components\",{\"children\":[[\"slug\",\"background-beams\",\"d\"],{\"children\":[\"__PAGE__\",{},[\"$L8\",\"$L9\",null]]},[\"$\",\"$La\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"components\",\"children\",\"$b\",\"children\"],\"loading\":\"$undefined\",\"loadingStyles\":\"$undefined\",\"loadingScripts\":\"$undefined\",\"hasLoading\":false,\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lc\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/6b6b43a691930088.css\",\"precedence\":\"next\",\"crossOrigin\":\"\"}]]}]]},[null,[\"$\",\"div\",null,{\"className\":\" bg-white dark:bg-brand pt-20\",\"children\":[\"$\",\"div\",null,{\"className\":\"container flex-1 items-start lg:grid lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10\",\"children\":[[\"$\",\"aside\",null,{\"className\":\"fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 lg:sticky lg:block lg:self-start\",\"children\":[\"$\",\"$Ld\",null,{\"className\":\"h-full py-6 pr-6 lg:py-8 \",\"children\":[\"$\",\"$Le\",null,{\"items\":[{\"title\":\"Follow for updates\",\"items\":[{\"title\":\"Twitter @mannupaaji\",\"href\":\"https://twitter.com/mannupaaji\",\"items\":[]}]},{\"title\":\"Installation\",\"items\":[{\"title\":\"Install Next.js\",\"href\":\"/docs/install-nextjs\",\"items\":[]},{\"title\":\"Install Tailwind CSS\",\"href\":\"/docs/install-tailwindcss\",\"items\":[]},{\"title\":\"Add utilities\",\"href\":\"/docs/add-utilities\",\"items\":[]},{\"title\":\"CLI\",\"href\":\"/docs/cli\",\"items\":[]}]},{\"title\":\"All Components\",\"items\":[{\"title\":\"3D Card Effect\",\"href\":\"/components/3d-card-effect\",\"items\":[]},{\"title\":\"3D Pin\",\"href\":\"/components/3d-pin\",\"items\":[]},{\"title\":\"Animated Modal\",\"href\":\"/components/animated-modal\",\"items\":[],\"label\":\"New\"},{\"title\":\"Animated Tooltip\",\"href\":\"/components/animated-tooltip\",\"items\":[]},{\"title\":\"Aurora Background\",\"href\":\"/components/aurora-background\",\"items\":[]},{\"title\":\"Background Beams\",\"href\":\"/components/background-beams\",\"items\":[]},{\"title\":\"Background Boxes\",\"href\":\"/components/background-boxes\",\"items\":[]},{\"title\":\"Background Gradient\",\"href\":\"/components/background-gradient\",\"items\":[]},{\"title\":\"Bento Grid\",\"href\":\"/components/bento-grid\",\"items\":[]},{\"title\":\"Canvas Reveal Effect\",\"href\":\"/components/canvas-reveal-effect\",\"items\":[]},{\"title\":\"Card Hover Effect\",\"href\":\"/components/card-hover-effect\",\"items\":[]},{\"title\":\"Card Stack\",\"href\":\"/components/card-stack\",\"items\":[]},{\"title\":\"Container Scroll Animation\",\"href\":\"/components/container-scroll-animation\",\"items\":[]},{\"title\":\"Direction Aware Hover\",\"href\":\"/components/direction-aware-hover\",\"items\":[]},{\"title\":\"Evervault Card\",\"href\":\"/components/evervault-card\",\"items\":[]},{\"title\":\"Expandable Card\",\"href\":\"/components/expandable-card\",\"items\":[],\"label\":\"New\"},{\"title\":\"Flip Words\",\"href\":\"/components/flip-words\",\"items\":[]},{\"title\":\"Floating Navbar\",\"href\":\"/components/floating-navbar\",\"items\":[]},{\"title\":\"Following Pointer\",\"href\":\"/components/following-pointer\",\"items\":[]},{\"title\":\"GitHub Globe\",\"href\":\"/components/github-globe\",\"items\":[]},{\"title\":\"Glare Card\",\"href\":\"/components/glare-card\",\"items\":[],\"label\":\"New\"},{\"title\":\"Glowing Stars\",\"href\":\"/components/glowing-stars-effect\",\"items\":[]},{\"title\":\"Google Gemini Effect\",\"href\":\"/components/google-gemini-effect\",\"items\":[]},{\"title\":\"Gradient Animation\",\"href\":\"/components/background-gradient-animation\",\"items\":[]},{\"title\":\"Grid and Dot Backgrounds\",\"href\":\"/components/grid-and-dot-backgrounds\",\"items\":[]},{\"title\":\"Hero Highlight\",\"href\":\"/components/hero-highlight\",\"items\":[]},{\"title\":\"Hero Parallax\",\"href\":\"/components/hero-parallax\",\"items\":[]},{\"title\":\"Hover Border Gradient\",\"href\":\"/components/hover-border-gradient\",\"items\":[]},{\"title\":\"Images Slider\",\"href\":\"/components/images-slider\",\"items\":[]},{\"title\":\"Infinite Moving Cards\",\"href\":\"/components/infinite-moving-cards\",\"items\":[]},{\"title\":\"Lamp effect\",\"href\":\"/components/lamp-effect\",\"items\":[]},{\"title\":\"Layout Grid\",\"href\":\"/components/layout-grid\",\"items\":[]},{\"title\":\"Link Preview\",\"href\":\"/components/link-preview\",\"items\":[]},{\"title\":\"Macbook Scroll\",\"href\":\"/components/macbook-scroll\",\"items\":[]},{\"title\":\"Meteors\",\"href\":\"/components/meteors\",\"items\":[]},{\"title\":\"Moving Border\",\"href\":\"/components/moving-border\",\"items\":[]},{\"title\":\"Multi Step Loader\",\"href\":\"/components/multi-step-loader\",\"items\":[]},{\"title\":\"Navbar Menu\",\"href\":\"/components/navbar-menu\",\"items\":[]},{\"title\":\"Parallax Scroll\",\"href\":\"/components/parallax-scroll\",\"items\":[]},{\"title\":\"Placeholders And Vanish Input\",\"href\":\"/components/placeholders-and-vanish-input\",\"items\":[]},{\"title\":\"Sidebar\",\"href\":\"/components/sidebar\",\"items\":[],\"label\":\"New\"},{\"title\":\"Signup Form\",\"href\":\"/components/signup-form\",\"items\":[]},{\"title\":\"Sparkles\",\"href\":\"/components/sparkles\",\"items\":[]},{\"title\":\"Spotlight\",\"href\":\"/components/spotlight\",\"items\":[]},{\"title\":\"Sticky Scroll Reveal\",\"href\":\"/components/sticky-scroll-reveal\",\"items\":[]},{\"title\":\"SVG Mask Effect\",\"href\":\"/components/svg-mask-effect\",\"items\":[]},{\"title\":\"Tabs\",\"href\":\"/components/tabs\",\"items\":[]},{\"title\":\"Tailwind CSS buttons\",\"href\":\"/components/tailwindcss-buttons\",\"items\":[]},{\"title\":\"Text Generate Effect\",\"href\":\"/components/text-generate-effect\",\"items\":[]},{\"title\":\"Text Reveal Card\",\"href\":\"/components/text-reveal-card\",\"items\":[]},{\"title\":\"Tracing Beam\",\"href\":\"/components/tracing-beam\",\"items\":[]},{\"title\":\"Typewriter Effect\",\"href\":\"/components/typewriter-effect\",\"items\":[]},{\"title\":\"Vortex\",\"href\":\"/components/vortex\",\"items\":[]},{\"title\":\"Wavy Background\",\"href\":\"/components/wavy-background\",\"items\":[]},{\"title\":\"Wobble Card\",\"href\":\"/components/wobble-card\",\"items\":[]}]},{\"title\":\"Marketing\",\"items\":[{\"title\":\"Cards\",\"href\":\"/components/cards\",\"items\":[],\"badge\":\"3\"},{\"title\":\"Feature sections\",\"href\":\"/components/feature-sections\",\"items\":[],\"badge\":\"3\"}]}]}]}]}],[\"$\",\"$La\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"components\",\"children\"],\"loading\":\"$undefined\",\"loadingStyles\":\"$undefined\",\"loadingScripts\":\"$undefined\",\"hasLoading\":false,\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lc\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}]]}]}],null]]},[null,\"$Lf\",null]],\"initialHead\":[false,\"$L10\"],\"globalErrorComponent\":\"$11\"}]]\n"])self.__next_f.push([1,"12:I[77279,[\"6115\",\"static/chunks/8dc5345f-7c0cf51404ce5c83.js\",\"8310\",\"static/chunks/0e5ce63c-1571cb7fe04f565a.js\",\"7895\",\"static/chunks/7895-fcd52de26680f886.js\",\"5250\",\"static/chunks/5250-b576df20f9ecedca.js\",\"2255\",\"static/chunks/2255-574587277be16c13.js\",\"6691\",\"static/chunks/6691-3643fde9a53a3b64.js\",\"2690\",\"static/chunks/2690-0ab0d0783f55dc75.js\",\"7106\",\"static/chunks/7106-71a563599bfa5483.js\",\"6653\",\"static/chunks/6653-ebf8bb3ce1899584.js\",\"2791\",\"static/chunks/2791-7e4a53a19f9d17a6.js\",\"1424\",\"static/chunks/1424-d724e09ff7e0aa5f.js\",\"3649\",\"static/chunks/3649-a7b35ecf47a0263a.js\",\"2235\",\"static/chunks/2235-c91b6c9e3c9fcd60.js\",\"8226\",\"static/chunks/8226-58a16fab4276c086.js\",\"4067\",\"static/chunks/4067-c82acd005c5a407d.js\",\"7858\",\"static/chunks/app/components/%5Bslug%5D/page-6f3d015f6a7eb41c.js\"],\"\"]\n"])self.__next_f.push([1,"13:I[25250,[\"6115\",\"static/chunks/8dc5345f-7c0cf51404ce5c83.js\",\"8310\",\"static/chunks/0e5ce63c-1571cb7fe04f565a.js\",\"7895\",\"static/chunks/7895-fcd52de26680f886.js\",\"5250\",\"static/chunks/5250-b576df20f9ecedca.js\",\"2255\",\"static/chunks/2255-574587277be16c13.js\",\"6691\",\"static/chunks/6691-3643fde9a53a3b64.js\",\"2690\",\"static/chunks/2690-0ab0d0783f55dc75.js\",\"7106\",\"static/chunks/7106-71a563599bfa5483.js\",\"6653\",\"static/chunks/6653-ebf8bb3ce1899584.js\",\"2791\",\"static/chunks/2791-7e4a53a19f9d17a6.js\",\"1424\",\"static/chunks/1424-d724e09ff7e0aa5f.js\",\"3649\",\"static/chunks/3649-a7b35ecf47a0263a.js\",\"2235\",\"static/chunks/2235-c91b6c9e3c9fcd60.js\",\"8226\",\"static/chunks/8226-58a16fab4276c086.js\",\"4067\",\"static/chunks/4067-c82acd005c5a407d.js\",\"7858\",\"static/chunks/app/components/%5Bslug%5D/page-6f3d015f6a7eb41c.js\"],\"\"]\n"])self.__next_f.push([1,"14:I[22171,[\"6115\",\"static/chunks/8dc5345f-7c0cf51404ce5c83.js\",\"8310\",\"static/chunks/0e5ce63c-1571cb7fe04f565a.js\",\"7895\",\"static/chunks/7895-fcd52de26680f886.js\",\"5250\",\"static/chunks/5250-b576df20f9ecedca.js\",\"2255\",\"static/chunks/2255-574587277be16c13.js\",\"6691\",\"static/chunks/6691-3643fde9a53a3b64.js\",\"2690\",\"static/chunks/2690-0ab0d0783f55dc75.js\",\"7106\",\"static/chunks/7106-71a563599bfa5483.js\",\"6653\",\"static/chunks/6653-ebf8bb3ce1899584.js\",\"2791\",\"static/chunks/2791-7e4a53a19f9d17a6.js\",\"1424\",\"static/chunks/1424-d724e09ff7e0aa5f.js\",\"3649\",\"static/chunks/3649-a7b35ecf47a0263a.js\",\"2235\",\"static/chunks/2235-c91b6c9e3c9fcd60.js\",\"8226\",\"static/chunks/8226-58a16fab4276c086.js\",\"4067\",\"static/chunks/4067-c82acd005c5a407d.js\",\"7858\",\"static/chunks/app/components/%5Bslug%5D/page-6f3d015f6a7eb41c.js\"],\"ComponentPreview\"]\n"])self.__next_f.push([1,"15:I[21928,[\"6115\",\"static/chunks/8dc5345f-7c0cf51404ce5c83.js\",\"8310\",\"static/chunks/0e5ce63c-1571cb7fe04f565a.js\",\"7895\",\"static/chunks/7895-fcd52de26680f886.js\",\"5250\",\"static/chunks/5250-b576df20f9ecedca.js\",\"2255\",\"static/chunks/2255-574587277be16c13.js\",\"6691\",\"static/chunks/6691-3643fde9a53a3b64.js\",\"2690\",\"static/chunks/2690-0ab0d0783f55dc75.js\",\"7106\",\"static/chunks/7106-71a563599bfa5483.js\",\"6653\",\"static/chunks/6653-ebf8bb3ce1899584.js\",\"2791\",\"static/chunks/2791-7e4a53a19f9d17a6.js\",\"1424\",\"static/chunks/1424-d724e09ff7e0aa5f.js\",\"3649\",\"static/chunks/3649-a7b35ecf47a0263a.js\",\"2235\",\"static/chunks/2235-c91b6c9e3c9fcd60.js\",\"8226\",\"static/chunks/8226-58a16fab4276c086.js\",\"4067\",\"static/chunks/4067-c82acd005c5a407d.js\",\"7858\",\"static/chunks/app/components/%5Bslug%5D/page-6f3d015f6a7eb41c.js\"],\"StyleWrapper\"]\n"])self.__next_f.push([1,"16:I[23546,[\"6115\",\"static/chunks/8dc5345f-7c0cf51404ce5c83.js\",\"8310\",\"static/chunks/0e5ce63c-1571cb7fe04f565a.js\",\"7895\",\"static/chunks/7895-fcd52de26680f886.js\",\"5250\",\"static/chunks/5250-b576df20f9ecedca.js\",\"2255\",\"static/chunks/2255-574587277be16c13.js\",\"6691\",\"static/chunks/6691-3643fde9a53a3b64.js\",\"2690\",\"static/chunks/2690-0ab0d0783f55dc75.js\",\"7106\",\"static/chunks/7106-71a563599bfa5483.js\",\"6653\",\"static/chunks/6653-ebf8bb3ce1899584.js\",\"2791\",\"static/chunks/2791-7e4a53a19f9d17a6.js\",\"1424\",\"static/chunks/1424-d724e09ff7e0aa5f.js\",\"3649\",\"static/chunks/3649-a7b35ecf47a0263a.js\",\"2235\",\"static/chunks/2235-c91b6c9e3c9fcd60.js\",\"8226\",\"static/chunks/8226-58a16fab4276c086.js\",\"4067\",\"static/chunks/4067-c82acd005c5a407d.js\",\"7858\",\"static/chunks/app/components/%5Bslug%5D/page-6f3d015f6a7eb41c.js\"],\"CopyButton\"]\n"])self.__next_f.push([1,"18:I[99497,[\"6115\",\"static/chunks/8dc5345f-7c0cf51404ce5c83.js\",\"8310\",\"static/chunks/0e5ce63c-1571cb7fe04f565a.js\",\"7895\",\"static/chunks/7895-fcd52de26680f886.js\",\"5250\",\"static/chunks/5250-b576df20f9ecedca.js\",\"2255\",\"static/chunks/2255-574587277be16c13.js\",\"6691\",\"static/chunks/6691-3643fde9a53a3b64.js\",\"2690\",\"static/chunks/2690-0ab0d0783f55dc75.js\",\"7106\",\"static/chunks/7106-71a563599bfa5483.js\",\"6653\",\"static/chunks/6653-ebf8bb3ce1899584.js\",\"2791\",\"static/chunks/2791-7e4a53a19f9d17a6.js\",\"1424\",\"static/chunks/1424-d724e09ff7e0aa5f.js\",\"3649\",\"static/chunks/3649-a7b35ecf47a0263a.js\",\"2235\",\"static/chunks/2235-c91b6c9e3c9fcd60.js\",\"8226\",\"static/chunks/8226-58a16fab4276c086.js\",\"4067\",\"static/chunks/4067-c82acd005c5a407d.js\",\"7858\",\"static/chunks/app/components/%5Bslug%5D/page-6f3d015f6a7eb41c.js\"],\"Tabs\"]\n"])self.__next_f.push([1,"19:I[99497,[\"6115\",\"static/chunks/8dc5345f-7c0cf51404ce5c83.js\",\"8310\",\"static/chunks/0e5ce63c-1571cb7fe04f565a.js\",\"7895\",\"static/chunks/7895-fcd52de26680f886.js\",\"5250\",\"static/chunks/5250-b576df20f9ecedca.js\",\"2255\",\"static/chunks/2255-574587277be16c13.js\",\"6691\",\"static/chunks/6691-3643fde9a53a3b64.js\",\"2690\",\"static/chunks/2690-0ab0d0783f55dc75.js\",\"7106\",\"static/chunks/7106-71a563599bfa5483.js\",\"6653\",\"static/chunks/6653-ebf8bb3ce1899584.js\",\"2791\",\"static/chunks/2791-7e4a53a19f9d17a6.js\",\"1424\",\"static/chunks/1424-d724e09ff7e0aa5f.js\",\"3649\",\"static/chunks/3649-a7b35ecf47a0263a.js\",\"2235\",\"static/chunks/2235-c91b6c9e3c9fcd60.js\",\"8226\",\"static/chunks/8226-58a16fab4276c086.js\",\"4067\",\"static/chunks/4067-c82acd005c5a407d.js\",\"7858\",\"static/chunks/app/components/%5Bslug%5D/page-6f3d015f6a7eb41c.js\"],\"TabsList\"]\n"])self.__next_f.push([1,"1a:I[99497,[\"6115\",\"static/chunks/8dc5345f-7c0cf51404ce5c83.js\",\"8310\",\"static/chunks/0e5ce63c-1571cb7fe04f565a.js\",\"7895\",\"static/chunks/7895-fcd52de26680f886.js\",\"5250\",\"static/chunks/5250-b576df20f9ecedca.js\",\"2255\",\"static/chunks/2255-574587277be16c13.js\",\"6691\",\"static/chunks/6691-3643fde9a53a3b64.js\",\"2690\",\"static/chunks/2690-0ab0d0783f55dc75.js\",\"7106\",\"static/chunks/7106-71a563599bfa5483.js\",\"6653\",\"static/chunks/6653-ebf8bb3ce1899584.js\",\"2791\",\"static/chunks/2791-7e4a53a19f9d17a6.js\",\"1424\",\"static/chunks/1424-d724e09ff7e0aa5f.js\",\"3649\",\"static/chunks/3649-a7b35ecf47a0263a.js\",\"2235\",\"static/chunks/2235-c91b6c9e3c9fcd60.js\",\"8226\",\"static/chunks/8226-58a16fab4276c086.js\",\"4067\",\"static/chunks/4067-c82acd005c5a407d.js\",\"7858\",\"static/chunks/app/components/%5Bslug%5D/page-6f3d015f6a7eb41c.js\"],\"TabsTrigger\"]\n"])self.__next_f.push([1,"1b:I[99497,[\"6115\",\"static/chunks/8dc5345f-7c0cf51404ce5c83.js\",\"8310\",\"static/chunks/0e5ce63c-1571cb7fe04f565a.js\",\"7895\",\"static/chunks/7895-fcd52de26680f886.js\",\"5250\",\"static/chunks/5250-b576df20f9ecedca.js\",\"2255\",\"static/chunks/2255-574587277be16c13.js\",\"6691\",\"static/chunks/6691-3643fde9a53a3b64.js\",\"2690\",\"static/chunks/2690-0ab0d0783f55dc75.js\",\"7106\",\"static/chunks/7106-71a563599bfa5483.js\",\"6653\",\"static/chunks/6653-ebf8bb3ce1899584.js\",\"2791\",\"static/chunks/2791-7e4a53a19f9d17a6.js\",\"1424\",\"static/chunks/1424-d724e09ff7e0aa5f.js\",\"3649\",\"static/chunks/3649-a7b35ecf47a0263a.js\",\"2235\",\"static/chunks/2235-c91b6c9e3c9fcd60.js\",\"8226\",\"static/chunks/8226-58a16fab4276c086.js\",\"4067\",\"static/chunks/4067-c82acd005c5a407d.js\",\"7858\",\"static/chunks/app/components/%5Bslug%5D/page-6f3d015f6a7eb41c.js\"],\"TabsContent\"]\n"])self.__next_f.push([1,"1c:I[23546,[\"6115\",\"static/chunks/8dc5345f-7c0cf51404ce5c83.js\",\"8310\",\"static/chunks/0e5ce63c-1571cb7fe04f565a.js\",\"7895\",\"static/chunks/7895-fcd52de26680f886.js\",\"5250\",\"static/chunks/5250-b576df20f9ecedca.js\",\"2255\",\"static/chunks/2255-574587277be16c13.js\",\"6691\",\"static/chunks/6691-3643fde9a53a3b64.js\",\"2690\",\"static/chunks/2690-0ab0d0783f55dc75.js\",\"7106\",\"static/chunks/7106-71a563599bfa5483.js\",\"6653\",\"static/chunks/6653-ebf8bb3ce1899584.js\",\"2791\",\"static/chunks/2791-7e4a53a19f9d17a6.js\",\"1424\",\"static/chunks/1424-d724e09ff7e0aa5f.js\",\"3649\",\"static/chunks/3649-a7b35ecf47a0263a.js\",\"2235\",\"static/chunks/2235-c91b6c9e3c9fcd60.js\",\"8226\",\"static/chunks/8226-58a16fab4276c086.js\",\"4067\",\"static/chunks/4067-c82acd005c5a407d.js\",\"7858\",\"static/chunks/app/components/%5Bslug%5D/page-6f3d015f6a7eb41c.js\"],\"CopyNpmCommandButton\"]\n"])self.__next_f.push([1,"1e:I[69020,[\"2400\",\"static/chunks/12038df7-5e1a9cb2eb03676e.js\",\"7895\",\"static/chunks/7895-fcd52de26680f886.js\",\"5250\",\"static/chunks/5250-b576df20f9ecedca.js\",\"2255\",\"static/chunks/2255-574587277be16c13.js\",\"6691\",\"static/chunks/6691-3643fde9a53a3b64.js\",\"2690\",\"static/chunks/2690-0ab0d0783f55dc75.js\",\"6653\",\"static/chunks/6653-ebf8bb3ce1899584.js\",\"4953\",\"static/chunks/4953-c79c69f17011d0ca.js\",\"3185\",\"static/chunks/app/layout-008cb20813097fc7.js\"],\"InitIntercom\"]\n1f:I[30078,[\"2400\",\"static/chunks/12038df"])self.__next_f.push([1,"7-5e1a9cb2eb03676e.js\",\"7895\",\"static/chunks/7895-fcd52de26680f886.js\",\"5250\",\"static/chunks/5250-b576df20f9ecedca.js\",\"2255\",\"static/chunks/2255-574587277be16c13.js\",\"6691\",\"static/chunks/6691-3643fde9a53a3b64.js\",\"2690\",\"static/chunks/2690-0ab0d0783f55dc75.js\",\"6653\",\"static/chunks/6653-ebf8bb3ce1899584.js\",\"4953\",\"static/chunks/4953-c79c69f17011d0ca.js\",\"3185\",\"static/chunks/app/layout-008cb20813097fc7.js\"],\"ThemeProvider\"]\n20:I[33488,[\"2400\",\"static/chunks/12038df7-5e1a9cb2eb03676e.js\",\"7895\",\"static/ch"])self.__next_f.push([1,"unks/7895-fcd52de26680f886.js\",\"5250\",\"static/chunks/5250-b576df20f9ecedca.js\",\"2255\",\"static/chunks/2255-574587277be16c13.js\",\"6691\",\"static/chunks/6691-3643fde9a53a3b64.js\",\"2690\",\"static/chunks/2690-0ab0d0783f55dc75.js\",\"6653\",\"static/chunks/6653-ebf8bb3ce1899584.js\",\"4953\",\"static/chunks/4953-c79c69f17011d0ca.js\",\"3185\",\"static/chunks/app/layout-008cb20813097fc7.js\"],\"\"]\n"])self.__next_f.push([1,"21:I[81749,[\"6115\",\"static/chunks/8dc5345f-7c0cf51404ce5c83.js\",\"8310\",\"static/chunks/0e5ce63c-1571cb7fe04f565a.js\",\"7895\",\"static/chunks/7895-fcd52de26680f886.js\",\"5250\",\"static/chunks/5250-b576df20f9ecedca.js\",\"2255\",\"static/chunks/2255-574587277be16c13.js\",\"6691\",\"static/chunks/6691-3643fde9a53a3b64.js\",\"2690\",\"static/chunks/2690-0ab0d0783f55dc75.js\",\"7106\",\"static/chunks/7106-71a563599bfa5483.js\",\"6653\",\"static/chunks/6653-ebf8bb3ce1899584.js\",\"2791\",\"static/chunks/2791-7e4a53a19f9d17a6.js\",\"1424\",\"static/chunks/1424-d724e09ff7e0aa5f.js\",\"3649\",\"static/chunks/3649-a7b35ecf47a0263a.js\",\"2235\",\"static/chunks/2235-c91b6c9e3c9fcd60.js\",\"8226\",\"static/chunks/8226-58a16fab4276c086.js\",\"4067\",\"static/chunks/4067-c82acd005c5a407d.js\",\"7858\",\"static/chunks/app/components/%5Bslug%5D/page-6f3d015f6a7eb41c.js\"],\"Image\"]\n"])self.__next_f.push([1,"22:I[69657,[\"2400\",\"static/chunks/12038df7-5e1a9cb2eb03676e.js\",\"7895\",\"static/chunks/7895-fcd52de26680f886.js\",\"5250\",\"static/chunks/5250-b576df20f9ecedca.js\",\"2255\",\"static/chunks/2255-574587277be16c13.js\",\"6691\",\"static/chunks/6691-3643fde9a53a3b64.js\",\"2690\",\"static/chunks/2690-0ab0d0783f55dc75.js\",\"6653\",\"static/chunks/6653-ebf8bb3ce1899584.js\",\"4953\",\"static/chunks/4953-c79c69f17011d0ca.js\",\"3185\",\"static/chunks/app/layout-008cb20813097fc7.js\"],\"Toaster\"]\n17:T517,"])self.__next_f.push([1,"\"use client\";\nimport React from \"react\";\nimport { BackgroundBeams } from \"../ui/background-beams\";\n\nexport function BackgroundBeamsDemo() {\n return (\n \u003cdiv className=\"h-[40rem] w-full rounded-md bg-neutral-950 relative flex flex-col items-center justify-center antialiased\"\u003e\n \u003cdiv className=\"max-w-2xl mx-auto p-4\"\u003e\n \u003ch1 className=\"relative z-10 text-lg md:text-7xl bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-600 text-center font-sans font-bold\"\u003e\n Join the waitlist\n \u003c/h1\u003e\n \u003cp\u003e\u003c/p\u003e\n \u003cp className=\"text-neutral-500 max-w-lg mx-auto my-2 text-sm text-center relative z-10\"\u003e\n Welcome to MailJet, the best transactional email service on the web.\n We provide reliable, scalable, and customizable email solutions for\n your business. Whether you\u0026apos;re sending order confirmations,\n password reset emails, or promotional campaigns, MailJet has got you\n covered.\n \u003c/p\u003e\n \u003cinput\n type=\"text\"\n placeholder=\"hi@manuarora.in\"\n className=\"rounded-lg border border-neutral-800 focus:ring-2 focus:ring-teal-500 w-full relative z-10 mt-4 bg-neutral-950 placeholder:text-neutral-700\"\n /\u003e\n \u003c/div\u003e\n \u003cBackgroundBeams /\u003e\n \u003c/div\u003e\n );\n}\n"])self.__next_f.push([1,"9:[\"$\",\"main\",null,{\"className\":\"relative py-6 lg:gap-10 lg:py-8\",\"children\":[\"$\",\"div\",null,{\"className\":\"mx-auto w-full min-w-0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"space-y-2\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"scroll-m-20 text-4xl font-bold tracking-tight text-black dark:text-white\",\"children\":\"Background Beams\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-muted-foreground\",\"children\":[\"$\",\"$L12\",null,{\"children\":\"Multiple background beams that follow a path of SVG, makes a good hero section background.\"}]}],[\"$\",\"div\",null,{\"className\":\"flex gap-2 flex-wrap\",\"children\":[[\"$\",\"$L13\",\"card0\",{\"href\":\"/categories/card\",\"className\":\" bg-neutral-50 text-neutral-700 dark:text-zinc-300 dark:bg-zinc-900 dark:border-zinc-800 border border-neutral-100 text-xs px-1 py-0.5 rounded-md capitalize\",\"children\":\"card\"}],[\"$\",\"$L13\",\"background1\",{\"href\":\"/categories/background\",\"className\":\" bg-neutral-50 text-neutral-700 dark:text-zinc-300 dark:bg-zinc-900 dark:border-zinc-800 border border-neutral-100 text-xs px-1 py-0.5 rounded-md capitalize\",\"children\":\"background\"}],[\"$\",\"$L13\",\"gradient2\",{\"href\":\"/categories/gradient\",\"className\":\" bg-neutral-50 text-neutral-700 dark:text-zinc-300 dark:bg-zinc-900 dark:border-zinc-800 border border-neutral-100 text-xs px-1 py-0.5 rounded-md capitalize\",\"children\":\"gradient\"}],[\"$\",\"$L13\",\"special3\",{\"href\":\"/categories/special\",\"className\":\" bg-neutral-50 text-neutral-700 dark:text-zinc-300 dark:bg-zinc-900 dark:border-zinc-800 border border-neutral-100 text-xs px-1 py-0.5 rounded-md capitalize\",\"children\":\"special\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"pb-12 pt-8\",\"children\":[\"$\",\"div\",null,{\"className\":\"mdx\",\"children\":[[\"$\",\"$L14\",null,{\"name\":\"background-beams-demo\",\"className\":\"[\u0026_.preview\u003e[data-orientation=vertical]]:sm:max-w-[70%]\",\"children\":[\"$\",\"div\",null,{\"data-rehype-pretty-code-fragment\":\"\",\"children\":[\"$\",\"$L15\",null,{\"styleName\":\"$undefined\",\"children\":[[\"$\",\"pre\",null,{\"className\":\"mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-[#1C2433] py-4 dark:bg-zinc-900\",\"data-language\":\"tsx\",\"data-theme\":\"default\",\"children\":[\"$\",\"code\",null,{\"className\":\"relative rounded bg-muted px-[0.3rem] py-[0.2rem] text-sm dark:text-neutral-200 __className_6dcaa2\",\"data-language\":\"tsx\",\"data-theme\":\"default\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"use client\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\";\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"import\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"React\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"from\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"react\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\";\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"import\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"{\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"BackgroundBeams\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"}\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"from\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"../ui/background-beams\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\";\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#22ECDB\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" BackgroundBeamsDemo\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"()\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"{\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"return\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"(\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"div \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"className\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"h-[40rem] w-full rounded-md bg-neutral-950 relative flex flex-col items-center justify-center antialiased\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"div\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"className\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"max-w-2xl mx-auto p-4\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"h1\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"className\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"relative z-10 text-lg md:text-7xl bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-600 text-center font-sans font-bold\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" Join the waitlist\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"h1\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"p\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"p\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"p\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"className\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"text-neutral-500 max-w-lg mx-auto my-2 text-sm text-center relative z-10\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" Welcome to MailJet, the best transactional email service on the web.\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" We provide reliable, scalable, and customizable email solutions for\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" your business. Whether you\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"\u0026\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#E35535\"},\"children\":\"apos\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\";\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\"re sending order confirmations,\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" password reset emails, or promotional campaigns, MailJet has got you\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" covered.\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"p\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"input\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"type\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"text\\\"\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"placeholder\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"hi@manuarora.in\\\"\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"className\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"rounded-lg border border-neutral-800 focus:ring-2 focus:ring-teal-500 w-full relative z-10 mt-4 bg-neutral-950 placeholder:text-neutral-700\\\"\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"/\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"div\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B78AFF\"},\"children\":\"BackgroundBeams\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"/\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"div\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\");\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"}\"}]}]]}]}],[\"$\",\"$L16\",null,{\"value\":\"$17\",\"src\":\"src/registry/default/example/background-beams-demo.tsx\",\"event\":\"$undefined\",\"className\":\"absolute right-4 top-4\"}],\"$undefined\"]}]}]}],\"\\n\",[\"$\",\"h2\",null,{\"className\":\"font-heading mt-12 scroll-m-20 pb-2 text-2xl font-semibold tracking-tight first:mt-0 text-black dark:text-white\",\"id\":\"installation\",\"children\":[[\"$\",\"a\",null,{\"className\":\"font-medium underline underline-offset-4 subheading-anchor\",\"aria-label\":\"Link to section\",\"href\":\"#installation\",\"children\":[\"$\",\"span\",null,{\"className\":\"icon icon-link\"}]}],\"Installation\"]}],\"\\n\",[\"$\",\"$L18\",null,{\"className\":\"relative mt-6 w-full\",\"defaultValue\":\"manual\",\"children\":[[\"$\",\"$L19\",null,{\"className\":\"w-full justify-start rounded-none border-b bg-transparent p-0\",\"children\":[[\"$\",\"$L1a\",null,{\"className\":\"relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none\",\"value\":\"cli\",\"children\":\"CLI\"}],[\"$\",\"$L1a\",null,{\"className\":\"relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none\",\"value\":\"manual\",\"children\":\"Manual\"}]]}],[\"$\",\"$L1b\",null,{\"className\":\"relative [\u0026_h3.font-heading]:text-base [\u0026_h3.font-heading]:font-semibold\",\"value\":\"cli\",\"children\":[\"$\",\"div\",null,{\"className\":\"[\u0026\u003eh3]:step steps mb-12 ml-4 border-l pl-8 [counter-reset:step]\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-heading relative mt-8 scroll-m-20 text-xl font-semibold tracking-tight text-black dark:text-neutral-200\",\"children\":[[\"$\",\"span\",null,{\"className\":\"absolute block -left-8 rounded-tr-full rounded-br-full top-0 z-20 h-full bg-neutral-200 dark:bg-neutral-700 w-[6px]\"}],\"Run the following command\"]}],[\"$\",\"div\",null,{\"data-rehype-pretty-code-fragment\":\"\",\"children\":[\"$\",\"$L15\",null,{\"styleName\":\"$undefined\",\"children\":[[\"$\",\"pre\",null,{\"className\":\"mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-[#1C2433] py-4 dark:bg-zinc-900\",\"data-language\":\"bash\",\"data-theme\":\"default\",\"children\":[\"$\",\"code\",null,{\"className\":\"relative rounded bg-muted px-[0.3rem] py-[0.2rem] text-sm dark:text-neutral-200 __className_6dcaa2\",\"data-language\":\"bash\",\"data-theme\":\"default\",\"children\":[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\"npx \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"aceternity-ui@latest\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"add\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"background-beams\"}]]}]}]}],false,[\"$\",\"$L1c\",null,{\"commands\":{\"__npmCommand__\":\"npx aceternity-ui@latest add background-beams\\n\",\"__yarnCommand__\":\"npx aceternity-ui@latest add background-beams\\n\",\"__pnpmCommand__\":\"pnpm dlx aceternity-ui@latest add background-beams\\n\",\"__bunCommand__\":\"bunx --bun aceternity-ui@latest add background-beams\\n\"},\"className\":\"absolute right-4 top-4\"}]]}]}],[\"$\",\"h3\",null,{\"className\":\"font-heading relative mt-8 scroll-m-20 text-xl font-semibold tracking-tight text-black dark:text-neutral-200\",\"children\":[[\"$\",\"span\",null,{\"className\":\"absolute block -left-8 rounded-tr-full rounded-br-full top-0 z-20 h-full bg-neutral-200 dark:bg-neutral-700 w-[6px]\"}],\"Add Tailwind CSS plugin for variable classes\"]}],[\"$\",\"div\",null,{\"data-rehype-pretty-code-fragment\":\"\",\"children\":[[\"$\",\"div\",null,{\"data-rehype-pretty-code-title\":\"\",\"data-language\":\"tsx\",\"data-theme\":\"default\",\"children\":\"tailwind.config.ts\"}],[\"$\",\"$L15\",null,{\"styleName\":\"$undefined\",\"children\":[[\"$\",\"pre\",null,{\"className\":\"mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-[#1C2433] py-4 dark:bg-zinc-900\",\"data-language\":\"tsx\",\"data-theme\":\"default\",\"children\":[\"$\",\"code\",null,{\"className\":\"relative rounded bg-muted px-[0.3rem] py-[0.2rem] text-sm dark:text-neutral-200 __className_6dcaa2\",\"data-language\":\"tsx\",\"data-theme\":\"default\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#22ECDB\"},\"children\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"defaultTheme\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"require\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"tailwindcss/defaultTheme\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\");\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#22ECDB\"},\"children\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"colors\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"require\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"tailwindcss/colors\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\");\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#22ECDB\"},\"children\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"{\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E1\"},\"children\":\"default\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"flattenColorPalette\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"}\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"require\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"tailwindcss/lib/util/flattenColorPalette\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\");\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#54617B\",\"fontStyle\":\"italic\"},\"children\":\"/** \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\",\"fontStyle\":\"italic\"},\"children\":\"@type\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#54617B\",\"fontStyle\":\"italic\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\",\"fontStyle\":\"italic\"},\"children\":\"{\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B78AFF\",\"fontStyle\":\"italic\"},\"children\":\"import('tailwindcss').Config\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\",\"fontStyle\":\"italic\"},\"children\":\"}\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#54617B\",\"fontStyle\":\"italic\"},\"children\":\" */\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"module\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"exports\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"{\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E1\"},\"children\":\"content\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"[\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"./src/**/*.{ts,tsx}\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"],\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E1\"},\"children\":\"darkMode\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"class\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E1\"},\"children\":\"theme\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"{\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#54617B\",\"fontStyle\":\"italic\"},\"children\":\"// rest of the code\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"},\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line line--highlighted\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E1\"},\"children\":\"plugins\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"[\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"addVariablesForColors\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"],\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"};\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line line--highlighted\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#22ECDB\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" addVariablesForColors\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"({\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#F38CEC\"},\"children\":\"addBase\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#F38CEC\"},\"children\":\"theme\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"}:\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B78AFF\"},\"children\":\"any\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\")\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"{\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line line--highlighted\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#22ECDB\"},\"children\":\"let\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"allColors\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" flattenColorPalette\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"theme\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"colors\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"));\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line line--highlighted\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#22ECDB\"},\"children\":\"let\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"newVars\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF955C\"},\"children\":\"Object\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"fromEntries\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"(\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line line--highlighted\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF955C\"},\"children\":\"Object\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"entries\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"allColors\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\").\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"map\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"(([\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#F38CEC\"},\"children\":\"key\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#F38CEC\"},\"children\":\"val\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"])\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"=\u003e\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"[\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"`--\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"key\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"}\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"`\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"val\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"])\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line line--highlighted\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\");\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line line--highlighted\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line line--highlighted\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" addBase\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"({\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line line--highlighted\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\":root\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"newVars\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line line--highlighted\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"});\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line line--highlighted\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"}\"}]}]]}]}],[\"$\",\"$L16\",null,{\"value\":\"const defaultTheme = require(\\\"tailwindcss/defaultTheme\\\");\\n\\nconst colors = require(\\\"tailwindcss/colors\\\");\\nconst {\\n default: flattenColorPalette,\\n} = require(\\\"tailwindcss/lib/util/flattenColorPalette\\\");\\n\\n/** @type {import('tailwindcss').Config} */\\nmodule.exports = {\\n content: [\\\"./src/**/*.{ts,tsx}\\\"],\\n darkMode: \\\"class\\\",\\n theme: {\\n // rest of the code\\n },\\n plugins: [addVariablesForColors],\\n};\\n\\nfunction addVariablesForColors({ addBase, theme }: any) {\\n let allColors = flattenColorPalette(theme(\\\"colors\\\"));\\n let newVars = Object.fromEntries(\\n Object.entries(allColors).map(([key, val]) =\u003e [`--${key}`, val])\\n );\\n\\n addBase({\\n \\\":root\\\": newVars,\\n });\\n}\\n\",\"src\":\"$undefined\",\"event\":\"$undefined\",\"className\":\"absolute right-4 top-16\"}],\"$undefined\"]}]]}]]}]}],[\"$\",\"$L1b\",null,{\"className\":\"relative [\u0026_h3.font-heading]:text-base [\u0026_h3.font-heading]:font-semibold\",\"value\":\"manual\",\"children\":[\"$\",\"div\",null,{\"className\":\"[\u0026\u003eh3]:step steps mb-12 ml-4 border-l pl-8 [counter-reset:step]\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-heading relative mt-8 scroll-m-20 text-xl font-semibold tracking-tight text-black dark:text-neutral-200\",\"children\":[[\"$\",\"span\",null,{\"className\":\"absolute block -left-8 rounded-tr-full rounded-br-full top-0 z-20 h-full bg-neutral-200 dark:bg-neutral-700 w-[6px]\"}],\"Install dependencies\"]}],[\"$\",\"div\",null,{\"data-rehype-pretty-code-fragment\":\"\",\"children\":[\"$\",\"$L15\",null,{\"styleName\":\"$undefined\",\"children\":[[\"$\",\"pre\",null,{\"className\":\"mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-[#1C2433] py-4 dark:bg-zinc-900\",\"data-language\":\"bash\",\"data-theme\":\"default\",\"children\":[\"$\",\"code\",null,{\"className\":\"relative rounded bg-muted px-[0.3rem] py-[0.2rem] text-sm dark:text-neutral-200 __className_6dcaa2\",\"data-language\":\"bash\",\"data-theme\":\"default\",\"children\":[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\"npm \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"i\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"framer-motion\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"clsx\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"tailwind-merge\"}]]}]}]}],[\"$\",\"$L16\",null,{\"value\":\"npm i framer-motion clsx tailwind-merge\\n\",\"src\":\"$undefined\",\"event\":\"$undefined\",\"className\":\"absolute right-4 top-4\"}],\"$undefined\"]}]}],[\"$\",\"h3\",null,{\"className\":\"font-heading relative mt-8 scroll-m-20 text-xl font-semibold tracking-tight text-black dark:text-neutral-200\",\"children\":[[\"$\",\"span\",null,{\"className\":\"absolute block -left-8 rounded-tr-full rounded-br-full top-0 z-20 h-full bg-neutral-200 dark:bg-neutral-700 w-[6px]\"}],\"Add util file\"]}],[\"$\",\"div\",null,{\"data-rehype-pretty-code-fragment\":\"\",\"children\":[[\"$\",\"div\",null,{\"data-rehype-pretty-code-title\":\"\",\"data-language\":\"tsx\",\"data-theme\":\"default\",\"children\":\"lib/utils.ts\"}],[\"$\",\"$L15\",null,{\"styleName\":\"$undefined\",\"children\":[[\"$\",\"pre\",null,{\"className\":\"mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-[#1C2433] py-4 dark:bg-zinc-900\",\"data-language\":\"tsx\",\"data-theme\":\"default\",\"children\":[\"$\",\"code\",null,{\"className\":\"relative rounded bg-muted px-[0.3rem] py-[0.2rem] text-sm dark:text-neutral-200 __className_6dcaa2\",\"data-language\":\"tsx\",\"data-theme\":\"default\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"import\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"{\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"ClassValue\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"clsx\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"}\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"from\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"clsx\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\";\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"import\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"{\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"twMerge\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"}\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"from\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"tailwind-merge\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\";\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#22ECDB\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" cn\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"(...\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#F38CEC\"},\"children\":\"inputs\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B78AFF\"},\"children\":\"ClassValue\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"[])\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"{\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"return\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" twMerge\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"clsx\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"inputs\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"));\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"}\"}]}]]}]}],[\"$\",\"$L16\",null,{\"value\":\"import { ClassValue, clsx } from \\\"clsx\\\";\\nimport { twMerge } from \\\"tailwind-merge\\\";\\n\\nexport function cn(...inputs: ClassValue[]) {\\n return twMerge(clsx(inputs));\\n}\\n\",\"src\":\"$undefined\",\"event\":\"$undefined\",\"className\":\"absolute right-4 top-16\"}],\"$undefined\"]}]]}],[\"$\",\"h3\",null,{\"className\":\"font-heading relative mt-8 scroll-m-20 text-xl font-semibold tracking-tight text-black dark:text-neutral-200\",\"children\":[[\"$\",\"span\",null,{\"className\":\"absolute block -left-8 rounded-tr-full rounded-br-full top-0 z-20 h-full bg-neutral-200 dark:bg-neutral-700 w-[6px]\"}],\"Add Tailwind CSS plugin for variable classes\"]}],[\"$\",\"div\",null,{\"data-rehype-pretty-code-fragment\":\"\",\"children\":[[\"$\",\"div\",null,{\"data-rehype-pretty-code-title\":\"\",\"data-language\":\"tsx\",\"data-theme\":\"default\",\"children\":\"tailwind.config.ts\"}],[\"$\",\"$L15\",null,{\"styleName\":\"$undefined\",\"children\":[[\"$\",\"pre\",null,{\"className\":\"mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-[#1C2433] py-4 dark:bg-zinc-900\",\"data-language\":\"tsx\",\"data-theme\":\"default\",\"children\":[\"$\",\"code\",null,{\"className\":\"relative rounded bg-muted px-[0.3rem] py-[0.2rem] text-sm dark:text-neutral-200 __className_6dcaa2\",\"data-language\":\"tsx\",\"data-theme\":\"default\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#22ECDB\"},\"children\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"defaultTheme\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"require\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"tailwindcss/defaultTheme\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\");\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#22ECDB\"},\"children\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"colors\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"require\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"tailwindcss/colors\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\");\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#22ECDB\"},\"children\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"{\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E1\"},\"children\":\"default\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"flattenColorPalette\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"}\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"require\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"tailwindcss/lib/util/flattenColorPalette\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\");\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#54617B\",\"fontStyle\":\"italic\"},\"children\":\"/** \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\",\"fontStyle\":\"italic\"},\"children\":\"@type\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#54617B\",\"fontStyle\":\"italic\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\",\"fontStyle\":\"italic\"},\"children\":\"{\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B78AFF\",\"fontStyle\":\"italic\"},\"children\":\"import('tailwindcss').Config\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\",\"fontStyle\":\"italic\"},\"children\":\"}\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#54617B\",\"fontStyle\":\"italic\"},\"children\":\" */\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"module\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"exports\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"{\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E1\"},\"children\":\"content\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"[\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"./src/**/*.{ts,tsx}\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"],\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E1\"},\"children\":\"darkMode\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"class\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E1\"},\"children\":\"theme\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"{\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#54617B\",\"fontStyle\":\"italic\"},\"children\":\"// rest of the code\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"},\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line line--highlighted\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E1\"},\"children\":\"plugins\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"[\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"addVariablesForColors\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"],\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"};\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line line--highlighted\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#22ECDB\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" addVariablesForColors\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"({\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#F38CEC\"},\"children\":\"addBase\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#F38CEC\"},\"children\":\"theme\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"}:\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B78AFF\"},\"children\":\"any\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\")\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"{\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line line--highlighted\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#22ECDB\"},\"children\":\"let\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"allColors\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" flattenColorPalette\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"theme\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"colors\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"));\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line line--highlighted\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#22ECDB\"},\"children\":\"let\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"newVars\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF955C\"},\"children\":\"Object\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"fromEntries\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"(\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line line--highlighted\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF955C\"},\"children\":\"Object\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"entries\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"allColors\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\").\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"map\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"(([\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#F38CEC\"},\"children\":\"key\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#F38CEC\"},\"children\":\"val\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"])\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"=\u003e\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"[\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"`--\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"key\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"}\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"`\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"val\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"])\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line line--highlighted\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\");\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line line--highlighted\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line line--highlighted\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" addBase\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"({\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line line--highlighted\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\":root\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"newVars\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line line--highlighted\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"});\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line line--highlighted\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"}\"}]}]]}]}],[\"$\",\"$L16\",null,{\"value\":\"const defaultTheme = require(\\\"tailwindcss/defaultTheme\\\");\\n\\nconst colors = require(\\\"tailwindcss/colors\\\");\\nconst {\\n default: flattenColorPalette,\\n} = require(\\\"tailwindcss/lib/util/flattenColorPalette\\\");\\n\\n/** @type {import('tailwindcss').Config} */\\nmodule.exports = {\\n content: [\\\"./src/**/*.{ts,tsx}\\\"],\\n darkMode: \\\"class\\\",\\n theme: {\\n // rest of the code\\n },\\n plugins: [addVariablesForColors],\\n};\\n\\nfunction addVariablesForColors({ addBase, theme }: any) {\\n let allColors = flattenColorPalette(theme(\\\"colors\\\"));\\n let newVars = Object.fromEntries(\\n Object.entries(allColors).map(([key, val]) =\u003e [`--${key}`, val])\\n );\\n\\n addBase({\\n \\\":root\\\": newVars,\\n });\\n}\\n\",\"src\":\"$undefined\",\"event\":\"$undefined\",\"className\":\"absolute right-4 top-16\"}],\"$undefined\"]}]]}],[\"$\",\"h3\",null,{\"className\":\"font-heading relative mt-8 scroll-m-20 text-xl font-semibold tracking-tight text-black dark:text-neutral-200\",\"children\":[[\"$\",\"span\",null,{\"className\":\"absolute block -left-8 rounded-tr-full rounded-br-full top-0 z-20 h-full bg-neutral-200 dark:bg-neutral-700 w-[6px]\"}],\"Copy the source code\"]}],[\"$\",\"p\",null,{\"className\":\"leading-7 [\u0026:not(:first-child)]:mt-6 text-black dark:text-white\",\"children\":[\"$\",\"code\",null,{\"className\":\"relative rounded bg-muted px-[0.3rem] py-[0.2rem] text-sm dark:text-neutral-200 __className_6dcaa2\",\"children\":\"components/ui/background-beams.tsx\"}]}],\"$L1d\"]}]}]]}],\"\\n\",[\"$\",\"h2\",null,{\"className\":\"font-heading mt-12 scroll-m-20 pb-2 text-2xl font-semibold tracking-tight first:mt-0 text-black dark:text-white\",\"id\":\"props\",\"children\":[[\"$\",\"a\",null,{\"className\":\"font-medium underline underline-offset-4 subheading-anchor\",\"aria-label\":\"Link to section\",\"href\":\"#props\",\"children\":[\"$\",\"span\",null,{\"className\":\"icon icon-link\"}]}],\"Props\"]}],\"\\n\",[\"$\",\"div\",null,{\"className\":\"my-6 w-full overflow-y-auto dark:text-white text-sm\",\"children\":[\"$\",\"table\",null,{\"className\":\"w-full\",\"children\":[[\"$\",\"thead\",null,{\"children\":[\"$\",\"tr\",null,{\"className\":\"m-0 border-t p-0 even:bg-muted dark:even:bg-zinc-900 text-black dark:text-white text-sm\",\"children\":[[\"$\",\"th\",null,{\"className\":\"border px-4 py-2 text-left font-bold [\u0026[align=center]]:text-center [\u0026[align=right]]:text-right text-sm\",\"children\":\"Prop name\"}],[\"$\",\"th\",null,{\"className\":\"border px-4 py-2 text-left font-bold [\u0026[align=center]]:text-center [\u0026[align=right]]:text-right text-sm\",\"children\":\"Type\"}],[\"$\",\"th\",null,{\"className\":\"border px-4 py-2 text-left font-bold [\u0026[align=center]]:text-center [\u0026[align=right]]:text-right text-sm\",\"children\":\"Description\"}]]}]}],[\"$\",\"tbody\",null,{\"children\":[\"$\",\"tr\",null,{\"className\":\"m-0 border-t p-0 even:bg-muted dark:even:bg-zinc-900 text-black dark:text-white text-sm\",\"children\":[[\"$\",\"td\",null,{\"className\":\"border px-4 py-3 text-left [\u0026[align=center]]:text-center [\u0026[align=right]]:text-right text-sm font-sans\",\"children\":[\"$\",\"code\",null,{\"className\":\"relative rounded bg-muted px-[0.3rem] py-[0.2rem] text-sm dark:text-neutral-200 __className_6dcaa2\",\"children\":\"className\"}]}],[\"$\",\"td\",null,{\"className\":\"border px-4 py-3 text-left [\u0026[align=center]]:text-center [\u0026[align=right]]:text-right text-sm font-sans\",\"children\":[\"$\",\"code\",null,{\"className\":\"relative rounded bg-muted px-[0.3rem] py-[0.2rem] text-sm dark:text-neutral-200 __className_6dcaa2\",\"children\":\"string\"}]}],[\"$\",\"td\",null,{\"className\":\"border px-4 py-3 text-left [\u0026[align=center]]:text-center [\u0026[align=right]]:text-right text-sm font-sans\",\"children\":\"The class name of the Background Beams component.\"}]]}]}]]}]}]]}]}]]}]}]\n"])self.__next_f.push([1,"f:[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"\",\"children\":[\"$\",\"body\",null,{\"className\":\"antialiased dark:bg-brand bg-white __className_3a0388\",\"children\":[[\"$\",\"script\",null,{\"defer\":true,\"data-domain\":\"ui.aceternity.com\",\"src\":\"https://analytics.aceternity.com/js/script.js\"}],[\"$\",\"script\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"\\n(function(){var w=window;var ic=w.Intercom;if(typeof ic===\\\"function\\\"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/duup7948';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};if(document.readyState==='complete'){l();}else if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();\\n \"}}],[\"$\",\"$L1e\",null,{}],[\"$\",\"$L1f\",null,{\"attribute\":\"class\",\"defaultTheme\":\"system\",\"enableSystem\":true,\"disableTransitionOnChange\":true,\"children\":[[\"$\",\"$L20\",null,{\"user\":{\"paid\":true},\"isSubscribed\":true}],[\"$\",\"$La\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"loading\":\"$undefined\",\"loadingStyles\":\"$undefined\",\"loadingScripts\":\"$undefined\",\"hasLoading\":false,\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lc\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}],[\"$\",\"div\",null,{\"className\":\"border-t border-neutral-100 dark:border-white/[0.1] px-8 py-20 bg-white dark:bg-brand\",\"children\":[\"$\",\"div\",null,{\"className\":\"max-w-7xl mx-auto text-sm text-neutral-500 flex sm:flex-row flex-col justify-between items-start \",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"div\",null,{\"className\":\"mr-4 md:flex mb-4\",\"children\":[\"$\",\"$L13\",null,{\"href\":\"/\",\"className\":\"flex items-center justify-center space-x-2 text-2xl font-bold text-center text-neutral-600 dark:text-gray-100 selection:bg-emerald-500 mr-10 py-0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative h-8 w-8 md:h-6 md:w-6 bg-black border border-slate-800 text-white flex items-center justify-center rounded-md text-sm antialiased\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute h-10 w-full bg-white/[0.2] -top-10 inset-x-0 rounded-full blur-xl\"}],[\"$\",\"div\",null,{\"className\":\"text-sm text-emerald-500 relative z-20\",\"children\":[\"$\",\"$L21\",null,{\"src\":\"/logo.png\",\"height\":\"50\",\"width\":\"50\",\"alt\":\"Logo\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col\",\"children\":[\"$\",\"h1\",null,{\"className\":\"text-black dark:text-white font-sans\",\"children\":[\" \",\"Aceternity UI\"]}]}]]}]}],[\"$\",\"div\",null,{\"children\":[\"A product by\",\" \",[\"$\",\"$L13\",null,{\"href\":\"https://aceternity.com\",\"target\":\"__blank\",\"className\":\"dark:text-sky-500 text-neutral-600 font-medium\",\"children\":\"Aceternity\"}]]}],[\"$\",\"div\",null,{\"className\":\"mt-2\",\"children\":[\"Building in public at\",\" \",[\"$\",\"$L13\",null,{\"href\":\"https://twitter.com/mannupaaji\",\"className\":\"dark:text-sky-500 font-medium text-neutral-600\",\"target\":\"__blank\",\"children\":\"@mannupaaji\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"grid grid-cols-2 gap-10 items-start mt-10 md:mt-0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex justify-center space-y-4 flex-col mt-4\",\"children\":[[\"$\",\"$L13\",null,{\"className\":\"transition-colors hover:text-foreground/80 text-foreground/60\",\"href\":\"/pricing\",\"children\":\"Pricing\"}],[\"$\",\"$L13\",null,{\"className\":\"transition-colors hover:text-foreground/80 text-foreground/60\",\"href\":\"/components\",\"children\":\"Components\"}],[\"$\",\"$L13\",null,{\"className\":\"transition-colors hover:text-foreground/80 text-foreground/60\",\"href\":\"/templates\",\"children\":\"Templates\"}],[\"$\",\"$L13\",null,{\"className\":\"transition-colors hover:text-foreground/80 text-foreground/60\",\"href\":\"/categories\",\"children\":\"Categories\"}],[\"$\",\"$L13\",null,{\"className\":\"transition-colors hover:text-foreground/80 text-foreground/60\",\"href\":\"/blog\",\"children\":\"Blog\"}],[\"$\",\"$L13\",null,{\"className\":\"transition-colors hover:text-foreground/80 text-foreground/60\",\"href\":\"/tools/box-shadows\",\"children\":\"Box Shadows\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex justify-center space-y-4 flex-col mt-4\",\"children\":[[\"$\",\"$L13\",null,{\"target\":\"__blank\",\"className\":\"transition-colors hover:text-foreground/80 text-foreground/60\",\"href\":\"https://twitter.com/aceternitylabs\",\"children\":\"Twitter\"}],[\"$\",\"$L13\",null,{\"target\":\"__blank\",\"className\":\"transition-colors hover:text-foreground/80 text-foreground/60\",\"href\":\"https://discord.gg/ftZbQvCdN7\",\"children\":\"Discord\"}]]}]]}]]}]}]]}],[\"$\",\"$L22\",null,{}]]}]}]\n"])self.__next_f.push([1,"10:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Background Beams\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"Multiple background beams that follow a path of SVG, makes a good hero section background.\"}],[\"$\",\"meta\",\"4\",{\"property\":\"og:title\",\"content\":\"Background Beams\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:description\",\"content\":\"Multiple background beams that follow a path of SVG, makes a good hero section background.\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:image\",\"content\":\"https://assets.aceternity.com/cloudinary_bkp/Background_Beams_ilbyga.png\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"8\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"9\",{\"name\":\"twitter:creator\",\"content\":\"@mannupaaji\"}],[\"$\",\"meta\",\"10\",{\"name\":\"twitter:title\",\"content\":\"Background Beams\"}],[\"$\",\"meta\",\"11\",{\"name\":\"twitter:description\",\"content\":\"Multiple background beams that follow a path of SVG, makes a good hero section background.\"}],[\"$\",\"meta\",\"12\",{\"name\":\"twitter:image\",\"content\":\"https://assets.aceternity.com/cloudinary_bkp/Background_Beams_ilbyga.png\"}],[\"$\",\"link\",\"13\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"16x16\"}],[\"$\",\"link\",\"14\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-icon.png?2deb28af3ac52d4d\",\"type\":\"image/png\",\"sizes\":\"114x114\"}],[\"$\",\"meta\",\"15\",{\"name\":\"next-size-adjust\"}]]\n"])self.__next_f.push([1,"8:null\n"])self.__next_f.push([1,"23:I[49026,[\"6115\",\"static/chunks/8dc5345f-7c0cf51404ce5c83.js\",\"8310\",\"static/chunks/0e5ce63c-1571cb7fe04f565a.js\",\"7895\",\"static/chunks/7895-fcd52de26680f886.js\",\"5250\",\"static/chunks/5250-b576df20f9ecedca.js\",\"2255\",\"static/chunks/2255-574587277be16c13.js\",\"6691\",\"static/chunks/6691-3643fde9a53a3b64.js\",\"2690\",\"static/chunks/2690-0ab0d0783f55dc75.js\",\"7106\",\"static/chunks/7106-71a563599bfa5483.js\",\"6653\",\"static/chunks/6653-ebf8bb3ce1899584.js\",\"2791\",\"static/chunks/2791-7e4a53a19f9d17a6.js\",\"1424\",\"static/chunks/1424-d724e09ff7e0aa5f.js\",\"3649\",\"static/chunks/3649-a7b35ecf47a0263a.js\",\"2235\",\"static/chunks/2235-c91b6c9e3c9fcd60.js\",\"8226\",\"static/chunks/8226-58a16fab4276c086.js\",\"4067\",\"static/chunks/4067-c82acd005c5a407d.js\",\"7858\",\"static/chunks/app/components/%5Bslug%5D/page-6f3d015f6a7eb41c.js\"],\"CodeBlockWrapper\"]\n"])self.__next_f.push([1,"24:Td81,"])self.__next_f.push([1,"\"M-380 -189C-380 -189 -312 216 152 343C616 470 684 875 684 875M-373 -197C-373 -197 -305 208 159 335C623 462 691 867 691 867M-366 -205C-366 -205 -298 200 166 327C630 454 698 859 698 859M-359 -213C-359 -213 -291 192 173 319C637 446 705 851 705 851M-352 -221C-352 -221 -284 184 180 311C644 438 712 843 712 843M-345 -229C-345 -229 -277 176 187 303C651 430 719 835 719 835M-338 -237C-338 -237 -270 168 194 295C658 422 726 827 726 827M-331 -245C-331 -245 -263 160 201 287C665 414 733 819 733 819M-324 -253C-324 -253 -256 152 208 279C672 406 740 811 740 811M-317 -261C-317 -261 -249 144 215 271C679 398 747 803 747 803M-310 -269C-310 -269 -242 136 222 263C686 390 754 795 754 795M-303 -277C-303 -277 -235 128 229 255C693 382 761 787 761 787M-296 -285C-296 -285 -228 120 236 247C700 374 768 779 768 779M-289 -293C-289 -293 -221 112 243 239C707 366 775 771 775 771M-282 -301C-282 -301 -214 104 250 231C714 358 782 763 782 763M-275 -309C-275 -309 -207 96 257 223C721 350 789 755 789 755M-268 -317C-268 -317 -200 88 264 215C728 342 796 747 796 747M-261 -325C-261 -325 -193 80 271 207C735 334 803 739 803 739M-254 -333C-254 -333 -186 72 278 199C742 326 810 731 810 731M-247 -341C-247 -341 -179 64 285 191C749 318 817 723 817 723M-240 -349C-240 -349 -172 56 292 183C756 310 824 715 824 715M-233 -357C-233 -357 -165 48 299 175C763 302 831 707 831 707M-226 -365C-226 -365 -158 40 306 167C770 294 838 699 838 699M-219 -373C-219 -373 -151 32 313 159C777 286 845 691 845 691M-212 -381C-212 -381 -144 24 320 151C784 278 852 683 852 683M-205 -389C-205 -389 -137 16 327 143C791 270 859 675 859 675M-198 -397C-198 -397 -130 8 334 135C798 262 866 667 866 667M-191 -405C-191 -405 -123 0 341 127C805 254 873 659 873 659M-184 -413C-184 -413 -116 -8 348 119C812 246 880 651 880 651M-177 -421C-177 -421 -109 -16 355 111C819 238 887 643 887 643M-170 -429C-170 -429 -102 -24 362 103C826 230 894 635 894 635M-163 -437C-163 -437 -95 -32 369 95C833 222 901 627 901 627M-156 -445C-156 -445 -88 -40 376 87C840 214 908 619 908 619M-149 -453C-149 -453 -81 -48 383 79C847 206 915 611 915 611M-142 -461C-142 -461 -74 -56 390 71C854 198 922 603 922 603M-135 -469C-135 -469 -67 -64 397 63C861 190 929 595 929 595M-128 -477C-128 -477 -60 -72 404 55C868 182 936 587 936 587M-121 -485C-121 -485 -53 -80 411 47C875 174 943 579 943 579M-114 -493C-114 -493 -46 -88 418 39C882 166 950 571 950 571M-107 -501C-107 -501 -39 -96 425 31C889 158 957 563 957 563M-100 -509C-100 -509 -32 -104 432 23C896 150 964 555 964 555M-93 -517C-93 -517 -25 -112 439 15C903 142 971 547 971 547M-86 -525C-86 -525 -18 -120 446 7C910 134 978 539 978 539M-79 -533C-79 -533 -11 -128 453 -1C917 126 985 531 985 531M-72 -541C-72 -541 -4 -136 460 -9C924 118 992 523 992 523M-65 -549C-65 -549 3 -144 467 -17C931 110 999 515 999 515M-58 -557C-58 -557 10 -152 474 -25C938 102 1006 507 1006 507M-51 -565C-51 -565 17 -160 481 -33C945 94 1013 499 1013 499M-44 -573C-44 -573 24 -168 488 -41C952 86 1020 491 1020 491M-37 -581C-37 -581 31 -176 495 -49C959 78 1027 483 1027 483M-30 -589C-30 -589 38 -184 502 -57C966 70 1034 475 1034 475M-23 -597C-23 -597 45 -192 509 -65C973 62 1041 467 1041 467M-16 -605C-16 -605 52 -200 516 -73C980 54 1048 459 1048 459M-9 -613C-9 -613 59 -208 523 -81C987 46 1055 451 1055 451M-2 -621C-2 -621 66 -216 530 -89C994 38 1062 443 1062 443M5 -629C5 -629 73 -224 537 -97C1001 30 1069 435 1069 435M12 -637C12 -637 80 -232 544 -105C1008 22 1076 427 1076 427M19 -645C19 -645 87 -240 551 -113C1015 14 1083 419 1083 419\""])self.__next_f.push([1,"25:T266d,"])self.__next_f.push([1,"\"use client\";\nimport React from \"react\";\nimport { motion } from \"framer-motion\";\nimport { cn } from \"@/lib/utils\";\n\nexport const BackgroundBeams = React.memo(\n ({ className }: { className?: string }) =\u003e {\n const paths = [\n \"M-380 -189C-380 -189 -312 216 152 343C616 470 684 875 684 875\",\n \"M-373 -197C-373 -197 -305 208 159 335C623 462 691 867 691 867\",\n \"M-366 -205C-366 -205 -298 200 166 327C630 454 698 859 698 859\",\n \"M-359 -213C-359 -213 -291 192 173 319C637 446 705 851 705 851\",\n \"M-352 -221C-352 -221 -284 184 180 311C644 438 712 843 712 843\",\n \"M-345 -229C-345 -229 -277 176 187 303C651 430 719 835 719 835\",\n \"M-338 -237C-338 -237 -270 168 194 295C658 422 726 827 726 827\",\n \"M-331 -245C-331 -245 -263 160 201 287C665 414 733 819 733 819\",\n \"M-324 -253C-324 -253 -256 152 208 279C672 406 740 811 740 811\",\n \"M-317 -261C-317 -261 -249 144 215 271C679 398 747 803 747 803\",\n \"M-310 -269C-310 -269 -242 136 222 263C686 390 754 795 754 795\",\n \"M-303 -277C-303 -277 -235 128 229 255C693 382 761 787 761 787\",\n \"M-296 -285C-296 -285 -228 120 236 247C700 374 768 779 768 779\",\n \"M-289 -293C-289 -293 -221 112 243 239C707 366 775 771 775 771\",\n \"M-282 -301C-282 -301 -214 104 250 231C714 358 782 763 782 763\",\n \"M-275 -309C-275 -309 -207 96 257 223C721 350 789 755 789 755\",\n \"M-268 -317C-268 -317 -200 88 264 215C728 342 796 747 796 747\",\n \"M-261 -325C-261 -325 -193 80 271 207C735 334 803 739 803 739\",\n \"M-254 -333C-254 -333 -186 72 278 199C742 326 810 731 810 731\",\n \"M-247 -341C-247 -341 -179 64 285 191C749 318 817 723 817 723\",\n \"M-240 -349C-240 -349 -172 56 292 183C756 310 824 715 824 715\",\n \"M-233 -357C-233 -357 -165 48 299 175C763 302 831 707 831 707\",\n \"M-226 -365C-226 -365 -158 40 306 167C770 294 838 699 838 699\",\n \"M-219 -373C-219 -373 -151 32 313 159C777 286 845 691 845 691\",\n \"M-212 -381C-212 -381 -144 24 320 151C784 278 852 683 852 683\",\n \"M-205 -389C-205 -389 -137 16 327 143C791 270 859 675 859 675\",\n \"M-198 -397C-198 -397 -130 8 334 135C798 262 866 667 866 667\",\n \"M-191 -405C-191 -405 -123 0 341 127C805 254 873 659 873 659\",\n \"M-184 -413C-184 -413 -116 -8 348 119C812 246 880 651 880 651\",\n \"M-177 -421C-177 -421 -109 -16 355 111C819 238 887 643 887 643\",\n \"M-170 -429C-170 -429 -102 -24 362 103C826 230 894 635 894 635\",\n \"M-163 -437C-163 -437 -95 -32 369 95C833 222 901 627 901 627\",\n \"M-156 -445C-156 -445 -88 -40 376 87C840 214 908 619 908 619\",\n \"M-149 -453C-149 -453 -81 -48 383 79C847 206 915 611 915 611\",\n \"M-142 -461C-142 -461 -74 -56 390 71C854 198 922 603 922 603\",\n \"M-135 -469C-135 -469 -67 -64 397 63C861 190 929 595 929 595\",\n \"M-128 -477C-128 -477 -60 -72 404 55C868 182 936 587 936 587\",\n \"M-121 -485C-121 -485 -53 -80 411 47C875 174 943 579 943 579\",\n \"M-114 -493C-114 -493 -46 -88 418 39C882 166 950 571 950 571\",\n \"M-107 -501C-107 -501 -39 -96 425 31C889 158 957 563 957 563\",\n \"M-100 -509C-100 -509 -32 -104 432 23C896 150 964 555 964 555\",\n \"M-93 -517C-93 -517 -25 -112 439 15C903 142 971 547 971 547\",\n \"M-86 -525C-86 -525 -18 -120 446 7C910 134 978 539 978 539\",\n \"M-79 -533C-79 -533 -11 -128 453 -1C917 126 985 531 985 531\",\n \"M-72 -541C-72 -541 -4 -136 460 -9C924 118 992 523 992 523\",\n \"M-65 -549C-65 -549 3 -144 467 -17C931 110 999 515 999 515\",\n \"M-58 -557C-58 -557 10 -152 474 -25C938 102 1006 507 1006 507\",\n \"M-51 -565C-51 -565 17 -160 481 -33C945 94 1013 499 1013 499\",\n \"M-44 -573C-44 -573 24 -168 488 -41C952 86 1020 491 1020 491\",\n \"M-37 -581C-37 -581 31 -176 495 -49C959 78 1027 483 1027 483\",\n ];\n return (\n \u003cdiv\n className={cn(\n \"absolute h-full w-full inset-0 [mask-size:40px] [mask-repeat:no-repeat] flex items-center justify-center\",\n className\n )}\n \u003e\n \u003csvg\n className=\" z-0 h-full w-full pointer-events-none absolute \"\n width=\"100%\"\n height=\"100%\"\n viewBox=\"0 0 696 316\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n \u003e\n \u003cpath\n d=\"M-380 -189C-380 -189 -312 216 152 343C616 470 684 875 684 875M-373 -197C-373 -197 -305 208 159 335C623 462 691 867 691 867M-366 -205C-366 -205 -298 200 166 327C630 454 698 859 698 859M-359 -213C-359 -213 -291 192 173 319C637 446 705 851 705 851M-352 -221C-352 -221 -284 184 180 311C644 438 712 843 712 843M-345 -229C-345 -229 -277 176 187 303C651 430 719 835 719 835M-338 -237C-338 -237 -270 168 194 295C658 422 726 827 726 827M-331 -245C-331 -245 -263 160 201 287C665 414 733 819 733 819M-324 -253C-324 -253 -256 152 208 279C672 406 740 811 740 811M-317 -261C-317 -261 -249 144 215 271C679 398 747 803 747 803M-310 -269C-310 -269 -242 136 222 263C686 390 754 795 754 795M-303 -277C-303 -277 -235 128 229 255C693 382 761 787 761 787M-296 -285C-296 -285 -228 120 236 247C700 374 768 779 768 779M-289 -293C-289 -293 -221 112 243 239C707 366 775 771 775 771M-282 -301C-282 -301 -214 104 250 231C714 358 782 763 782 763M-275 -309C-275 -309 -207 96 257 223C721 350 789 755 789 755M-268 -317C-268 -317 -200 88 264 215C728 342 796 747 796 747M-261 -325C-261 -325 -193 80 271 207C735 334 803 739 803 739M-254 -333C-254 -333 -186 72 278 199C742 326 810 731 810 731M-247 -341C-247 -341 -179 64 285 191C749 318 817 723 817 723M-240 -349C-240 -349 -172 56 292 183C756 310 824 715 824 715M-233 -357C-233 -357 -165 48 299 175C763 302 831 707 831 707M-226 -365C-226 -365 -158 40 306 167C770 294 838 699 838 699M-219 -373C-219 -373 -151 32 313 159C777 286 845 691 845 691M-212 -381C-212 -381 -144 24 320 151C784 278 852 683 852 683M-205 -389C-205 -389 -137 16 327 143C791 270 859 675 859 675M-198 -397C-198 -397 -130 8 334 135C798 262 866 667 866 667M-191 -405C-191 -405 -123 0 341 127C805 254 873 659 873 659M-184 -413C-184 -413 -116 -8 348 119C812 246 880 651 880 651M-177 -421C-177 -421 -109 -16 355 111C819 238 887 643 887 643M-170 -429C-170 -429 -102 -24 362 103C826 230 894 635 894 635M-163 -437C-163 -437 -95 -32 369 95C833 222 901 627 901 627M-156 -445C-156 -445 -88 -40 376 87C840 214 908 619 908 619M-149 -453C-149 -453 -81 -48 383 79C847 206 915 611 915 611M-142 -461C-142 -461 -74 -56 390 71C854 198 922 603 922 603M-135 -469C-135 -469 -67 -64 397 63C861 190 929 595 929 595M-128 -477C-128 -477 -60 -72 404 55C868 182 936 587 936 587M-121 -485C-121 -485 -53 -80 411 47C875 174 943 579 943 579M-114 -493C-114 -493 -46 -88 418 39C882 166 950 571 950 571M-107 -501C-107 -501 -39 -96 425 31C889 158 957 563 957 563M-100 -509C-100 -509 -32 -104 432 23C896 150 964 555 964 555M-93 -517C-93 -517 -25 -112 439 15C903 142 971 547 971 547M-86 -525C-86 -525 -18 -120 446 7C910 134 978 539 978 539M-79 -533C-79 -533 -11 -128 453 -1C917 126 985 531 985 531M-72 -541C-72 -541 -4 -136 460 -9C924 118 992 523 992 523M-65 -549C-65 -549 3 -144 467 -17C931 110 999 515 999 515M-58 -557C-58 -557 10 -152 474 -25C938 102 1006 507 1006 507M-51 -565C-51 -565 17 -160 481 -33C945 94 1013 499 1013 499M-44 -573C-44 -573 24 -168 488 -41C952 86 1020 491 1020 491M-37 -581C-37 -581 31 -176 495 -49C959 78 1027 483 1027 483M-30 -589C-30 -589 38 -184 502 -57C966 70 1034 475 1034 475M-23 -597C-23 -597 45 -192 509 -65C973 62 1041 467 1041 467M-16 -605C-16 -605 52 -200 516 -73C980 54 1048 459 1048 459M-9 -613C-9 -613 59 -208 523 -81C987 46 1055 451 1055 451M-2 -621C-2 -621 66 -216 530 -89C994 38 1062 443 1062 443M5 -629C5 -629 73 -224 537 -97C1001 30 1069 435 1069 435M12 -637C12 -637 80 -232 544 -105C1008 22 1076 427 1076 427M19 -645C19 -645 87 -240 551 -113C1015 14 1083 419 1083 419\"\n stroke=\"url(#paint0_radial_242_278)\"\n strokeOpacity=\"0.05\"\n strokeWidth=\"0.5\"\n \u003e\u003c/path\u003e\n\n {paths.map((path, index) =\u003e (\n \u003cmotion.path\n key={`path-` + index}\n d={path}\n stroke={`url(#linearGradient-${index})`}\n strokeOpacity=\"0.4\"\n strokeWidth=\"0.5\"\n \u003e\u003c/motion.path\u003e\n ))}\n \u003cdefs\u003e\n {paths.map((path, index) =\u003e (\n \u003cmotion.linearGradient\n id={`linearGradient-${index}`}\n key={`gradient-${index}`}\n initial={{\n x1: \"0%\",\n x2: \"0%\",\n y1: \"0%\",\n y2: \"0%\",\n }}\n animate={{\n x1: [\"0%\", \"100%\"],\n x2: [\"0%\", \"95%\"],\n y1: [\"0%\", \"100%\"],\n y2: [\"0%\", `${93 + Math.random() * 8}%`],\n }}\n transition={{\n duration: Math.random() * 10 + 10,\n ease: \"easeInOut\",\n repeat: Infinity,\n delay: Math.random() * 10,\n }}\n \u003e\n \u003cstop stopColor=\"#18CCFC\" stopOpacity=\"0\"\u003e\u003c/stop\u003e\n \u003cstop stopColor=\"#18CCFC\"\u003e\u003c/stop\u003e\n \u003cstop offset=\"32.5%\" stopColor=\"#6344F5\"\u003e\u003c/stop\u003e\n \u003cstop offset=\"100%\" stopColor=\"#AE48FF\" stopOpacity=\"0\"\u003e\u003c/stop\u003e\n \u003c/motion.linearGradient\u003e\n ))}\n\n \u003cradialGradient\n id=\"paint0_radial_242_278\"\n cx=\"0\"\n cy=\"0\"\n r=\"1\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(352 34) rotate(90) scale(555 1560.62)\"\n \u003e\n \u003cstop offset=\"0.0666667\" stopColor=\"var(--neutral-300)\"\u003e\u003c/stop\u003e\n \u003cstop offset=\"0.243243\" stopColor=\"var(--neutral-300)\"\u003e\u003c/stop\u003e\n \u003cstop offset=\"0.43594\" stopColor=\"white\" stopOpacity=\"0\"\u003e\u003c/stop\u003e\n \u003c/radialGradient\u003e\n \u003c/defs\u003e\n \u003c/svg\u003e\n \u003c/div\u003e\n );\n }\n);\n\nBackgroundBeams.displayName = \"BackgroundBeams\";\n"])self.__next_f.push([1,"1d:[\"$\",\"$L23\",null,{\"expandButtonTitle\":\"Expand\",\"className\":\"my-6 overflow-hidden rounded-md\",\"children\":[\"$\",\"div\",null,{\"data-rehype-pretty-code-fragment\":\"\",\"children\":[\"$\",\"$L15\",null,{\"styleName\":\"default\",\"children\":[[\"$\",\"pre\",null,{\"className\":\"mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-[#1C2433] py-4 dark:bg-zinc-900\",\"data-language\":\"tsx\",\"data-theme\":\"default\",\"children\":[\"$\",\"code\",null,{\"className\":\"relative rounded bg-muted px-[0.3rem] py-[0.2rem] text-sm dark:text-neutral-200 __className_6dcaa2\",\"data-language\":\"tsx\",\"data-theme\":\"default\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"use client\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\";\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"import\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"React\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"from\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"react\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\";\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"import\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"{\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"motion\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"}\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"from\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"framer-motion\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\";\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"import\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"{\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"cn\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"}\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"from\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"@/lib/utils\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\";\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#22ECDB\"},\"children\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"BackgroundBeams\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF955C\"},\"children\":\"React\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"memo\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"(\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"({\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#F38CEC\"},\"children\":\"className\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"}:\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"{\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E1\"},\"children\":\"className\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"?:\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B78AFF\"},\"children\":\"string\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"})\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"=\u003e\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"{\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#22ECDB\"},\"children\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"paths\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"[\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-380 -189C-380 -189 -312 216 152 343C616 470 684 875 684 875\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-373 -197C-373 -197 -305 208 159 335C623 462 691 867 691 867\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-366 -205C-366 -205 -298 200 166 327C630 454 698 859 698 859\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-359 -213C-359 -213 -291 192 173 319C637 446 705 851 705 851\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-352 -221C-352 -221 -284 184 180 311C644 438 712 843 712 843\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-345 -229C-345 -229 -277 176 187 303C651 430 719 835 719 835\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-338 -237C-338 -237 -270 168 194 295C658 422 726 827 726 827\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-331 -245C-331 -245 -263 160 201 287C665 414 733 819 733 819\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-324 -253C-324 -253 -256 152 208 279C672 406 740 811 740 811\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-317 -261C-317 -261 -249 144 215 271C679 398 747 803 747 803\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-310 -269C-310 -269 -242 136 222 263C686 390 754 795 754 795\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-303 -277C-303 -277 -235 128 229 255C693 382 761 787 761 787\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-296 -285C-296 -285 -228 120 236 247C700 374 768 779 768 779\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-289 -293C-289 -293 -221 112 243 239C707 366 775 771 775 771\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-282 -301C-282 -301 -214 104 250 231C714 358 782 763 782 763\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-275 -309C-275 -309 -207 96 257 223C721 350 789 755 789 755\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-268 -317C-268 -317 -200 88 264 215C728 342 796 747 796 747\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-261 -325C-261 -325 -193 80 271 207C735 334 803 739 803 739\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-254 -333C-254 -333 -186 72 278 199C742 326 810 731 810 731\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-247 -341C-247 -341 -179 64 285 191C749 318 817 723 817 723\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-240 -349C-240 -349 -172 56 292 183C756 310 824 715 824 715\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-233 -357C-233 -357 -165 48 299 175C763 302 831 707 831 707\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-226 -365C-226 -365 -158 40 306 167C770 294 838 699 838 699\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-219 -373C-219 -373 -151 32 313 159C777 286 845 691 845 691\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-212 -381C-212 -381 -144 24 320 151C784 278 852 683 852 683\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-205 -389C-205 -389 -137 16 327 143C791 270 859 675 859 675\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-198 -397C-198 -397 -130 8 334 135C798 262 866 667 866 667\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-191 -405C-191 -405 -123 0 341 127C805 254 873 659 873 659\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-184 -413C-184 -413 -116 -8 348 119C812 246 880 651 880 651\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-177 -421C-177 -421 -109 -16 355 111C819 238 887 643 887 643\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-170 -429C-170 -429 -102 -24 362 103C826 230 894 635 894 635\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-163 -437C-163 -437 -95 -32 369 95C833 222 901 627 901 627\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-156 -445C-156 -445 -88 -40 376 87C840 214 908 619 908 619\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-149 -453C-149 -453 -81 -48 383 79C847 206 915 611 915 611\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-142 -461C-142 -461 -74 -56 390 71C854 198 922 603 922 603\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-135 -469C-135 -469 -67 -64 397 63C861 190 929 595 929 595\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-128 -477C-128 -477 -60 -72 404 55C868 182 936 587 936 587\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-121 -485C-121 -485 -53 -80 411 47C875 174 943 579 943 579\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-114 -493C-114 -493 -46 -88 418 39C882 166 950 571 950 571\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-107 -501C-107 -501 -39 -96 425 31C889 158 957 563 957 563\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-100 -509C-100 -509 -32 -104 432 23C896 150 964 555 964 555\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-93 -517C-93 -517 -25 -112 439 15C903 142 971 547 971 547\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-86 -525C-86 -525 -18 -120 446 7C910 134 978 539 978 539\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-79 -533C-79 -533 -11 -128 453 -1C917 126 985 531 985 531\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-72 -541C-72 -541 -4 -136 460 -9C924 118 992 523 992 523\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-65 -549C-65 -549 3 -144 467 -17C931 110 999 515 999 515\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-58 -557C-58 -557 10 -152 474 -25C938 102 1006 507 1006 507\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-51 -565C-51 -565 17 -160 481 -33C945 94 1013 499 1013 499\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-44 -573C-44 -573 24 -168 488 -41C952 86 1020 491 1020 491\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"M-37 -581C-37 -581 31 -176 495 -49C959 78 1027 483 1027 483\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"];\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"return\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"(\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"div\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"className\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"={\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"cn\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"(\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"absolute h-full w-full inset-0 [mask-size:40px] [mask-repeat:no-repeat] flex items-center justify-center\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"className\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\")}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"svg\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"className\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\" z-0 h-full w-full pointer-events-none absolute \\\"\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"width\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"100%\\\"\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"height\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"100%\\\"\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"viewBox\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"0 0 696 316\\\"\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"fill\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"none\\\"\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"xmlns\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"http://www.w3.org/2000/svg\\\"\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"path\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"d\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"$24\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"stroke\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"url(#paint0_radial_242_278)\\\"\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"strokeOpacity\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"0.05\\\"\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"strokeWidth\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"0.5\\\"\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"path\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"{\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF955C\"},\"children\":\"paths\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"map\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"((\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#F38CEC\"},\"children\":\"path\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#F38CEC\"},\"children\":\"index\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\")\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"=\u003e\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"(\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B78AFF\"},\"children\":\"motion.path\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"key\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"={\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"`path-`\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"+\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"index\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"d\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"={\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"path\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"stroke\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"={\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"`url(#linearGradient-\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"index\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"}\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\")`\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"strokeOpacity\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"0.4\\\"\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"strokeWidth\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"0.5\\\"\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B78AFF\"},\"children\":\"motion.path\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"))}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"defs\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"{\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF955C\"},\"children\":\"paths\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"map\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"((\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#F38CEC\"},\"children\":\"path\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#F38CEC\"},\"children\":\"index\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\")\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"=\u003e\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"(\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B78AFF\"},\"children\":\"motion.linearGradient\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"id\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"={\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"`linearGradient-\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"index\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"}\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"`\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"key\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"={\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"`gradient-\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"index\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"}\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"`\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"initial\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"={{\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E1\"},\"children\":\"x1\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"0%\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E1\"},\"children\":\"x2\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"0%\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E1\"},\"children\":\"y1\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"0%\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E1\"},\"children\":\"y2\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"0%\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"}}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"animate\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"={{\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E1\"},\"children\":\"x1\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"[\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"0%\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"100%\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"],\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E1\"},\"children\":\"x2\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"[\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"0%\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"95%\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"],\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E1\"},\"children\":\"y1\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"[\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"0%\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"100%\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"],\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E1\"},\"children\":\"y2\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"[\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"0%\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"`\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF955C\"},\"children\":\"93\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"+\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF955C\"},\"children\":\"Math\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"random\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"()\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"*\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF955C\"},\"children\":\"8\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"}\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"%`\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"],\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"}}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"transition\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"={{\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E1\"},\"children\":\"duration\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF955C\"},\"children\":\"Math\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"random\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"()\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"*\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF955C\"},\"children\":\"10\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"+\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF955C\"},\"children\":\"10\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E1\"},\"children\":\"ease\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"easeInOut\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E1\"},\"children\":\"repeat\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#E35535\"},\"children\":\"Infinity\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E1\"},\"children\":\"delay\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF955C\"},\"children\":\"Math\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"random\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"()\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"*\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF955C\"},\"children\":\"10\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"}}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"stop\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"stopColor\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"#18CCFC\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"stopOpacity\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"0\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"stop\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"stop\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"stopColor\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"#18CCFC\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"stop\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"stop\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"offset\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"32.5%\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"stopColor\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"#6344F5\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"stop\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"stop\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"offset\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"100%\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"stopColor\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"#AE48FF\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"stopOpacity\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"0\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"stop\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B78AFF\"},\"children\":\"motion.linearGradient\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"))}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B78AFF\"},\"children\":\"radialGradient\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"id\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"paint0_radial_242_278\\\"\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"cx\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"0\\\"\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"cy\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"0\\\"\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"r\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"1\\\"\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"gradientUnits\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"userSpaceOnUse\\\"\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"gradientTransform\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"translate(352 34) rotate(90) scale(555 1560.62)\\\"\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"stop\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"offset\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"0.0666667\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"stopColor\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"var(--neutral-300)\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"stop\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"stop\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"offset\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"0.243243\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"stopColor\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"var(--neutral-300)\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"stop\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"stop\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"offset\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"0.43594\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"stopColor\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"white\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#EACD61\"},\"children\":\"stopOpacity\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"0\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"stop\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B78AFF\"},\"children\":\"radialGradient\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"defs\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"svg\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FF\"},\"children\":\"div\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#69C3FFAA\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\");\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\");\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF955C\"},\"children\":\"BackgroundBeams\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#FF738A\"},\"children\":\"displayName\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#B5BDCC\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#3CEC85\"},\"children\":\"\\\"BackgroundBeams\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"#D3D8E160\"},\"children\":\";\"}]]}]]}]}],[\"$\",\"$L16\",null,{\"value\":\"$25\",\"src\":\"src/registry/default/ui/background-beams.tsx\",\"event\":\"$undefined\",\"className\":\"absolute right-4 top-4\"}],\"$undefined\"]}]}]}]\n"])self.__next_f.push([1,""])

As you can see from the above example, while basic animations can be easily translated, the process requires providing extensive context. Simply querying the model to "convert this AnimeJS component using Tailwind to vanilla GSAP, HTML and JS" won’t yield the instant result you assume it can deliver. You need to detail the specific animations and the desired outcomes for more accurate assistance with plenty of back and forth dialog.

When it comes to complex animations, ChatGPT can get you about 50-75% of the way there, assuming you have a good understanding of the library you are comfortable using. The model will drop specifics, so you must be able to read and understand the code you’re converting. It provides a good starting point and can handle much of the boilerplate and basic setup, but fine-tuning and final adjustments will be necessary. This hands-on involvement is crucial, especially for intricate animations where the nuances of each library’s capabilities and syntax come into play. Here’s a link to my conversation with ChatGPT to get the above.

Using ChatGPT for this purpose is excellent for prototyping and expanding your own knowledge. It allows you to explore different approaches and techniques within a new library, giving you a solid foundation to build upon. However, for client work, it’s less ideal. The need to experiment with and refine contextual prompts can be time-consuming. Ensuring the model stays on the right track requires careful guidance and may result in wasted time that could be better spent on direct implementation. Therefore, while ChatGPT is a valuable tool for learning and initial development, it’s best supplemented with your expertise for polished, user-ready products.

Conclusion

GitHub Copilot and ChatGPT are intriguing tools that significantly aid learning, yet they require a serious amount of contextual input and experience to discern whether their suggestions are correct—a common theme across various practices beyond engineering. While these tools can propose useful code snippets, they may also recommend poor practices that overlook essential aspects like methodology, brevity, or readability. Experienced developers can recognize and avoid these "code smells" or bad practices, but these tools won't elevate a junior developer’s expertise.

In many cases, the guidance provided by Copilot and ChatGPT can lead novices astray, wasting valuable time and potentially causing confusion without fostering a deep understanding of the code. For senior developers, these tools can sometimes enhance development speed, but only if the prompts are crafted correctly and contextually. Crafting such prompts can itself be time-consuming and may detract from the overall efficiency.

While these tools can serve as a helpful pair programmer, particularly when a senior developer is unavailable, they have limitations. They seem to handle components under 100 lines of code well, but for more complex tasks, they often miss critical details, necessitating frequent corrections and diminishing their utility. Despite these shortcomings, these tools can still certainly be enjoyable to use. Even when they suggest flawed or suboptimal code, they sometimes introduce new ideas or approaches that enhance my technical understanding of a library or language. Through practice, I've learned when I should seek their assistance and when to proceed independently.

This is an ongoing conversation and I’d love to hear your thoughts as the tech advances. Feel free to reach me at chris@buildwithstudio.com

Written by Chris Tough, a frontend lead at Studio, this post summarizes the state of AI platforms as reviewed by their impact and usefulness for frontend developers as of July 2024. AI is changing quickly, and if you're looking for the latest insight, subscribe to Studio Bytes or contact us.

Given the volume of website traffic to many sites today, you may find yourself needing either a better or faster RDBMS server earlier than expected. As an alternative, consider caching as a way to speed up queries and save resources on the RDBMS server. Below, we’ll dig into a few strategies we utilize when we have a need for caching, especially within the context of using Django Rest Framework rather than vanilla Django.

Reasons for Caching

Faster response times

By using smart caching strategies, you can reduce your response times and enhance the overall experience for the end user.

Load reduction

Caching saves not only database resources, but can only save precious compute time on your backend servers - like saving responses in serialized form. This load reduction means you can handle more traffic with fewer resources, which can lead to cost reductions especially on cloud platforms.

Prerequisites

Let’s look at an example, assuming some familiarity with both Django and Django Rest Framework and the current (at publish) version of Django 4.2 (LTS) and DRF 3.14.0. Django’s caching framework is a nice abstraction so no matter the backend you use, the following example will still work and be relevant. Let’s use Redis as our cache backend.

Here is the setup used:

CACHES = {
        "default": {
            "BACKEND": "django.core.cache.backends.redis.RedisCache",
            "LOCATION": "redis://127.0.0.1:6379",
            }
        }

Nothing fancy, just the default client pointing to a local instance.

The Project

Now let’s imagine our site is a toy blog project, which is interesting given a mostly read-only data experience (aside from comments) which makes it an easy candidate for caching. Admittedly queries are simplistic enough that you likely wouldn’t need any caching in actuality, but let’s proceed.

Assume the following simple implementation as our base:

class Post(models.Model):
    title = models.CharField(max_length=200)
    content = models.TextField()
    author = models.ForeignKey(User, on_delete=models.CASCADE, related_name="posts")
    date_added = models.DateTimeField(auto_now_add=True)
    likes = models.ManyToManyField(User, related_name="liked", blank=True)

    def __str__(self):
        return self.title

And the assorted serializers:

class ListPostSerializer(serializers.ModelSerializer):
    likes_count = serializers.SerializerMethodField()

    class Meta:
        model = models.Post
        fields = ["id", "title", "author", "date_added", "likes_count"]

    def get_likes_count(self, obj):
        return obj.likes.count()

class RetrievePostSerializer(ListPostSerializer):
    class Meta:
        model = models.Post
        fields = ListPostSerializer.Meta.fields + ["content"]

Django Caching Strategies

The per-view cache that comes with Django vanilla can be made to work with DRF's own apiview/viewsets using method_decorator from django.utils.decorator. This is documented here for reference. The biggest problem we have had with this strategy is that as far as we know, there is no simple way to invalidate the cache. Sure, you can specify a cache-key prefix but there is no low level API to wild card delete cache entries. Because most of our data isn't cache-able on a time basis and invalidation is determined programmatically, we find ourselves in need of another caching solution.

The Low Level API

Most of the time for our project use cases, the high level caching strategies from Django are not an ideal solution. Fortunately, Django provides access to its so-called low level API with a basic API as well as a few other more specialized APIs that we’ll get back to:

from django.core.cache import cache

cache.set(key, value, timeout=DEFAULT_TIMEOUT, version=None)
cache.get(key, default=None, version=None)
cache.delete(key, version=None)

See the official documentation for a detailed API explanation.

The key is a string as expected and the value is any Python object that can be picked (most of them). Armed with this basic API, we now can devise new caching strategies.

Caching Single Objects

The likes count is simple to cache, as it doesn’t need to be updated in realtime so a simple timeout of 10 minutes for invalidation does the trick. It saves us a possible expensive count query on both the list and retrieve endpoints. This can have significant impact - especially on the listing endpoints if people really like your content.

def get_post_likes_count(post):
    cache_key = f"post-likes-count-{post.id}"
    data = cache.get(cache_key)

    if not data:
        data = post.likes.count()
        cache.set(key=cache_key, value=data, timeout=600)

    return data

And our serializer becomes:

# <snip>
def get_likes_count(self, obj):
	return get_post_likes_count(obj)

Retrieving Multiple Objects from Cache

All of this is great, but we can do better. Starting with the list endpoint. Currently we end up with many cache calls which in itself is not a big deal, but we know our cache backend (redis) supports a get_many primitive. Turns out, django low level cache also exposes it.

The problem is that right now, we only know the key (the post id) once in the serializer, which is too late to do a batching call. We must move the logic a bit earlier, in the view implementation.

Here is the viewset's list implementation:

def list(self, request, *args, **kwargs):
	page = self.paginate_queryset(self.get_queryset())
	likes = get_posts_likes_count(page)

	context = self.get_serializer_context()
	context.update({"likes": likes})
	serializer = self.get_serializer(page, many=True, context=context)

	return self.get_paginated_response(serializer.data)

By doing the pagination early, we ensure that our full queryset is evaluated only once, avoiding any unwanted queries. We then use that list to get a mapping of post IDs to likes count which is fed to our previous serializer through the context.

Let's get into the actual fetching and mapping implementation:

def get_posts_likes_count(posts):
    cache_keys = {f"post-likes-count-{p.id}": p.id for p in posts}
    data = cache.get_many(cache_keys.keys())

    data = {cache_keys[k]: v for k, v in data.items()}

    if len(data) != len(posts):
        missings = [p for p in posts if p.id not in data]
        for post in missings:
            data[post.id] = get_post_likes_count(post)

    return data

The implementation is pretty simple, we lookup all the keys using django's get_many function which saves many round trips. Then comes the logic bit to deal with caches missed. Because we might get partial cache misses, we must actually go over the full initial list and individually fetch the missing ones.

On to the last piece of the puzzle: the serializer modifications to read from our context provided mapping. This last part is pretty simple:

# <snip>
def get_likes_count(self, obj):
    if "likes" in self.context:
        return self.context["likes"][obj.id]
    else:
        return get_post_likes_count(obj)

Note that we still fall back to the get_post_likes_count() fetching function to keep this serializer usable in others context (the retrieve case, for example).

And there you have it, list endpoint lookup with one SQL query and one cache lookup.

Caching Serialized Objects

A maybe lesser known benefit of using caching in django is to save CPU time on the actual backend server. DRF's serializer are known to be bit a slow, some more than others like the GeoPoint serializers, for example. So when possible, we have found great speed and cpu usage benefits by caching the serialized form of the response. Implementation is trivial and left as an exercise for you.

Bonus: Double Caching Trick

One final bonus idea dubbed ‘double caching,’ is to store the result of the caching on the object instance which takes advantage of the fact that they are stateful during serialization. This is only useful in the rare occurrence that you need access twice to the same data to produce different serialized fields. For instance, perhaps you need to serialize the full list of comments of a blog post, but also have the latest one serialized to its own top level field.

Here is a possible implementation for this:

def get_post_comments(post):
    cache_key = f"post-comments-{post.id}"

    if not hasattr(post, "_post_comments_cache"):
        data = cache.get(cache_key)

        if not data:
            data = list(post.comments.all())
            cache.set(key=cache_key, value=data, timeout=0)

        post._post_comments_cache = data

    return post._post_comments_cache

As you can see, we first check if a specially chosen attribute exists on the obj and if it does, it indicates that the caching function has already been called and we just need to return it. Otherwise, it means we are first and we do the usual caching dance.

The serializer part (a bit contrived admittedly) looks like this:

#<snip>
def get_first_comment(self, obj):
  comments = get_post_comments(obj)
  return CommentSerializer(comments[0]).data if comments else None

def get_comments(self, obj):
  return CommentSerializer(get_post_comments(obj), many=True).data

This will only hit the cache or database depending if it's a cache miss, once during the object serialization.

We have seen a variety of caching strategies geared toward API use, using Django's low level cache. There is a famous saying by Phil Karlton that goes "There are only two hard things in Computer Science: cache invalidation and naming things." Stay tuned - we may next dig into that invalidation chapter!

Our team of backend developers and technical architects can help build a robust, scalable, and efficient backend for your project. Contact Studio today.

At Studio, we make strategic use of resources to ensure our backend services remain reliable while also being efficient. By optimizing resource usage through techniques like parallel processing, we deliver responsive applications that enhance user experience and maximize performance. Utilizing tools like Celery for distributed task management, process pools for CPU-intensive operations, and thread pools for I/O-bound tasks, ensure our applications can handle workloads efficiently.

Parallelizing task execution is important for several reasons. It improves performance and efficiency, making the most of available resources. It allows our applications to handle larger workloads while remaining responsive. Overall, It increases throughput by processing multiple tasks at once.

Given the impact of parallel processing, it’s important to get the most out of the implementation. Choosing the right method will ensure efficient use of resources and minimize processing time. Below, we will explore three popular solutions: Celery tasks, Python process pools and thread pools.

Celery Tasks

Celery is a distributed task queue that allows you to run tasks asynchronously. It is particularly useful for tasks that take a long time to complete, such as sending emails, processing images, or running complex calculations. Celery can distribute tasks across multiple worker nodes, making it highly scalable and well suited for on demand event based tasks. We favor Celery in most situations because of its reliability. The celery task queue is stored on disk so even in the case of an unhandled error the task will be picked up after restart.

Social media platforms use Celery to handle the distribution of notifications. When a user performs an action that triggers a notification, a Celery task is created to process and send the notification asynchronously. This ensures that the main application remains responsive and can handle other user requests without delay.

Process Pool

A process pool is a collection of worker processes that can execute tasks in parallel. This is useful for CPU-bound tasks that require heavy computation, as it can leverage multiple CPU cores. Process pools are tailored to operations like complex mathematical calculations, simulations, and encryption.

Financial institutions use multiprocessing to handle complex calculations and data analysis. By using process pools, they can process vast amounts of financial data in parallel, ensuring timely delivery of critical information to their users.

Thread Pool

A thread pool is a collection of worker threads that can execute tasks concurrently. Threads are lighter than processes, allowing for more efficient use of system resources. This is primarily applicable when the CPU's computational capacity is not the primary focus. Generally thread pools are most useful for I/O-bound tasks, such as reading from or writing to a database or making network requests.

E-commerce platforms and job search services often rely on web scraping, a task inherently bound by input/output operations due to the latency involved. With threading, web scraping can be executed concurrently, enabling multiple requests to be sent simultaneously without waiting for each to complete before initiating the next. Given that these threads handle only data retrieval and not processing, a lightweight threading approach suffices, eliminating the need for dedicated processes.

Below are some examples of when each solution excels, compared to what execution looks like when used otherwise. Note, the following examples try to match the number of available celery works, processes, and threads.

Scenario 1

Lets assume we have an API call that requires some processing but we don’t need to wait on it to complete to return the request. We don’t have a ton of processing to do but we want to be as responsive as possible so we leverage parallel processing.

Setup

import time

# Simulate some work
def my_function():
    time.sleep(2)
    return "Function result"

Celery

from post_request_task.task import shared_task
from django.utils import timezone

@shared_task
def task():
    my_function()
    
start = timezone.now()
task.apply_async()
end = timezone.now()
total_time = end - start
print(f"Time taken to execute: {total_time.total_seconds()} seconds")

>>> Time taken to start task: 0.070198 seconds
>>> task completes in 2.004567665979266s # (from celery logs)

Thread Pool

from django.utils import timezone
import concurrent.futures

start = timezone.now()
with concurrent.futures.ThreadPoolExecutor(max_workers=1) as executor:
    future = executor.submit(my_function)
    result = future.result()

end = timezone.now()
total_time = end - start
print(f"Total time taken: {total_time.total_seconds()} seconds")

>>> Total time taken: 2.006199 seconds

Process Pool

from datetime import datetime
import concurrent.futures

start = datetime.now()

with concurrent.futures.ProcessPoolExecutor(max_workers=1) as executor:
    future = executor.submit(my_function)
    result = future.result()

end = datetime.now()
total_time = end - start

print(f"Total time taken: {total_time.total_seconds()} seconds")

>>> Total time taken: 2.064775 seconds

Scenario 2

Let's assume we have the same processing to handle, but this time we need to run multiple instances at once. It’s light weight so thread pools should have the upper hand.

Celery

for _ in range(100):
    task.apply_async()

>>> Time taken to start tasks: 16 seconds # (from celerey log) 
>>> Total time taken: 26 seconds

Thread Pool

from django.utils import timezone
import concurrent.futures
start = timezone.now()

# Execute my_function 100 times using ThreadPoolExecutor
with concurrent.futures.ThreadPoolExecutor(max_workers=10) as executor:
    futures = [executor.submit(my_function) for _ in range(100)]
    results = [future.result() for future in futures]  # Collect results if needed

end = timezone.now()
total_time = end - start

print(f"Total time taken for 100 executions: {total_time.total_seconds()} seconds")
>>> Total time taken for 100 executions: 2.005628 seconds

Process Pool

from datetime import datetime
import concurrent.futures

start = datetime.now()

with concurrent.futures.ProcessPoolExecutor(max_workers=10) as executor:
    futures = [executor.submit(my_function) for _ in range(100)]
    result = [future.result() for future in futures]

end = datetime.now()
total_time = end - start

print(f"Total time taken: {total_time.total_seconds()} seconds")

>>> Total time taken: 20.182926 seconds

Scenario 3

This time lets use a CPU bound task to highlight the efficiency of process pools.

Setup

import math
# Simulate some CPU bound work
def calculate_factorial(n):
    for _ in range(50):
        math.factorial(n)
    return 

Celery

from post_request_task.task import shared_task
from django.utils import timezone

@shared_task
def calculate_factorial_task(n):
    math.factorial(n)
    
start_cpu_time = resource.getrusage(resource.RUSAGE_SELF).ru_utime
start_real = timezone.now()

for _ in range(20):
    calculate_factorial_task.apply_async((100000,))

end_cpu_time = resource.getrusage(resource.RUSAGE_SELF).ru_utime

# Calculate total CPU time
total_time = end_cpu_time - start_cpu_time
end_real = timezone.now()
total_real_time = end_real - start_real

print(f"Total CPU time taken by ThreadPoolExecutor: {total_time} seconds")
print(f"Total real time taken by ThreadPoolExecutor: {total_real_time.total_seconds()} seconds")

>>> CPU time start Celery tasks: 0.01562299999999972 seconds
>>> Real time start Celery tasks: 0.087077 seconds

>>> total time execution 33 seconds

Thread Pool

from django.utils import timezone
import resource
import concurrent.futures

start = resource.getrusage(resource.RUSAGE_SELF).ru_utime
start_real = timezone.now()
with concurrent.futures.ThreadPoolExecutor(max_workers=10) as executor:
    futures = [executor.submit(calculate_factorial, 100000) for _ in range(20)]
    result = [future.result() for future in futures]

end = resource.getrusage(resource.RUSAGE_SELF).ru_utime
end_real = timezone.now()
total_time = end - start
total_real_time = end_real - start_real

print(f"Total CPU time taken by ThreadPoolExecutor: {total_time} seconds")
print(f"Total real time taken by ThreadPoolExecutor: {total_real_time.total_seconds()} seconds")
>>> Total CPU time taken by ThreadPoolExecutor: 150.78055900000004 seconds
>>> Total real time taken by ThreadPoolExecutor: 152.458499 seconds

Process Pool

from concurrent.futures import ProcessPoolExecutor
from datetime import datetime
import resource

start = resource.getrusage(resource.RUSAGE_CHILDREN).ru_utime
start_real = datetime.now()    
with ProcessPoolExecutor(max_workers=10) as executor:
    futures = [executor.submit(calculate_factorial, 100000) for _ in range(20)]
    result = [future.result() for future in futures]
          
end_real = datetime.now()
end = resource.getrusage(resource.RUSAGE_CHILDREN).ru_utime
total_time = end - start
total_real_time = end_real - start_real

print(f"Total CPU time taken by Process Pool: {total_time} seconds")
print(f"Total real time taken by Process Pool: {total_real_time.total_seconds()} seconds")

>>> Total CPU time taken by Process Pool: 218.499442 seconds
>>> Total real time taken by Process Pool: 30.106353 seconds

Choosing the right data processing method depends on the nature of the task at hand. By understanding the strengths and limitations of each method, you can select the most appropriate one for your specific use case, ensuring optimal performance and resource utilization.

Building a digital product? Let Studio's technical architects guide your product development to best process data and optimize performance. Contact us today.

At Studio, we believe that the success of any mobile application hinges on its ability to meet and exceed user expectations. By prioritizing the needs, preferences, and behaviors of users, we build products that are intuitive, engaging, and foster engagement. So what makes User-centered design (UCD) different from standard design processes?

Understanding User-Centered Design

User-centered design is an iterative design process that places the user at the center of each stage of development. It involves understanding the user's needs and designing products that provide meaningful and relevant experiences. This approach contrasts with traditional design methodologies, which often prioritize technical or business requirements over the end-user experience.

Our designers put themselves in the user's shoes, considering their challenges, goals, and motivations. This empathetic approach ensures that the end product resonates with users, leading to higher satisfaction and participation.

1. User Research

Understanding our target audience is the first step in our user-centered design process. Conducting thorough user research helps us identify the characteristics, behaviors, and needs of potential users. Methods such as surveys, interviews, and focus groups provide valuable insights into user preferences and pain points.

2. Usability and Accessibility

Usability is a critical component of user-centric design. A mobile application must be easy to use, with a clear and intuitive interface that minimizes the learning curve. Key usability principles include:

• Consistency: Ensuring a consistent layout, design elements, and interactions across the application to prevent user confusion.
• Feedback: Providing immediate and clear feedback for user actions, such as button presses or form submissions.
• Efficiency: Designing workflows that minimize the number of steps required to complete a task.

Accessibility is equally important, ensuring that the application can be used by as many people as possible, including those with disabilities. Adhering to accessibility standards, such as the Web Content Accessibility Guidelines (WCAG), ensures that our app is inclusive. This includes providing text alternatives for non-text content, ensuring sufficient color contrast, and designing for screen reader compatibility.

View the Mustard case study

3. Intuitive Navigation

Navigation is a crucial aspect of mobile design, significantly impacting user experience. Users should be able to find what they need quickly and easily, without getting lost in a maze of screens. Best practices for intuitive navigation include:

• Clear Hierarchy: Organizing content in a logical structure, with the most important information easily accessible.
• Standard Navigation Patterns: Using familiar navigation patterns, such as bottom navigation bars or hamburger menus, helps users navigate effortlessly.
• Search Functionality: Including a robust search feature that allows users to quickly find specific content or features.

View the Creatively case study

4. Aesthetic and Minimalist Design

Aesthetics play a significant role in user experience. A visually appealing design not only attracts users but also enhances their overall satisfaction. However, aesthetics should not compromise functionality. Minimalist design, which focuses on simplicity and clarity, is often more effective in mobile applications. Key principles of minimalist design include:

• Focus on Content: Prioritizing content over decorative elements ensures that users can easily access the information they need.
• Whitespace: Using ample whitespace to create a clean and uncluttered interface.
• Consistent Visual Style: Maintaining a consistent visual style throughout the app, including colors, fonts, and iconography.

5. Performance and Responsiveness

Performance is a critical factor in user satisfaction. Mobile applications must load quickly and respond efficiently to user inputs. There are a number of areas design can help with this:

• Optimizing Load Times: Minimizing the size of assets and using efficient coding practices to reduce load times.
• Responsive Design: Ensuring that the application performs well across different devices and screen sizes.
• Mobile + Desktop Assets: Providing mobile-optimized and desktop-optimized assets for loading on each device type.
• Regular Testing: Continuously testing the app for performance issues and proactively optimizing.

6. User Feedback and Iterative Design

The process of designing around users is ever evolving. So constantly collecting user feedback is essential for understanding how users interact with the app and identifying areas for improvement. Some of the methods we use to gather this data are:

• In-App Surveys: Prompting users to provide feedback through short surveys within the app.
• Analytics: Using analytics tools to track user behavior and identify pain points or drop-off areas.
• User Testing: Conducting regular user testing sessions to observe how real users interact with the app and gather qualitative insights.

An iterative design process, where the app is continuously refined based on user feedback, ensures that the final product meets users' needs and expectations. This approach allows us to make incremental improvements and address issues before they become major problems.

Conclusion

User-centered design is essential for creating a successful mobile application. Prioritizing the needs and preferences of users enables us to build experiences that are not only functional but also enjoyable and memorable. Through thorough user research, intuitive navigation, aesthetic and minimalist design, and a commitment to usability and accessibility, we create mobile apps that truly resonate with their audience.

Continuous user feedback and an iterative design process further ensure that our apps evolve to meet changing user needs and preferences, leading to sustained success in the competitive mobile landscape.

Designing a product? Let our experts help. Contact Studio today.

As a Shopify Plus development partner and the design and development team behind multiple Shopify stores and D2C brands, we occasionally find that the only solution to a partner’s specific problem is the development of our own dedicated Shopify application. Checkout Upsell by Studio is the latest Shopify app we’ve released inspired by a problem our clients are facing. This guide should serve as a helpful set of tips that we’ve learned from now releasing multiple applications into the Shopify app ecosystem.

Releasing your first Shopify application, a quick note on MVP.

The technical complexity of any potential app is obviously going to be based on the problem you’re solving, and your customer need – instead of detailing all of the parameters of what makes a good MVP here, we recommend exploring the Studio Knowledge founders posts on how to approach your product. In short, when it comes to releasing your app – we’ll simply say:

• Prioritize speed. You can and should have a working app version installable into a test store within a day.
• Know your customer. If you don’t already have a customer – get one! Don’t build your app without some validation from someone who is going to need it.
• Race to review. Public app review and release can be a slow process. The faster you can get to submission, the better.

Options for designing MVP Shopify applications.

We’ve built apps that both operate partially within Shopify, or entirely within Shopify. When designing your app, you should start with some questions that will help you determine the right options for how your app is contained and displayed.

• Do you ever intend to run outside Shopify or integrate other ecommerce platforms?
• Are you pushing for being a prestigious, ‘Built for Shopify’ app?
• What’s your backend architecture and will it work inside Shopify, or does it require more or complex frameworks outside Shopify?

The answers to these questions will help determine whether your app should be fully hosted in Shopify, load as a frame in Shopify, or require separate mobile apps or web applications for your users.

For the sake of simplicity, if your app can be hosted fully in Shopify, it may make the most sense to get your app out and in the hands of users by prioritizing a Shopify hosted application first. You can fully utilize the Shopify Polaris design framework for your application UI, and then consider scaling into your own web application SaaS model after early market success.

Options for developing MVP Shopify applications.

While you can use Shopify to display your application to users, you’ll still want to set up the backend database and API connections that power your application. Similarly as with design, your MVP can benefit from using tools like Gadget.dev, that can empower your setup with a dedicated Shopify plugin serverless framework.

These tools can also empower non-technical team members to have a greater role in the application management, or simply save time by enabling things like API scoped requests based specifically on Shopify’s APIs.

Ultimately, your development setup should keep some scale in mind, but you shouldn’t over-engineer your infrastructure or your features. Keep in mind your customer needs, and only build the data models that make sense for your MVP. Release, and iterate. Rebuilding in this case isn’t a problem, but an indicator of success – if you’ve made it far enough to need a rebuild, you’re doing great!

Tips to keep in mind when developing MVP Shopify applications.

In our experience, getting your Shopify app out on to the market can be a fast, simple process – but occasionally, you might get tossed a curveball. If we were to distill what we’ve learned from multiple apps, we’d make sure to keep the following in mind:

• Releasing a sales channel application is a slower, more detailed process of both development and submission/review, so plan accordingly.
• Make sure to not over-request development scopes beyond what your app needs, and this will slow your review and approval.
• Plan each review submission to take anywhere from 2 to 10 days. (Painful, we know!) To that end, while perfection is the enemy of progress, don’t submit if you don’t think things are buttoned up. You can end up spending 2x of your development time in submission waiting cycles on a fast build, so only submit if you’re really ready to release.
• The process of collecting your submission collateral (release notes, images, benefits, copy, and so on) – takes about a day to pull together a nice package to put your app on even footing with the rest of the marketplace, so keep that in mind.

If you’d like to learn about what we built in our Shopify MVP application, read our post introducing Checkout Upsell by Studio, or check out our video shopping sales channel app, Refer.

If you need help with Shopify, Shopify Plus or Shopify app development, feel free to reach out to Studio now.

In SwiftUI, MatchedGeometryEffect is a powerful modifier that allows you to create smooth, seamless animations when transitioning views between different states. It is particularly useful for animating changes in view hierarchy, position, size, and shape.

To use MatchedGeometryEffect, you need a Namespace. A Namespace is created using the @Namespace property wrapper, and it ensures that the identifier is unique within a specific scope.

	@Namespace var animation

Diving In

To start, we're going to animate a text and an icon from one view to another:

struct ContentView: View {

	@Namespace var animation
	@State var showDetails = false

    var body: some View {
			ZStack {
				if !showDetails {
					VStack {
						Image(systemName: "globe")
							.imageScale(.large)
							.foregroundStyle(.tint)
							.matchedGeometryEffect(id: "globe", in: animation)
						Text("Hello, world!")
							.font(.title)
							.frame(width: 150, height: 50)
							.matchedGeometryEffect(id: "text", in: animation)

					}
					.padding()
				} else {
					VStack {
						HStack {
							Image(systemName: "globe")
								.imageScale(.large)
								.foregroundStyle(.tint)
								.matchedGeometryEffect(id: "globe", in: animation)
							Text("Hello, world!")
								.font(.title)
								.frame(width: 150, height: 50)
								.matchedGeometryEffect(id: "text", in: animation)
						}
						Text("Long description to display when showing the details of Hello World! ")

					}
				}
			}
			.onTapGesture {
				withAnimation {
					showDetails.toggle()
				}
			}
    }
}

To match one element to another you need to use the same ID on both the first view and the second. As you can see we use fixed size here for the Text Element. We could use autolayout for this but it results in some janky animation with truncated text, which we want to avoid. And using two different fonts requires using Animatable which we'll save for another time.

We can also add a background to our view and animate it:

struct ContentView: View {

	@Namespace var animation
	@State var showDetails = false

	var body: some View {
		ZStack {
			if !showDetails {
				VStack {
					Image(systemName: "globe")
						.imageScale(.large)
						.foregroundStyle(.tint)
						.matchedGeometryEffect(id: "globe", in: animation)
					Text("Hello, world!")
						.font(.title)
						.frame(width: 150, height: 50)
						.matchedGeometryEffect(id: "text", in: animation)
				}
				.padding()
				.background {
					Rectangle()
						.fill(.pink)
						.matchedGeometryEffect(id: "background", in: animation)
				}
			} else {
				VStack {
					HStack {
						Image(systemName: "globe")
							.imageScale(.large)
							.foregroundStyle(.tint)
							.matchedGeometryEffect(id: "globe", in: animation)
						Text("Hello, world!")
							.font(.title)
							.frame(width: 150, height: 50)
							.matchedGeometryEffect(id: "text", in: animation)
					}
					.padding()
					.background {
						Rectangle()
							.fill(.pink)
							.matchedGeometryEffect(id: "background", in: animation)
					}
					Text("Long description to display when showing the details of Hello World! ")

				}
			}
		}
		.onTapGesture {
			withAnimation {
				showDetails.toggle()
			}
		}
	}
}

If we want to animate the container of the view, then it's important to note that ZStack, VStack and HStack don't work well with matchedGeometryEffect, so we would need to first apply a modifier to the background of the view. As you can see it smoothly transitions between the small and large states.

In Review

MatchedGeometryEffect is a versatile and powerful tool for creating visually appealing animations. It can be particularly effective for complex view transitions and interactive UI elements, providing a smooth and intuitive user experience.

If you have questions on this modifier or if you need support building your product, contact Studio today.

Welcome to our 4-part Studio Design Guide on how to make Lottie animations. Lottie, developed by Airbnb, is an open-source tool revolutionizing animation with real-time rendering of vector animations. Ahead, we’ll introduce you to Lottie files and guide you through how to use the tool to make complex animations.

This comprehensive guide equips you with the skills to master how to use Lottie and bring your animations to life, making it a valuable resource for animation enthusiasts and businesses seeking captivating animations. Dive into our guide to unlock the full potential of Lottie animations and embark on a creative journey.

Part 1: Understanding Lottie Animations

Here in part 1, we will discuss the benefits of using Lottiefiles for your animations.

Lottie allows our design team and developers to create complex animations that are lightweight and easy to implement. We often create animations within the projects we work on. Some ranging from simple loaders to more complex UX animations. With Lottie, animations can be exported as JSON files, making them easily shareable across different platforms and devices.

To understand how to use Lottie, it's important to have a basic understanding of how vector animations work. Vector animations are made up of mathematical equations that define each element of an animation, like the position, size, and color of shapes. Unlike raster animations, which are made up of individual pixels, vector animations can be scaled up or down without losing quality.

Lottie takes vector animations a step further by allowing them to be easily integrated into mobile and web applications. This is because Lottie animations are rendered natively on the device, rather than being pre-rendered and played back as a video. This means that Lottie animations can be controlled and manipulated in real time, giving designers and developers more control over how animations are displayed and interacted with.

Now you have an understanding of LottieFiles and its uses, we will continue to talk about vector file preparation for your animation in part 2.

Part 2: Vector File Preparation

Ahead, we’re guiding you through how to prepare your files as vectors ready to import to After Effects for creating Lottie animations.

Here we will be using Figma as an example for creating the vector file. But you can use any software that works with vectors like Adobe Illustrator.

To setup a Figma file to support the Lottie plugin on After Effects, follow the steps below:

1. Open your Figma file and navigate to the page or artboard that contains the vector graphic you want to animate.
   
2. Select the vector graphic and click on the Export button in the properties panel on the right.
3. In the Export dialog box that appears, choose "SVG" as the format and select the folder where you want to save the exported file.

Now you have an understanding of vector file preparation, we will continue to talk about importing and animating in After Effects.

Part 3: Importing to After Effects to Create Lottie Animations

After Effects is a popular software used for creating animations, motion graphics, and visual effects. One of the benefits of using After Effects is the ability to export animations to the Lottie format, which is a lightweight and scalable animation format that can be easily integrated into web and mobile apps. To create Lottie animations in After Effects, you can follow these steps:

1. Create a new composition in After Effects and import your vector files.
2. Use keyframes to animate the properties of your design assets such as position, rotation, and scale.
3. Preview your animation and make any necessary adjustments.
4. Install the Lottie plugin for After Effects (if you haven't already) and use it to export your animation as a JSON file.

Let’s continue learning about how to make a Lottie animation by discussing rendering and exporting in part 4.

Part 4: Rendering and Exporting a Lottie Animation

To render and export Lottie animation files in After Effects, you can use the LottieFiles plugin.

1. First, select the composition in After Effects that you want to export as a Lottie file. Then, go to the File menu and select Window > Extensions > LottieFiles.
2. In the LottieFiles panel, select the correct composition if you have more than one in your project. You can choose the settings for your Lottie file, such as the resolution, frame rate, and compression.
3. Once you're satisfied with the settings, click Render to export your Lottie file. You will them have the option to download your animation as a JSON file. Your Lottie animation will also be stored in your online account that was created when downloaded the plugin. You can then use the Lottie file in your web or mobile projects.

Now you’re ready to apply what you learned about how to make Lottie animations to create your own - it’s time to get creative!

Need some more inspiration for your Lottie animations? Check out one we made earlier! Download for free and try it out: https://lottiefiles.com/animations/bouncing-baseball-loader

Welcome to Studio's comprehensive tutorial on harnessing the power of Figma for creating and implementing dynamic design systems. Figma, a game-changer in the world of design, offers unparalleled collaboration, vector editing, and prototyping capabilities, making it an indispensable tool for designers and teams striving for high-quality and efficient design work.

In this five-part Studio Design Guide, we'll delve into everything regarding how to use Figma, from understanding its fundamentals to mastering its advanced features. By the end of this Figma tutorial, you’ll be equipped to leverage the powerful tool for your design projects with maximum proficiency.

Part 1: Understanding How to Use Figma

In part 1, we will discuss the benefits of using Figma and give an introduction to design systems.

We are a small design team working on multiple projects. To be efficient and to easily collaborate, we recommend using Figma over other design software. It’s an essential tool for designers and teams who want to create high-quality designs and collaborate effectively. Its real-time collaboration, vector editing, online autosaving, and prototyping capabilities make it an extremely flexible tool.

When starting a design project, the goal for us is to create a cohesive and water tight design system that translates through all elements of your work. This usually starts with a brand guide (logo, font, colors etc.) to establish how the project will look. A component library will be formed from that brand guide to transfer the brand elements to usable objects for building your project. This level of cross pollination is very important for us to execute well and stay organized.

Design systems are a collection of reusable components, guidelines, and assets that ensure consistency and efficiency across all design projects. Figma is an excellent tool for creating design systems because it allows designers to easily create and organize design components in a shared library.

How to use Figma to create a design system: Designers create a component library where they can store all the necessary design elements, such as colors, typography, buttons, and icons. This library can be shared with the entire team, ensuring that everyone has access to the same design assets.

By knowing how to use Figma for this purpose, we can streamline our design process and ensure consistency and efficiency across all design projects. This is also useful when handing over files to clients, as you can create copies and set access permissions.

Now you have an understanding of why we use design systems in Figma. We will continue to talk about understanding your design systems needs and share additional Figma tutorials in part 2.

Part 2: Understanding Your Design System Needs

In part 2 of this Figma tutorial, we will be guiding you through key considerations when creating a design system.

Design systems are a collection of reusable components, guidelines, and assets that ensure consistency and efficiency across all design projects. Designers that understand how to use Figma for creating design systems can easily create and organize design components in a shared library.

To create a design system in Figma, designers create a component library where they can store all the necessary design elements, such as colors, typography, buttons, and icons. This library can be shared with the entire team, ensuring that everyone has access to the same design assets.

Design systems are an essential aspect of any organization that values consistency, efficiency, and scalability in its design work. They provide a framework for creating, managing, and presenting design assets, guidelines, and principles that define a brand's visual language and user experience.

However, creating a design system with some Figma how-to knowledge requires a significant investment of time, resources, and expertise. Therefore, it's crucial to understand your organization’s specific needs before embarking on this journey. Here are some key considerations to keep in mind:

Know your design goals and objectives

Before creating a design system with Figma, you need to have a clear understanding of your design goals and objectives. What problem are you trying to solve? What do you want to achieve with your designs? What values and attributes do you want to convey through your brand? Answering these questions will help you define your design system's scope, components, and guidelines.

Assess your design team's skills and capabilities

Design systems require a multidisciplinary team with a wide range of skills and expertise, from design research and strategy to UI/UX design and development. Assess your team's strengths and weaknesses to identify the gaps you need to fill. You may need to hire new talent, train your existing team, or outsource some tasks to external experts.

Evaluate your design workflow and processes

Design systems are only effective if they integrate seamlessly into your design workflow and processes. Evaluate your existing workflow to identify the pain points, bottlenecks, and inefficiencies that a design system can address. Consider the tools and technologies your team uses, the feedback and collaboration mechanisms, and the version control and documentation practices. Then you can better understand how to use Figma to create a design system that feels integral to your existing operations and processes.

Define your design system's components and guidelines

Based on your design goals, team skills, and workflow evaluation, you can start defining your design system's components and guidelines. These may include color palettes, typography, iconography, layout grids, UI patterns, accessibility standards, and more. Make sure to document these components and guidelines in a clear and accessible way and communicate them to your team and stakeholders to ensure everyone knows how to use the Figma in the correct, on-brand way.

Continuously test, iterate, and improve your design system

Design systems in Figma are not static entities; they need to evolve and adapt to changing design trends, technological advancements, and user feedback. Therefore, it's essential to continuously test, iterate, and improve your design system over time. Collect feedback from your team and users, measure the system's impact on your design outcomes, and adjust your components and guidelines accordingly.

By understanding your design systems needs and with a little Figma how-to knowledge, you can create a design system that supports your organization's goals, empowers your team, and enhances your brand's identity and user experience. Good luck!

Now that you have an understanding of your design systems needs, we will continue to talk about organizing your files and folders in part 3.

Part 3: Organizing Your Figma Files and Folders

In part 3, we will be guiding you through how to set up your files in order in Figma to stay organized and efficient when creating your design system files.

For this Figma tutorial, we have included visual examples of a project of ours called Creatively. This project required a high level of implementation as there were lots of files linking to the design system - not only product design files, but also marketing, social assets, end of year stats, etc.

Keeping your files and folders organized is an essential piece of Figma how-to knowledge for improving productivity, saving time, and reducing stress. Tidying your files and folders can help you stay on top of your daily tasks and obligations. Here are some tips to help you organize your Figma files and folders:

1. Create a system

The first step in organizing your Figma files and folders is to create a system that works for you. This can be as simple or as complex as you want it to be. The key is to make sure that it is easy to use and that it makes sense to you. You can organize your files by date, by project, by client, or by any other category that makes sense for your needs.

2. Use descriptive names

When you save a file in Figma, use a descriptive name that will help you find it later. Use a name that describes the content of the document, such as "project proposal" or "sales report."

3. Use folders

Folders are an essential tool for organizing your Figma files. Use folders to group related files together. For example, you could create a folder for each project you are working on or a folder for each client you work with.

Now you have an understanding of organizing your files and folders in Figma. We will continue to talk about type styles, color palettes, and components in part 4 of this Figma tutorial.

Part 4: Type Styles, Color Palettes, and Components

In part 4, we will be guiding you through creating the key ingredients for your design system in Figma. These elements will be used in multiple places throughout your project. They have functional purpose and must meet general design requirements like font size and color contrast for legibility.

When learning how to use Figma for designing any visual content or layout, there are three important aspects that need to be considered; the type styles, color palettes and components.

Type Styles

Type styles refer to the various types of fonts and typography used in any design. Different type styles can convey different emotions and can be used to create a specific tone or mood. For instance, serif fonts are considered to be more traditional and formal, whereas sans-serif fonts are more modern and casual.

It is important to use a consistent type style throughout the Figma design to create a cohesive look and feel. Using too many different type styles can create visual chaos and make the design appear unprofessional.

Color Palettes

The color palette refers to the range of colors used in any design. Colors can be used to evoke emotions, convey messages and create a visual hierarchy. For instance, a muted color palette can create a calming effect, while bright colors can be used to create a sense of excitement or urgency.

Choosing the right color palette is crucial to creating a successful design in Figma. It is important to choose colors that complement each other and convey the desired emotion or message.

Components

Components refer to the individual elements that make up a design. This can include images, icons, buttons, and other design elements. It is important to choose components that are consistent with the overall design aesthetic and that support the message or purpose of the design.

Using consistent components throughout the Figma design can create a visual unity and make the design easier to understand.

In conclusion, when using Figma to design any visual content or layout, it is important to consider the type styles, color palettes, and components. These three aspects can have a significant impact on the success of the design and should be carefully considered to create a cohesive and effective final product.

Now you have an understanding of type styles, color palettes, and components - and their importance when designing in Figma. We will continue to talk about connecting, publishing and reviewing libraries in part 5.

Part 5: How to Connect, Publish, and Review Libraries in Figma

Figma is a powerful design tool that allows designers to create visually stunning designs. One of the key features of Figma is the ability to connect, update, and review libraries. In part 5 of this Figma tutorial, we will explore how to do each of these tasks.

Connecting Libraries

Connecting a library in Figma allows you to access all the design assets stored in the library and use them in your design. To connect a library, follow these steps:

1. Open the file you want to connect the library to.
2. Go to the Assets panel and click on the Libraries tab.

Once you have connected the library, you will be able to access all the design assets stored in the library and use them in your Figma design.

Publishing Changes

To publish changes made to a library in Figma, follow these steps:

1. Open the library file you want to publish changes from.
2. Go to the File menu and click on the Publish Changes button.
3. In the Publish Changes dialog box, select the changes you want to publish.
4. Click on the Publish button.

Once you have published the changes, the library will be updated to the latest version and all users with access to the library will be able to see and use the updated assets.

Reviewing Libraries

Knowing how to use Figma and review libraries allows you to see all the changes made to the library and decide which changes to accept or reject. To review a library, follow these steps:

1. Open the library file you want to review.
2. Go to the File menu and click on the History tab.
3. Click on the Library tab.
4. Select the version of the library you want to review.
5. Click on the Review Changes button.
6. Review all the changes made to the library.
7. Accept or reject each change.

Once you have reviewed and accepted the changes, the library will be updated to the latest version.

Conclusion

Over this five-part Figma tutorial, we've journeyed through the intricacies of this powerful design tool, from establishing robust design systems to efficiently organizing files and harnessing the synergy of type styles, color palettes, and components. We've also explored the pivotal role of connecting, publishing, and reviewing libraries in Figma, underscoring its significance in enhancing design workflows. This series not only equips you with the Figma how-to knowledge to confidently create and manage design systems on the platform, but also inspires innovation and sophistication in your design endeavors, positioning you at the forefront of digital design excellence. For more insights and guidance, explore our range of design guides and continue your journey in learning how to use Figma for exceptional design outcomes.