Rename effects / diversify display text

effects/button-bubble-bl.vue

@@ -1,5 +1,5 @@
 <template>
-<button>Button</button>
+<button>Bubble</button>
 </template>
 
 <style scoped>

effects/button-bubble-br.vue

@@ -1,5 +1,5 @@
 <template>
-<button>Button</button>
+<button>Bubble</button>
 </template>
 
 <style scoped>

effects/button-bubble-tl.vue

@@ -1,5 +1,5 @@
 <template>
-<button>Button</button>
+<button>Bubble</button>
 </template>
 
 <style scoped>

effects/button-bubble-tr.vue

@@ -1,5 +1,5 @@
 <template>
-<button>Button</button>
+<button>Bubble</button>
 </template>
 
 <style scoped>

effects/button-bubble.vue

@@ -1,5 +1,5 @@
 <template>
-<button>Button</button>
+<button>Bubble</button>
 </template>
 
 <style scoped>

effects/button-jelly.vue

@@ -1,5 +1,5 @@
 <template>
-<button>Button</button>
+<button>Jelly</button>
 </template>
 
 <style scoped>

effects/button-pulse.vue

@@ -1,5 +1,5 @@
 <template>
-<button>Button</button>
+<button>Pulse</button>
 </template>
 
 <style scoped>

effects/button-shine.vue

@@ -1,5 +1,5 @@
 <template>
-<button>Button</button>
+<button>Shine</button>
 </template>
 
 <style scoped>

effects/button-slide-down.vue

@@ -1,5 +1,5 @@
 <template>
-<button>Button</button>
+<button>Slide</button>
 </template>
 
 <style scoped>

effects/button-slide-left.vue

@@ -1,5 +1,5 @@
 <template>
-<button>Button</button>
+<button>Slide</button>
 </template>
 
 <style scoped>

effects/button-slide-right.vue

@@ -1,5 +1,5 @@
 <template>
-<button>Button</button>
+<button>Slide</button>
 </template>
 
 <style scoped>

effects/button-slide-up.vue

@@ -1,5 +1,5 @@
 <template>
-<button>Button</button>
+<button>Slide</button>
 </template>
 
 <style scoped>

effects/hover-over-under.vue → effects/hover-bars.vue

@@ -1,5 +1,5 @@
 <template>
-<span>Hover</span>
+<span>Bars</span>
 </template>
 
 <style scoped>

effects/hover-over-under2.vue → effects/hover-bars2.vue

@@ -1,5 +1,5 @@
 <template>
-<span>Hover</span>
+<span>Bars</span>
 </template>
 
 <style scoped>

effects/hover-over-under3.vue → effects/hover-barsr3.vue

@@ -1,5 +1,5 @@
 <template>
-<span>Hover</span>
+<span>Bars</span>
 </template>
 
 <style scoped>

effects/hover-highlight-right.vue

@@ -1,5 +1,5 @@
 <template>
-<span>Hover</span>
+<span>Highlight</span>
 </template>
 
 <style scoped>

effects/hover-highlight-up.vue

@@ -1,5 +1,5 @@
 <template>
-<span>Hover</span>
+<span>Highlight</span>
 </template>
 
 <style scoped>

effects/hover-overline.vue

@@ -1,5 +1,5 @@
 <template>
-<span>Hover</span>
+<span>Overline</span>
 </template>
 
 <style scoped>

effects/hover-overline2.vue

@@ -1,5 +1,5 @@
 <template>
-<span>Hover</span>
+<span>Overline</span>
 </template>
 
 <style scoped>

effects/hover-left-right.vue → effects/hover-pillars.vue

@@ -1,5 +1,5 @@
 <template>
-<span>Hover</span>
+<span>Pillars</span>
 </template>
 
 <style scoped>

effects/hover-left-right2.vue → effects/hover-pillars2.vue

@@ -1,5 +1,5 @@
 <template>
-<span>Hover</span>
+<span>Pillars</span>
 </template>
 
 <style scoped>

effects/hover-left-right3.vue → effects/hover-pillars3.vue

@@ -1,5 +1,5 @@
 <template>
-<span>Hover</span>
+<span>Pillars</span>
 </template>
 
 <style scoped>

effects/hover-strikethrough.vue

@@ -1,5 +1,5 @@
 <template>
-<span>Hover</span>
+<span>Strikethrough</span>
 </template>
 
 <style scoped>

effects/hover-underline.vue

@@ -1,5 +1,5 @@
 <template>
-<span>Hover</span>
+<span>Underline</span>
 </template>
 
 <style scoped>

effects/hover-underline2.vue

@@ -1,5 +1,5 @@
 <template>
-<span>Hover</span>
+<span>Underline</span>
 </template>
 
 <style scoped>

effects/hover-underline3.vue

@@ -1,5 +1,5 @@
 <template>
-<span>Hover</span>
+<span>Underline</span>
 </template>
 
 <style scoped>

effects/input-outline.vue

@@ -1,6 +1,6 @@
 <template>
 <div>
-  <input type="text" placeholder="Input">
+  <input type="text" placeholder="Outline">
   <span class="bottom"></span>
   <span class="right"></span>
   <span class="top"></span>

effects/input-outline2.vue

@@ -1,6 +1,6 @@
 <template>
 <div>
-  <input type="text" placeholder="Input">
+  <input type="text" placeholder="Outline">
   <span class="bottom"></span>
   <span class="right"></span>
   <span class="top"></span>
@@ -36,7 +36,8 @@ input::placeholder {
 span {
   position: absolute;
   background-color: #fc2f70;
-  transition: transform 0.1s ease;
+  transform-origin: center;
+  transition: transform 0.5s ease;
 }
 
 .bottom,
@@ -55,46 +56,27 @@ span {
   transform: scaleY(0);
 }
 
+.top {
+  top: 0;
+}
+
 .bottom {
   bottom: 0;
-  transform-origin: bottom right;
 }
 
-input:focus ~ .bottom {
-  transform-origin: bottom left;
-  transform: scaleX(1);
+.left {
+  left: 0;
 }
 
 .right {
   right: 0;
-  transform-origin: top right;
-  transition-delay: 0.05s;
-}
-
-input:focus ~ .right {
-  transform-origin: bottom right;
-  transform: scaleY(1);
-}
-
-.top {
-  top: 0;
-  transform-origin: top left;
-  transition-delay: 0.15s;
 }
 
-input:focus ~ .top {
-  transform-origin: top right;
+input:focus ~ .top, input:focus ~ .bottom {
   transform: scaleX(1);
 }
 
-.left {
-  left: 0;
-  transform-origin: bottom left;
-  transition-delay: 0.25s;
-}
-
-input:focus ~ .left {
-  transform-origin: top left;
+input:focus ~ .left, input:focus ~ .right {
   transform: scaleY(1);
 }
 </style>

effects/input-outline3.vue → effects/input-trace.vue

@@ -1,6 +1,6 @@
 <template>
 <div>
-  <input type="text" placeholder="Input">
+  <input type="text" placeholder="Trace">
   <span class="bottom"></span>
   <span class="right"></span>
   <span class="top"></span>
@@ -36,8 +36,7 @@ input::placeholder {
 span {
   position: absolute;
   background-color: #fc2f70;
-  transform-origin: center;
-  transition: transform 0.5s ease;
+  transition: transform 0.1s ease;
 }
 
 .bottom,
@@ -56,27 +55,46 @@ span {
   transform: scaleY(0);
 }
 
-.top {
-  top: 0;
-}
-
 .bottom {
   bottom: 0;
+  transform-origin: bottom right;
 }
 
-.left {
-  left: 0;
+input:focus ~ .bottom {
+  transform-origin: bottom left;
+  transform: scaleX(1);
 }
 
 .right {
   right: 0;
+  transform-origin: top right;
+  transition-delay: 0.05s;
+}
+
+input:focus ~ .right {
+  transform-origin: bottom right;
+  transform: scaleY(1);
+}
+
+.top {
+  top: 0;
+  transform-origin: top left;
+  transition-delay: 0.15s;
 }
 
-input:focus ~ .top, input:focus ~ .bottom {
+input:focus ~ .top {
+  transform-origin: top right;
   transform: scaleX(1);
 }
 
-input:focus ~ .left, input:focus ~ .right {
+.left {
+  left: 0;
+  transform-origin: bottom left;
+  transition-delay: 0.25s;
+}
+
+input:focus ~ .left {
+  transform-origin: top left;
   transform: scaleY(1);
 }
 </style>

effects/input-underline.vue

@@ -1,6 +1,6 @@
 <template>
 <div>
-  <input type="text" placeholder="Input">
+  <input type="text" placeholder="Underline">
   <span></span>
 </div>
 </template>

effects/input-underline2.vue

@@ -1,6 +1,6 @@
 <template>
 <div>
-  <input type="text" placeholder="Input">
+  <input type="text" placeholder="Underline">
   <span></span>
 </div>
 </template>