rising-sun

v1.0.5

Published

4 months ago

A beautiful animated web component that creates a rising sun effect with smooth transitions and customizable colors.

0High
0Medium
0Low

davidkurek

webcomponent custom-element vanilla-js vite library

Rising Sun

A beautiful animated web component that creates a rising sun effect with smooth transitions and customizable colors. Perfect for adding engaging visual elements to your web applications.

Demo – animated rising sun with horizon and reflection

Installation

# npm
npm install rising-sun
# yarn
yarn add rising-sun
# pnpm
pnpm add rising-sun

Quick Start

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

  <!-- Basic usage -->
  <rising-sun></rising-sun>

  <!-- With custom colors -->
  <rising-sun 
    primary-color="#ff6160" 
    secondary-color="#ffe3e2" 
    background-color="#f2f3f7"
    width="400px">
  </rising-sun>

  <script type="module">
    import 'rising-sun';
  </script>
</body>
</html>

API

Custom Element

The <rising-sun> element is automatically registered when you import the library.

import 'rising-sun';
// Now you can use <rising-sun> in your HTML

Attributes

| Attribute | Type | Default | Description | |-----------|------|---------|-------------| | width | string | --host-width CSS custom property | Width of the component | | primary-color | string | --primary-color CSS custom property | Primary color of the sun | | secondary-color | string | --secondary-color CSS custom property | Secondary color for gradients | | background-color | string | --background-color CSS custom property | Background color |

CSS Custom Properties

You can also customize the component using CSS custom properties:

rising-sun {
  --host-width: 500px;
  --primary-color: #ff6160;
  --secondary-color: #ffe3e2;
  --background-color: #f2f3f7;
}

Properties

| Property | Type | Description | |----------|------|-------------| | width | string | Gets the width from attribute or CSS custom property | | primaryColor | string | Gets the primary color from attribute or CSS custom property | | secondaryColor | string | Gets the secondary color from attribute or CSS custom property | | backgroundColor | string | Gets the background color from attribute or CSS custom property |

Examples

Basic Implementation

<rising-sun></rising-sun>

Custom Styling

<rising-sun 
  width="600px"
  primary-color="#ff4444" 
  secondary-color="#ffaaaa"
  background-color="#e6f3ff">
</rising-sun>

Using CSS Custom Properties

.my-rising-sun {
  --host-width: 400px;
  --primary-color: #ffa500;
  --secondary-color: #ffd700;
  --background-color: #87ceeb;
}

<rising-sun class="my-rising-sun"></rising-sun>

Animation Features

The rising sun component includes:

Sun Rise Animation: Smooth upward movement with easing
Horizon Growth: Expanding horizon line effect
Reflection Animation: Animated water reflection
Intersection Observer: Animation triggers when component enters viewport
Gradient Transitions: Dynamic color transitions during animation

Compatibility

Modern Browsers: Chrome 54+, Firefox 63+, Safari 10.1+, Edge 79+
Node.js: 16+ (for development)
Module Format: ES modules only

CDN Usage

<script type="module">
  import 'https://unpkg.com/rising-sun@latest/dist/rising-sun.min.js';
</script>

Contributing

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.