Skip to main content
The Fragancias component displays all available candle scents with an elegant fade-up animation. Customers can also request custom fragrances not listed.

​
Component overview

The Fragancias component presents a centered list of five signature fragrances with a smooth fade-up entrance animation powered by the intersection observer. Location: src/components/Fragancias.astro

​
Available fragrances

Velaria offers five signature aromatic fragrances:
1

Vainilla (Vanilla)

Classic, sweet, and comforting vanilla scent
2

Pino (Pine)

Fresh, woody pine fragrance perfect for winter and holidays
3

Sándalo (Sandalwood)

Rich, warm, and earthy sandalwood aroma
4

Canela (Cinnamon)

Spicy, warm cinnamon scent ideal for cozy atmospheres
5

Lavanda (Lavender)

Calming, floral lavender perfect for relaxation
If you want a fragrance not listed here, Velaria can source it for you. Contact them through the contact form to request custom scents.

​
Component structure

The component uses a responsive flexbox layout with centered content: 
<div class="flex flex-col justify-center items-center intersect:animate-fade-up animate-once animate-duration-[1000ms] animate-ease-in my-20">
  <div class="w-[80%] lg:w-[50%]">
    <div>
      <h2 class="text-center text-3xl mb-10">Fragancias disponibles</h2>
      <ul>
        <li class="mb-5 text-2xl text-orange-900 text-center italic">Vainilla</li>
        <!-- More fragrances... -->
      </ul>
      <p class="text-center text-lg mt-10">
        Si deseas alguna fragancia que no se encuentre aquí nosotros la conseguimos
      </p>
    </div>
  </div>
</div>

​
Animation implementation

The entire section uses the animate-fade-up class from tailwindcss-animated:
  • intersect:animate-fade-up: Triggers fade-up animation when visible
  • animate-once: Animation plays only once (doesn’t repeat on scroll)
  • animate-duration-[1000ms]: 1-second animation duration
  • animate-ease-in: Smooth easing function
The animation only triggers when the component enters the viewport, creating a smooth reveal effect as users scroll down the page.

​
Responsive design

The component adapts to different screen sizes:
BreakpointContainer WidthBehavior
Mobile80%Full-width on small screens
Large (lg)50%Narrower on desktop for better readability

​
Typography styles

​
Heading

text-center text-3xl mb-10
  • Centered, large heading (3xl = 1.875rem)
  • 2.5rem bottom margin

​
Fragrance list items

mb-5 text-2xl text-orange-900 text-center italic
  • Large text (2xl = 1.5rem)
  • Rich orange-brown color (text-orange-900)
  • Centered and italicized for elegance
  • 1.25rem bottom margin between items

​
Custom fragrance note

text-center text-lg mt-10
  • Medium text size (lg = 1.125rem)
  • Centered with large top margin

​
Complete component code

<div
  class="flex flex-col justify-center items-center intersect:animate-fade-up animate-once animate-duration-[1000ms] animate-ease-in my-20"
>
  <div class="w-[80%] lg:w-[50%]">
    <div>
      <h2 class="text-center text-3xl mb-10">Fragancias disponibles</h2>

      <ul>
        <li class="mb-5 text-2xl text-orange-900 text-center italic">Vainilla</li>
        <li class="mb-5 text-2xl text-orange-900 text-center italic">Pino</li>
        <li class="mb-5 text-2xl text-orange-900 text-center italic">Sándalo</li>
        <li class="mb-5 text-2xl text-orange-900 text-center italic">Canela</li>
        <li class="mb-5 text-2xl text-orange-900 text-center italic">Lavanda</li>
      </ul>

      <p class="text-center text-lg mt-10">
        Si deseas alguna fragancia que no se encuentre aquí nosotros la conseguimos
      </p>
    </div>
  </div>
</div>

​
Usage in pages

Import and use the fragrances component in any Astro page:
src/pages/index.astro
---
import Fragancias from "../components/Fragancias.astro";
---

<Layout title="VELARIA | Inicio">
  <Fragancias />
</Layout>
Ensure the tailwindcss-intersect observer script is loaded in your layout before using intersection observer animations. See Layout.astro:31.

​
Customization options

​
Adding new fragrances

To add more fragrances, simply add new list items: 
<li class="mb-5 text-2xl text-orange-900 text-center italic">Gardenia</li>
<li class="mb-5 text-2xl text-orange-900 text-center italic">Eucalipto</li>

​
Changing animation

You can modify the animation by changing the classes: 
<!-- Fade left instead -->
intersect:animate-fade-left

<!-- Longer duration -->
animate-duration-[2000ms]

<!-- Different easing -->
animate-ease-out
See the animations documentation for all available animation classes.

​
Color customization

Change the fragrance text color by modifying the text-orange-900 class: 
<!-- Amber tone -->
<li class="mb-5 text-2xl text-amber-900 text-center italic">Vainilla</li>

<!-- Brown tone -->
<li class="mb-5 text-2xl text-brown-800 text-center italic">Vainilla</li>

​
Accessibility

  • Semantic HTML: Uses proper <ul> and <li> tags for list structure
  • Sufficient contrast: Orange-900 text on white background meets WCAG AA standards
  • Readable font size: 2xl (1.5rem) ensures good readability
  • Animation consideration: animate-once prevents distracting repeated animations

Product catalog

Browse all available candle designs and sizes

Contact form

Request custom fragrances or place orders

Animations

Learn about intersection observer animations

Build docs developers (and LLMs) love

Get started for freeTalk to us