better

docs/.vitepress/components/avatar-playground.vue

@@ -6,9 +6,18 @@ const state = useState()
 
 <template lang='pug'>
 .p-12.max-w-1200px.m-auto 
-	h1.text-2xl.font-bold Playground
-	.flex.w-full.justify-between.gap-2.mt-8
-		.p-2.flex.flex-col.gap-2
+	h1.text-4xl.font-bold Playground
+	.flex.w-full.gap-2.mt-8
+		.p-8.h-60.w-60
+			transition(name="fade" mode="out-in")
+				.m-auto(:key="state.pub")
+					gun-vue-avatar.cursor-pointer(
+						:style="{borderRadius: (state.options.round ? 100000 : 0) + 'px'}"
+						:pub="state.pub"
+						v-bind="state.options"
+						@click="state.generatePair()"
+						)
+		.p-2.flex.flex-col.gap-2.w-80
 			select.p-2(v-model="state.options.draw")
 				option(value="circles") Circles
 				option(value="squares") Squares
@@ -19,9 +28,7 @@ const state = useState()
 			label.flex.gap-2
 				input(type="checkbox" v-model="state.options.reflect")
 				.text-lg Reflect
-		.p-2
-			gun-vue-avatar.rounded-full(
-				:pub="state.pub"
-				v-bind="state.options"
-			)
+			label.flex.gap-2
+				input(type="checkbox" v-model="state.options.round")
+				.text-lg Round
 </template>

docs/.vitepress/components/show-key.vue

@@ -0,0 +1,8 @@
+<script setup>
+import { state } from '../composables/state';
+</script>
+
+<template lang='pug'>
+transition(name="fade" mode="out-in")
+	.p-8.text-center.font-mono.break-all(:key="state.pub") {{ state.pub }}
+</template>

docs/.vitepress/composables/state.js

@@ -1,7 +1,8 @@
 
-import { reactive, computed, toRef } from "vue";
+import { reactive, computed, toRef, onMounted } from "vue";
 import { useRefHistory } from '@vueuse/core'
 
+
 export const state = reactive({
 	initiated: false,
 	pair: {
@@ -15,23 +16,35 @@ export const state = reactive({
 		size: 200,
 		reflect: true,
 		dark: false,
-		draw: 'circles'
+		draw: 'circles',
+		round: true
 	},
+	loop: 0,
+	setPair(pair) {
+		state.pair = pair
+		clearInterval(state.loop)
+	}
 })
 
 state.history = useRefHistory(toRef(state, 'pair'))
 
 export function useState() {
 	if (!state.initiated && !import.meta.env.SSR) {
 		import('gun/gun').then(() => {
-			import('gun/sea').then(async (SEA) => {
+			import('gun/sea').then(async SEA => {
 				state.generatePair = async function () {
 					state.pair = await SEA.pair()
 				}
 			})
 		})
-
+		onMounted(() => {
+			state.loop = setInterval(() => {
+				state.generatePair()
+			}, 2000)
+		})
+		state.initiated = true
 	}
+
 	return state
 }
 

docs/.vitepress/theme/Layout.vue

@@ -1,9 +1,10 @@
 <script setup>
 import DefaultTheme from 'vitepress/theme'
-import { computed, onMounted } from 'vue';
+import { computed } from 'vue';
 import GunVueAvatar from '../components/gun-vue-avatar.vue';
 import HeaderLinks from '../components/header-links.vue'
 import AvatarPlayground from '../components/avatar-playground.vue'
+import ShowKey from '../components/show-key.vue'
 import { useState } from '../composables/state'
 
 const { Layout } = DefaultTheme
@@ -12,11 +13,7 @@ const state = useState()
 
 const list = computed(() => [...state.history.history].reverse())
 
-onMounted(() => {
-	const loop = setInterval(() => {
-		state.generatePair()
-	}, 2000)
-})
+
 
 </script>
 
@@ -41,18 +38,20 @@ Layout
 	template(#nav-bar-content-before)
 		header-links
 	template(#home-hero-after)
+		show-key
 		.flex.flex-wrap.items-center.px-12.justify-start.max-w-1200px.m-auto.flex-column-reverse.gap-2.pb-12.flex-wrap-reverse
 			transition-group(name="fade")
 				.flex(
 					v-for="rec in list"
 					:key="rec"
 					)
-					gun-vue-avatar.rounded-full(
+					gun-vue-avatar.rounded-full.cursor-pointer(
 						:pub="rec.snapshot.pub"
 						:size="50"
+						@click="state.setPair(rec.snapshot)"
 						) {{ rec.snapshot.pub }}
 	template(#home-features-after)
-		AvatarPlayground
+		avatar-playground
 </template>
 
 <style scoped lang="postcss">

docs/.vitepress/theme/styles.css

@@ -1,15 +1,15 @@
 /* FADE */
 
 .fade {
-	transition: all 0.5s ease;
+	transition: all 0.8s ease;
 }
 
 .fade-enter-active {
-	transition: all 0.2s ease;
+	transition: all 0.4s ease;
 }
 .fade-leave-active {
 	opacity: 0;
-	transition: all 0.1s ease;
+	transition: all 0.3s ease;
 }
 
 .fade-leave-to {

docs/guide/index.md

@@ -6,9 +6,7 @@ title: Guide
 
 <a href="https://www.npmjs.com/package/gun-avatar" target="_blank"><img src="https://img.shields.io/npm/v/gun-avatar?color=E23C92&logo=npm&style=for-the-badge" alt="NPM version"></a>
 
-[Try it on codepen](https://codepen.io/Davay/pen/eYGeGMZ)
-
-![avatar](https://raw.githubusercontent.com/DeFUCC/gun-avatar/master/avatars.gif)
+![avatar](/avatars.gif)
 
 It takes a public key of 88 symbols and creates a base64 code to be set to an img tag. SEA public key consists of 87 symbols including a dot in the middle, so we can consider it as `(7*4+1)*2`.
 
@@ -19,7 +17,7 @@ So the steps to generate a unique picture for the key are like that:
 3. Circles from the first part of the key are bigger and are placed with normal composite mode. Circles from the second part are smaller and placed with 'lighten' composite mode.
 4. Then half of the canvas gets reflected to create a nice symmetric 'portrait' to be used as an avatar of a SEA public key.
 
-![avatars](https://raw.githubusercontent.com/DeFUCC/gun-avatar/master/avatar-list.png)
+![avatars](/avatar-list.png)
 
 ## How to install?
 
@@ -91,7 +89,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
 2. **Squares** - gradient squares over blurred ones (useful for rooms)
 
-![rooms](https://raw.githubusercontent.com/DeFUCC/gun-avatar/master/rooms.gif)
+![rooms](/rooms.gif)
 
 ```html
 <gun-avatar